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

Jannik ist mal gekommen, Morten und Angelo sind da, Johann und Thomas auch. Quint auch. Und sechs weitere.

Angelo und Robert machen Minsky:

/*jslint
 browser, for
 */
/*global
 window, alert, console
 */
var HtmlElements = {
    baseDiv: "",
    output: "",
    minus: "",
    streckung: "",
    faktor: "",
    konstante: ""
};
var BaseValues = {
    width: 1000,
    height: 500,
    vorzeichen: 1,
    streckungswert: 1
};
var Output = {
    text: function (text) {
        "use strict";
        HtmlElements.output.innerHTML = text;
    },
    textAdd: function (text) {
        "use strict";
        HtmlElements.output.innerHTML = HtmlElements.output.innerHTML + "<hr>" + text;
    }
};
var DotDiv = {
    get: function (color) {
        "use strict";
        var punkt;
        var div;
        punkt = document.createTextNode(".");
        div = document.createElement("div");
        div.appendChild(punkt);
        HtmlElements.baseDiv.appendChild(div);
        div.style.color = color;
        div.style.position = "absolute";
        return div;
    },
    setAbsolutePosition: function (x, y, div) {
        "use strict";
        div.style.top = BaseValues.height - y + "px";
        div.style.left = BaseValues.width / 2 + x + "px";
    }
};

var W = function(p) {
	var bla = Math.sin(Math.PI/p);
	return 4*bla*bla;
}
  
var Draw;
Draw = {
    horizontalLine: function (start, end, y, color) {
        "use strict";
        var i = 0;
        var x;
        var div = false;
        for (i = start; i < end; i += 1) {
            div = DotDiv.get(color);
            x = i; // + BaseValues.width / 2;
            DotDiv.setAbsolutePosition(x, y, div);
        }
    },
    verticalLine: function (start, end, x, color) {
        "use strict";
        var i = 0;
        var y;
        var div = false;
        // x = x + BaseValues.width / 2;
        for (i = start; i < end; i += 1) {
            div = DotDiv.get(color);
            y = i;
            DotDiv.setAbsolutePosition(x, y, div);
        }
    },
    coordinateSystem: function () {
        "use strict";
        Draw.horizontalLine(-500, 500, 0, "#AA0050");
        Draw.horizontalLine(0, 100, 100, "#aa0066");
        Draw.verticalLine(-200, 500, 0, "#000099");
        Draw.verticalLine(0, 100, 100, "#A00099");
    },
    dot: function (x, y, color) {
        "use strict";
        var div = DotDiv.get(color);
  	div.className = "dot";
        DotDiv.setAbsolutePosition(x, y, div);
    },
    parabola: function (faktor, konstante) {
        "use strict";
        var units = 100;
        var increment = 1 / units;
        var streckungsfactor = units / BaseValues.streckungswert;
        var x;
        var y;
        var color;
        // alert(BaseValues.vorzeichen);
        for (x = -1; x < 1; x += increment) {
//            y = 1 * konstante + Math.sqrt(1 - BaseValues.vorzeichen * BaseValues.streckungswert * (x * x)) + x * faktor;
            y = Math.sqrt(1 - BaseValues.vorzeichen * BaseValues.streckungswert * (x * x));
            // console.log(y);
            color = "#ff0000";
            Draw.dot(x * units, y * units, color);
            Draw.dot(x * units, -y * units, color);
        }
        var scheitelpunktX = BaseValues.vorzeichen * (-1) * faktor / 2 * streckungsfactor;
        var scheitelpunktY = BaseValues.vorzeichen * scheitelpunktX * scheitelpunktX / streckungsfactor + faktor * scheitelpunktX + konstante * units;
        var outputScheitelpunktX = scheitelpunktX / units;
        var outputScheitelpunktY = scheitelpunktY / units;
        Output.textAdd(" - Scheitelpunkt(" + outputScheitelpunktX.toFixed(4) + "/" + outputScheitelpunktY.toFixed(4) + ")");
        Draw.scheitelpunkt(scheitelpunktX, scheitelpunktY, "#9030c9");
    },
    minsky: function (x, y, d, e, color, units) {
        "use strict";
	var iMax = 1000;
        for (var i = 0; i < iMax; i++) {
		x = x - d*y;
		y = y + e*x;
		Draw.dot(x * units, y * units, color);
        }
    },
    minsky_q: function (x, y, d, e, color, units) {
        "use strict";
	var iMax = 1000;
        for (var i = 0; i < iMax; i++) {
		x = x - Math.floor(d*y);
		y = y + Math.floor(e*x);
		Draw.dot(x * units, y * units, color);
        }
    },
    scheitelpunkt: function (scheitelpunktX, scheitelpunktY, color) {
        "use strict";
        var div = DotDiv.get(color);
        div.style.padding = 0;
        div.style.fontSize = "50px";
        var y = Math.round(scheitelpunktY) + 31;
        var x = Math.round(scheitelpunktX - 4);
        DotDiv.setAbsolutePosition(x, y, div);
    }
};

