Erstmal sind 8 da. Morten und Angelo kommen noch.
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>