Apfelmännchen

by Erik Wegner

HTML

<canvas id="canvas1" width="640" height="520">C A N V A S</canvas>
<script type='text/worker' id='worker-script'>
var iterations = 120

function smoothColor(checkResult) {
  // iterations / 6 = 20
  var returnarray = [0,0,0]
  var iterationLength = iterations / 6;
  //   0..19  rgb 255, 0..255, 0
  if (checkResult < iterationLength * 1) {
    innerValue = checkResult - iterationLength * 0;
  	returnarray = [255, 255 * Math.sin(innerValue * Math.PI / 2 / iterationLength) , 0];
    return returnarray;
  }
  //  20..39  rgb 255..0, 255, 0
  if (checkResult < iterationLength * 2) {
    innerValue = checkResult - iterationLength * 1;
  	returnarray = [255 * Math.cos(innerValue * Math.PI / 2 / iterationLength), 255, 0];
    return returnarray;
  }
  //  40..59  rgb 0, 255, 0..255
  if (checkResult < iterationLength * 3) {
    innerValue = checkResult - iterationLength * 2;
  	returnarray = [0, 255, 255 * Math.sin(innerValue * Math.PI / 2 / iterationLength)];
    return returnarray;
  }
  //  60..79  rgb 0, 255..0, 255
  if (checkResult < iterationLength * 4) {
    innerValue = checkResult - iterationLength * 3;
  	returnarray = [0, 255 * Math.cos(innerValue * Math.PI / 2 / iterationLength), 255];
    return returnarray;
  }
  //  80..99  rgb 0..255, 0, 255
  if (checkResult < iterationLength * 5) {
    innerValue = checkResult - iterationLength * 4;
  	returnarray = [255 * Math.sin(innerValue * Math.PI / 2 / iterationLength), 0, 255];
    return returnarray;
  }
  // 100..119 rgb 255, 0, 255..0
  innerValue = checkResult - iterationLength * 5;
  returnarray = [255, 0, 255 * Math.cos(innerValue * Math.PI / 2 / iterationLength)];
  return returnarray;
}

//C-Werte checken nach Zn+1 = Zn^2 + C, Zo = 0. 30 Iterationen.
function checkC(reC, imC) {
  var reZ=0,imZ=0,reZ_minus1=0,imZ_minus1=0;
  for (var i=0;i<iterations;i++) {
    imZ=2*reZ_minus1*imZ_minus1+imC;
    reZ=reZ_minus1*reZ_minus1-imZ_minus1*imZ_minus1+reC;
    if (reZ*reZ+imZ*imZ>4) return i;
   ...

JavaScript

var canvas;
var blockwidth = 80
var blockheight = 60
var canvasbreite = 640
var canvashoehe = 520
var bereiche=[]
var temppixel = []

aufgaben(0, 0, canvasbreite, canvashoehe);

function aufgaben(x,y, breite, hoehe) {
	if (breite > blockwidth || hoehe > blockheight) {
		var halbebreite = Math.floor(breite / 2)
		var halbehoehe = Math.floor(hoehe / 2)
		// Quadrant 1
		aufgaben(x + breite - halbebreite, y, breite - halbebreite, hoehe - halbehoehe)
		// Quadrant 2
		aufgaben(x, y, breite - halbebreite, hoehe - halbehoehe)
		// Quadrant 3
		aufgaben(x, y + hoehe - halbehoehe, breite - halbebreite, hoehe - halbehoehe)
		// Quadrant 4
		aufgaben(x + breite - halbebreite, y + hoehe - halbehoehe, breite - halbebreite, hoehe - halbehoehe)
	} else {
		bereiche.push({x: x, y: y, breite: breite, hoehe: hoehe});
	}
}


function prepare() {
    var canvasElem = document.getElementById('canvas1');
    if (canvasElem) {
        width = canvasElem.width;
        height = canvasElem.height;
    }
    if (canvasElem.getContext) {
        canvas = canvasElem.getContext('2d');
        canvas.fillStyle = "#aaa";
        canvas.fillRect(0, 0, width, height);
				temppixelimg = canvas.createImageData(1,1);
				temppixel  = temppixelimg.data;
    }
}

function setPixel(x, y, r, g, b, a) {
	temppixel[0]   = r;
	temppixel[1]   = g;
	temppixel[2]   = b;
	temppixel[3]   = 255;
  canvas.putImageData(temppixelimg, x, y);
}

/*
class VirtCalc {
    private delta: number;
    constructor(
        public virtstart: number,
        public virtlength: number,
        public realstart: number,
        public reallength: number)
    {
        var virtrange = virtlength - virtstart
        var realrange = reallength - realstart
        this.delta = virtrange / realrange 
    }
    virtpos(realpos: number): number {
        return this.virtstart + this.delta * realpos
    }
}*/
var VirtCalc = (function () {
    function VirtCalc(virtstart, virtlength, realstart, reallength) {
        this.virtstart =...