dh-Materialien
JavaScript Programme
 

Mandelbrotfolgen

Herstellen von Punktfolgen gemäß der Iterationsvorschrift zneu = zalt2 + c; z0 = 0+0·i

Re =  ..  [-2.0..2.0]    Im =  ..  [-2.0..2.0]
 c =  +  i    depth =  [1..100000]    =  [1..500]

// Mandelbrotfolgen (c)2018 dh
// Der Programmcode ist hier gekürzt wiedergegeben.


var cnv;
var ctx;

var re_min = -2;
var re_max = 0.5;
var im_min = -1.1;
var im_max = 1.1;

var reSign = +1;
var imSign = +1;

var grid = 0;
var plot = 0;
var nfilm = 0;
var number = 1;

window.onload = function() {
  initCanvas();
}

function Len2Dec(len) {
  return parseInt(len.substring(0,len.length-2));
}

function setPoint(x,y) {
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.arc(x, y, 1, 0, 2*Math.PI);
  ctx.stroke();
}

function drawLine(x1,y1, x2,y2, width, color) {
  ctx.lineWidth = width;
  ctx.strokeStyle = color;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.stroke();
}

function writeText(txt, x,y, align) {
  ctx.font = "normal 40px arial";
  ctx.strokeStyle = "#000000";
  ctx.textAlign = align;
  ctx.fillText(txt,x,y);
}

function clearCanvas() {
  ctx.clearRect(0, 0, 1000, 1000);
  plot = 0;
}

function switchGrid() {
  if (plot == 1) {
    grid = (grid == 0)? 1 : 0;
    drawPoints('black');
  }
}

function initCanvas() {
  cnv = document.getElementById ("dhcanvas");
  ctx = cnv.getContext("2d");
  clearCanvas();
}

function initValues() {
clearCanvas();
  nfilm = 0;
  document.getElementById("re_min").value = -1.1;
  document.getElementById("re_max").value = 0.1;
  document.getElementById("im_min").value = -0.4;
  document.getElementById("im_max").value = 0.5;
  document.getElementById("re_c").value = -0.7447;
  document.getElementById("im_c").value = 0;
  document.getElementById("bdepth").value = 1000;
  document.getElementById("number").value = 1;
}

function check(val, vmin, vmax) {
  var result = false;
  if ((val > vmin)&&(val < vmax)) result = true;
  return result;
}

function iterate(rec,imc, mx,cx, my,cy, depth) {
  var re_new = 0;
  var im_new = 0;
  var re_old, im_old;
  var i = 0;
  var cn = 0;

  while ((i < depth)&&(cn < 4)) {
    re_old = re_new;
    im_old = im_new;
    re_new = re_old*re_old-im_old*im_old+rec;
    im_new = 2*re_old*im_old+imc;
    if ((check(re_new,re_min,re_max))&&
      (check(im_new,im_min,im_max))){
        setPoint(mx*re_new + cx, my*im_new + cy);
    }
    re_new*re_new+im_new*im_new;
    i++;
  }
}

function xscaling(remin, remax) {
  var num;
  var c = ((remax-remin) > 1)? 2 : 1;
  if ((remax-remin) > 2) c = 4;
  var ztequ = 100/(remax-remin);
  var n = 0;
  var i = 0;
  while (n < 995-c*ztequ) {
    n = n + c*ztequ;
    i = i + c;
    drawLine(Math.round(n),1000, Math.round(n),970, 3, 'black');
    if ((grid == 1)&&(plot == 1)) {
      drawLine(Math.round(n),1000, Math.round(n),0, 1, 'gray');
    }
    num = Math.round(10*(remin + i*0.1))/10;
    writeText(num.toString(), Math.round(n), 950, 'center');
  }
}

function yscaling(immin, immax) {
  var c = ((immax-immin) > 0.7)? 2 : 1;
  if ((immax-immin) > 2) c = 4;
  var ztequ = 100/(immax-immin);
  var n = 1000;
  var i = 0;
  while (n > c*ztequ+5) {
    n = n - c*ztequ;
    i = i + c;
    drawLine(0,Math.round(n), 20,Math.round(n), 3, 'black');
    if ((grid == 1)&&(plot == 1)) {
      drawLine(0,Math.round(n), 1000,Math.round(n), 1, 'gray');
    }
    num = Math.round(10*(immin + i*0.1))/10;
    writeText(num.toString(), ;35, Math.round(n)+15, 'start');
  }
}

function getValue(bname) {
  return Math.round(10*document.getElementById(bname).value)/10;
}

function drawPoints(col) {
  clearCanvas();
  plot = 1;
  ctx.strokeStyle = col;

  var remin = getValue("re_min");
  var remax = getValue("re_max");
  var immin = getValue("im_min");
  var immax = getValue("im_max");

  var mx = 1000/(remax-remin);
  var cx = -1000*remin/(remax-remin);
  var my = 1000/(immin-immax);
  var cy = -1000*immax/(immin-immax);

  xscaling(remin, remax);
  yscaling(immin, immax);
  iterate(re_c,im_c, mx,cx, my,cy, depth);
}

Chaos im Komplexen