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>