Computer-Ag am WvS Blog der Computer-AG am Werner von Siemens Gymnasium Berlin

Erstmal zu acht hier. Mit Quint. Morten und Angelo sind auch da. Wir machen weiter mit Minsky. Code folgt…

var HtmlElements = {
    jsCanvas: ""
};

var Canvas = {
	element: "",
	get: function (width = 800, height = 800) {
		Canvas.element = document.createElement("canvas");
		bodyTag = document.getElementsByTagName("body")[0];
		bodyTag.appendChild(Canvas.element);
		Canvas.element.width = width;
		Canvas.element.height = height;
		Canvas.element.style.border = "12px solid red";
		//~ var canvasWidth = Canvas.element.width;
		//~ var canvasHeight = Canvas.element.height;
		var context= Canvas.element.getContext("2d");
		
		var canvasData = context.getImageData(0, 0, Canvas.element.width, Canvas.element.height);
		var walk = function (r, g, b, a) {
			for (var j = 30; j < 330; j++) {
				draw(j,j,r,g,b,a);
				draw(j,j+1,r,g,b,a);
				draw(j,j+2,r,g,b,a);
				draw(j,j+3,r,g,b,a);
			}	
		}

		function draw (x,y, r, g, b, a) {
			if(x < 0 || x >= width ||
			    y < 0 || y >= height)
				return;
			var index = (x + y * width) * 4;
			canvasData.data[index + 0] = r;
			canvasData.data[index + 1] = g;
			canvasData.data[index + 2] = b;
			canvasData.data[index + 3] = a;
		}
		
		function drawSquare(x,y,color,size) {
			a = 255;
			for (var i = 0; i < size; i++) {
				for (var j = 0; j < size; j++) {
					draw (x+i,y+j,color.r,color.g,color.b,a);
				}
			}
		}
		
		var minsky_q = function (x, y, d, e, color, units) {
			var iMax = 1000;
			for (var i = 0; i < iMax; i++) {
				x = x - Math.floor(d*y);
				y = y + Math.floor(e*x);
				drawSquare((x|0) * units + Canvas.element.width/2, Canvas.element.height/2 - (y|0) * units, color, units-1);
			}
		}
		var minsky_circ = function (x, y, d, e, color, units) {
			var a = 2*e/Math.sqrt(d*e*(4-d*e));
			//~ console.log(a);
			//~ console.log("minsky_circ_a");
			//~ var a = 1;
			var b = -Math.sqrt(d*e/(4-d*e));
			//~ var b = 0;
			var iMax = 100000;
			for (var i = 0; i < iMax; i++) {
				x = x - Math.floor(d*y);
				y = y + Math.floor(e*x);
				//int gecastet durch |0
				drawSquare(((x*a+y*b)|0) * units + Canvas.element.width/2, Canvas.element.height/2 - (y|0) * units, color, units-1);
			}
		}
		var W = function(p) {
			var bla = Math.sin(Math.PI/p);
			var ret =  4*bla*bla;
			//~ console.log(ret);
			//~ console.log("bla");
			return ret;
		}
		var color = function (r,g,b) {
			return {r:r, g:g, b:b};
		}
			
		var colorGenerate = function () {
			
		}
/* accepts parameters
 * h  Object = {h:x, s:y, v:z}
 * OR 
 * h, s, v
*/
function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (arguments.length === 1) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return {
        r: Math.round(r * 255),
        g: Math.round(g * 255),
        b: Math.round(b * 255)
    };
}


		//~ minsky_q(15, -24, 1, W(7), color(255,0,0), 4);
		//~ minsky_q(15, -37, 1, W(7), color(0,0,255), 4);
		//~ minsky_q(15, -16, 1, W(7), color(255, 0, 255), 4);
		//~ minsky_q(15, -4, 1, W(7), color(255,0,0), 4);
		//~ minsky_q(15, -12, 1, W(7), color(255,0,0), 4);
		//~ minsky_q(15, -49, 1, W(7), color(255,0,0), 4);
		//~ minsky_q(15, -55, 1, W(7), color(255,0,0), 4);
		
		

		//~ minsky_circ(15, -24, 1, W(7), color(255,0,0), 4);
		//~ minsky_circ(15, -37, 1, W(7), color(0,0,255), 4);
		//~ minsky_circ(15, -16, 1, W(7), color(255, 0, 255), 4);
		//~ minsky_circ(15, -4, 1, W(7), color(255,0,0), 4);
		//~ minsky_circ(15, -12, 1, W(7), color(255,0,0), 4);
		//~ minsky_circ(15, -49, 1, W(7), color(255,0,0), 4);
		//~ minsky_circ(15, -55, 1, W(7), color(255,0,0), 4);
		
		//~ minsky_q(1, 0, 8/15, 15/4, color(255,111,0), 4);
		//~ minsky_circ(1, 0, 8/15, 15/4, color(255,111,0), 4);
		minsky_circ(-19/24, -1015/121, 7381/5040, 5040/7381, color(255,111,0), 2);
//~ context.fillRect(100, 50, 200, 100);
		//~ walk(255,100,122,255);
		context.putImageData(canvasData, 0,0);
        return Canvas.element;
    },
    setAbsolutePosition: function (x, y, div) {
        "use strict";
        div.style.top = BaseValues.height - y + "px";
        div.style.left = BaseValues.width / 2 + x + "px";
    }
};
window.onload = function () {
	
	var jsCanvas = Canvas.get(800,800);
	
 
};