Morten ist da, Quint auch, Angelo kommt noch. Ansonsten sind noch zwei weitere hier. Johann ist auch da.
1. Oktober 2021
24. September 2021
17. September 2021
17.9.2021
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);
};
10. September 2021
10.9.2021
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² + " + 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² + 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
Es sind einige da. Morten, Johann, Thomas, Quint, zwei aus der 6a, und drei weitere.
20. August 2021
20.8.2021
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.
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
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
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
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