var ButtonClickFunctions = {
    zeichne: function () {
        "use strict";
        if (HtmlElements.minus.checked === true) {
            BaseValues.vorzeichen = -1;
        } else {
            BaseValues.vorzeichen = 1;
        }

        var faktor = HtmlElements.faktor.value;
        var konstante = HtmlElements.konstante.value;
        var konstantenOutput = "";
        if (konstante) {
            konstantenOutput = " + " + konstante;
        }
        var outputVorzeichen = "";
        if (BaseValues.vorzeichen === -1) {
            outputVorzeichen = "-";
        }
        var outputStreckungswert = "";
        if (HtmlElements.streckung.value > 0) {
            BaseValues.streckungswert = HtmlElements.streckung.value;
        } else {
            BaseValues.streckungswert = 1;
        }
        if (BaseValues.streckungswert !== 1) {
            outputStreckungswert = BaseValues.streckungswert;
        }

        Output.text("y = " + outputVorzeichen + outputStreckungswert + "x&#x00B2; + " + faktor + "x" + konstantenOutput);
        Draw.minsky(faktor, konstante);
    },
    generateBulk: function () {
        "use strict";
        var select = document.getElementById("increment");
        Output.text("ausgewählt: " + select.value);
        var i = 0;
        var j = 0;
        for (i = -4; i <= 4; i += 1 * (select.value)) {
            Draw.parabola(i, 0);
            j += 1;
            if (j > 400) {
                alert("break at 400 iterations!!!");
                break;
            }
        }
    }
};

window.onload = function () {
    "use strict";
    HtmlElements.baseDiv = document.getElementById("xsquare");
    Draw.coordinateSystem();
    var neededElements = ["output", "konstante", "faktor", "minus", "streckung"];
    Object.keys(neededElements).forEach(function (key) {
        HtmlElements[neededElements[key]] = document.getElementById(neededElements[key]);
        // alert(neededElements[key]);
    });
    //Draw.minsky(5.0,5.0,1,W(5), "#f0000ff", 30);
    //Draw.minsky(26.0/5.0,26.0/5.0,Math.sqrt(W(50)),Math.sqrt(W(50)), "#ff0000", 30);
    Draw.minsky_q(15, -24, 1, W(7), "#ff0000", 4);
    Draw.minsky_q(15, -37, 1, W(7), "#0000ff", 4);
    Draw.minsky_q(15, -16, 1, W(7), "#ff00ff", 4);
    Draw.minsky_q(15, -4, 1, W(7), "#ff0000", 4);
    Draw.minsky_q(15, -12, 1, W(7), "#ff0000", 4);
    Draw.minsky_q(15, -49, 1, W(7), "#ff0000", 4);
    Draw.minsky_q(15, -55, 1, W(7), "#ff0000", 4);
    
    // for (i in neededElements) {
    //     HtmlElements[neededElements[i]]= document.getElementById(neededElements[i]);
    //     alert(neededElements[i]);
    // }
    // HtmlElements.output = document.getElementById("output");
    // HtmlElements.konstante = document.getElementById("konstante");
    // HtmlElements.faktor = document.getElementById("faktor");
    // HtmlElements.minus = document.getElementById("minus");
    // HtmlElements.streckung = document.getElementById("streckung");
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parabeln</title>
    <type="text/css">
    <script src="minsky.js">
    </script>
    <style>
	div.dot{
		#font-size: 4em;
		font-size: 30px;
	}
    </style>
</head>
<body>
<div style="position:absolute;top:80px;right:80px;border:1px solid red;padding:2em;width:400px">
    <p>y = vorzeichen * streckung * x&#x00B2 + faktor * x + konstante</p>

    <p>
        <label for="minus">minus</label><input type="checkbox" id="minus" value="">
        <label for="faktor">streckung:</label><input type="text" size="1" id="streckung" >
        <label for="faktor">faktor:</label><input type="text" size="1" id="faktor" >
        <label for="konstante">konstante:</label><input type="text" size="1" id="konstante" >
        </input><button onclick="ButtonClickFunctions.zeichne()">minsky</button>
    </p>
    <p>
    <button onclick="ButtonClickFunctions.generateBulk()">automatisch von -4 bis + 4</button>
        <label for="increment">Abstufung für Faktor</label>
        <select id="increment"><option>1</option>
        <option>0.5</option><
        <option>0.25</option>
        <option>0.125</option>
        </select>
    </p>
    <p><button style="background-color:#ffac99"><a href="">von vorne</a></button>
    </p>
    <p id="output" style="border:1px solid grey;padding:0.5em">here comes output ...</p>

</div>
<div id="xsquare" style="position:absolute">

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script src="canvas.js">
    </script>
</head>
<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
 
 
 </canvas>


</body>
</html>

// That's how you define the value of a pixel //

// That's how you update the canvas, so that your //
// modification are taken in consideration //


window.onload = function () {
	var canvas = document.getElementById("myCanvas");
	//~ var canvasWidth = canvas.width;
	var canvasWidth = 200;
	//~ var canvasHeight = canvas.height;
	var canvasHeight = 200;
	var ctx = canvas.getContext("2d");
	var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
	
	function drawPixel (x, y, r, g, b, a) {
    var index = (x + y * canvasWidth) * 4;
    console.log(index);
    canvasData.data[index + 0] = r;
    canvasData.data[index + 1] = g;
    canvasData.data[index + 2] = b;
    canvasData.data[index + 3] = a;
}
function updateCanvas() {
    ctx.putImageData(canvasData, 0, 0);
}
	for (var j = 1; j < 30; j ++) {
		for (var i=0; i < 150; i++) {
			drawPixel(j*3, i, 255, 0, 0, 255);
		}
	}
	drawPixel(1, 2, 255, 0, 0, 255);
	drawPixel(1, 3, 255, 0, 0, 255);
	updateCanvas();
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script src="canvas.js">
    </script>
</head>
<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
 
 
 </canvas>


</body>
</html>