Angelo präsentiert den Hopalong-Algorithmus. Mit WebGL. S.a. EndlessFractal auf Github.
Die beiden alten Computer sind noch nicht zurück, weil das Auto, mit dem Paul sie zurück bringen wollte, in die Werkstatt musste.
26. November 2021
19. November 2021
19.11.2021
Ehemalige sind da, Paul, Morten, Angelo. Quint und Daniel sind da und einige Jüngere. C64 und Amiga 500 werden zum Retro-Stammtisch in Rücksprache mit Frank Oppermann transportiert.
Nächste Mal normal.
12. November 2021
12.11.2021
Linux funktioniert noch immer nicht glaube ich. Morten und Angelo sind da. Wir reden über HFS (Mac Filesystem)
Gucken Tut-Ench-Amun
29. Oktober 2021
29.10.2021
Linux vom Stick geht auf nur einem PC. Paul, Morten, Angelo, Daniel, Quint und zwei Weitere sind da. Wetter ist schön. Fenster ist offen.
Nächste Mal ist normal.
1. Oktober 2021
1.10.2021
Morten ist da, Quint auch, Angelo kommt noch. Ansonsten sind noch zwei weitere hier. Johann ist auch da.
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.