Zielony Smok

HTML5 canvas – tutorial

Fraktale Lapunowa (4)

Chaos deterministyczny oraz fraktale zostały szerzej omówione i oprogramowane w książkach: “Matematyka dla programistów Java” oraz “Matematyka dla programistów JavaScript”. Linki do książek są po prawej stronie okna.

Użyte zostały skrypty ax.js oraz rzutowanie.js i lapunow.js.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"




Listing

var tabl = new Array(1, 0, 1, 1);
var cv = document.getElementById('canvas');
var ctx = cv.getContext('2d');
var width = cv.width;
var height = cv.height;
var offset=30;
ctx.fillStyle="white";
ctx.fillRect(offset, offset, width - 2 * offset, height - 2 * offset);
var diag1 = new Ax(0, 0, width - 2 * offset, height - 2 * 
    offset, 0, 0, 4, 4, 0.5, 0.25, offset);
diag1.drawGrid("lightgray");
ctx.fillStyle="black";
var imageData = ctx.getImageData(offset, offset, width - 2 * 
   offset, height - 2 * offset);
var data = imageData.data;
var lambda = 0.0;
var rx = 0.0;
var ry = 0.0;
var lap;
var color = null;
for(var x = 0; x < width - 2 * offset; x++){
	rx = diag1.rzut.getRX(x);
	for(var y = 0; y < height - 2 * offset; y++){
		ry = diag1.rzut.getRY(y);
		lap = lapunow(rx, ry, tabl, 100);
		lambda = 550 + lap * 50;
		color = lambdaToColor(lambda);
		setPixel(data, width-2 * 
                 offset,x,y,color[0],color[1],color[2],color[3]);
	}
}