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

10. September 2021

10.9.2021

Filed under: Allgemein — admin @ 14:58

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>

27. August 2021

27.8.2021

Filed under: Allgemein — admin @ 14:56

Es sind einige da. Morten, Johann, Thomas, Quint, zwei aus der 6a, und drei weitere.

20. August 2021

20.8.2021

Filed under: Allgemein — admin @ 16:08

Erste Mal wieder. Quint, Johann, Morten, und zwei weitere waren/sind da. Mit Herrn Oppermann geredet wegen „Lernserver“ und alten Laptops.

Nächstes Mal wohl normal.

9. Oktober 2020

9.10.

Filed under: Allgemein — admin @ 15:15

Es sind einige hier. Thomas, Johann, Felix, Till, Long-Yang sind da, ein „Neuzugang“ auch.

Nächste Mal 30.10. nach den Herbstferien.

2. Oktober 2020

2.10.2020

Filed under: Allgemein,Tagesberichte,Termine — admin @ 14:53

Zwei Neue aus der J7 sind da. Till und Felix, Morten und Angelo auch.

Nächste Woche ist noch normal hier, dann sind zwei Wochen Ferien.

25. September 2020

25.9.2020

Filed under: Allgemein,ECS,OOP — admin @ 14:34

Zwei aus Felix Klasse sind da, Long-Yang und ein „Neuzugang“. Angelo und Morten sind auch da.

The key difference between OOP and ECS is that in OOP, the behavior and data of an entity would all be part of the same object. In ECS, behavior and data are decoupled between components and systems. https://www.linkedin.com/pulse/ecs-beginning-end-oop-sander-mertens

Comment: „Sounds like C with extra steps. Dennis Ritchie strikes again.“ Author Sander Mertens „More or less. To really take advantage of ECS, you’ll want to use a specialized memory allocator and job dispatching system (more or less like what Unity did). You can write vanilla C code „the ECS way“, but having a framework that does this for you would help.“

Sander Mertens, vermutlich der: https://www.ram.eemcs.utwente.nl/about-us/staff/sander-mertens. Bzw. hier: https://github.com/SanderMertens.

18. September 2020

18.9.2020

Filed under: Allgemein — admin @ 15:40

Thomas, Long-Yang, Johann, Benildur, Morten und Angelo sind da. Und einige Neuzugänge waren da. Robert untersucht mit Johanns Hilfe das Innenleben einer Libratone-Box.

Es wurde AOE2 beta gespielt.

Sie reden über Haskell und Jython.

Nächste Mal normal.

Wir reden auch über Objektorientierung und Component Entity. Nächste Mal: https://en.wikipedia.org/wiki/Entity_component_system

11. September 2020

11.9.2020

Filed under: Allgemein — admin @ 15:04

Es sind einige da. U.a. Quint, Johann, Benildur, Morten, Angelo.

Das ursprüngliche FAT hatte 8 bit, dann 12, dann 16.

Einige spielen AOE1.

Andere arbeiten mit HTML und CSS.

Nächstes Mal normal …

7. September 2020

6.9.2020

Filed under: Allgemein — admin @ 15:20

Die AG hat stattgefunden. Robert hat an zwei BT-Boxen rumgeschraubt mit Hilfe von Johann u.a.. Morten, Angelo, Felix, Quint, Benildur sowie ein paar „Neue“ und „Ehemalige“ waren da. Johann verwies darauf, dass der RSS-Feed auf die Startseite bezogen ist.

28. August 2020

28.8.2020

Filed under: Allgemein — admin @ 14:51

Es sind einige da. Angelo, Johann, Felix, Long-Yang und Neuzugänge. Insgesamt 6 Neuzugänge. Drei aus der 7d.

Bei Robert wird bei seinem Linux immer zwei Stunden später angezeigt. Jetzt wie hier beschrieben gefixt.

Angelo will einen B-Compiler schreiben. Hat(!) er: https://github.com/aap/b

Robert interessiert sich auch für das Tesla-Dojo-Projekt von Elon Musk.

Johann erzählt von Mastodon und Pleroma.

Mastodon wurde von Eugen Rochko erfunden.

Older Posts »