Vierkant Kunst

Je kunt met een aantal vierkanten ook een leuk kunstwerk maken.

Klik hier voor het voorbeeld

<HTML>
<BODY>
<!– Tekengebied met een vierkant met zwarte rand erin –>
<canvas id=”myCanvas” width=”600″ height=”700″>
</canvas>
<SCRIPT>
var TekenOppervlak = document.getElementById(“myCanvas”);
var TekenVlak = TekenOppervlak.getContext(“2d”);
var Xpos = 100
var Ypos = 200
var Breedte = 400
var Hoogte = 300
var teller = 0
while (teller<32){
<!– Krimpend Vierkant –>
Breedte=Breedte – (teller*2);
Hoogte=Hoogte – (teller*2);
Xpos = Xpos + teller;
Ypos = Ypos + teller;
TekenVlak.rect(Xpos,Ypos,Breedte,Hoogte);
TekenVlak.strokeStyle = “#000000”;     <!– kleur zwart –>
TekenVlak.lineWidth = 1.0;
TekenVlak.stroke();
teller++;
}
</SCRIPT>
<br>
<center>H.L. Muller &copy;2016</center>
<br>
</BODY>
</HTML>

Mondriaan

Zelfts een kunstenaar als Mondriaan is niet veilig.  Ook die is er nu als webpagina

Klik hier voor een voorbeeld

<html>

<body>
<br>
<br>
<canvas width=”1000″ height=”800″ id=”myCanvas”>
</canvas>
<script>

var TekenOppervlak = document.getElementById(“myCanvas”);
var TekenVlak = TekenOppervlak.getContext(“2d”);
TekenVlak.fillStyle = ‘black’;
TekenVlak.strokeStyle = ‘black’;
var X = 0;
var Y = 0;
var P = 12; <!– Orde –>
var A = Math.sqrt(1/2); <!– Verkortingsverhouding –>
var H = 0.1; <!– Scaling factor –>
var S = 0;
var Z = 300; <!– Zoom factor –>
var Xmid = 200;
var Ymid = 50;
var Titel = “Fractal : Mondriaan”;
var Bodem = “\u00A9 H.L. Muller 2016”;

TekenVlak.font = “16pt sans-serif”;
TekenVlak.fillText(Titel,20,20);
TekenVlak.stroke();

X1rel = Xmid;
Y1rel = Ymid;
TekenVlak.moveTo (X1rel, Y1rel);
X2rel = Xmid + (1 * Z);
Y2rel = Ymid + (0 * Z);
TekenVlak.lineTo (X2rel,Y2rel);
X2rel = Xmid + (1 * Z);
Y2rel = Ymid + (1 * Z);
TekenVlak.lineTo (X2rel,Y2rel);
X2rel = Xmid + (0 * Z);
Y2rel = Ymid + (1 * Z);
TekenVlak.lineTo (X2rel,Y2rel);
X2rel = Xmid;
Y2rel = Ymid;
TekenVlak.lineTo (X2rel,Y2rel);
TekenVlak.stroke();

N = 1
while (N < 101 ){

X = 0.8 * Math.random() + 0.1;
Y = 0.8 * Math.random() + 0.1;
K = H * ( 1 – Math.sqrt(1 – Math.random()));
if (Math.random() > 0.5){
Q = Math.round(3 * Math.random()) + 1;
if (Q == 1){TekenVlak.strokeStyle = ‘Black’;}
if (Q == 2){TekenVlak.strokeStyle = ‘Blue’;}
if (Q == 3){TekenVlak.strokeStyle = ‘Red’;}
if (Q == 4){TekenVlak.strokeStyle = ‘Yellow’;}
Q = Math.round(9 * Math.random()) + 1;
TekenVlak.lineWidth= Q;

X1rel = Xmid + (X * Z);
Y1rel = Ymid + ((Y – K) * Z);
TekenVlak.moveTo (X1rel, Y1rel);
X2rel = Xmid + (X * Z);
Y2rel = Ymid + ((Y + K) * Z);
TekenVlak.lineTo (X2rel,Y2rel);
TekenVlak.stroke();

}
else {

Q = Math.round(3 * Math.random()) + 1;
if (Q == 1){TekenVlak.strokeStyle = ‘black’;}
if (Q == 2){TekenVlak.strokeStyle = ‘blue’;}
if (Q == 3){TekenVlak.strokeStyle = ‘red’;}
if (Q == 4){TekenVlak.strokeStyle = ‘yellow’;}
Q = Math.round(9 * Math.random()) + 1;
TekenVlak.lineWidth= Q;

X1rel = Xmid + ((X – K) * Z);
Y1rel = Ymid + (Y * Z);
TekenVlak.moveTo (X1rel, Y1rel);
X2rel = Xmid + ((X + K) * Z);
Y2rel = Ymid + (Y * Z);
TekenVlak.lineTo (X2rel,Y2rel);
TekenVlak.stroke();

}
N++;
}

TekenVlak.fillStyle = ‘black’;
TekenVlak.font = “8pt sans-serif”;
TekenVlak.fillText(Bodem,20,420);
TekenVlak.stroke();

</script>
<br>

</body>

</html>

Moderne Kunst

Wie zegt dat je geen kunst met computers kan maken liegt. Het kan nu zelfs op een web pagina.

<HTML>
<BODY>
<br>
<br>
<!– Tekengebied met een vierkant met zwarte rand erin –>
<canvas id=”myCanvas” width=”1000″ height=”800″>
</canvas>
<SCRIPT>
var TekenOppervlak = document.getElementById(“myCanvas”);
var TekenVlak = TekenOppervlak.getContext(“2d”);
var Xpos = 100;
var Ypos = 200;
var Breedte = 400;
var Hoogte = 400;
var teller = 0;
var color1 = “#000000”;
var color2 = “#000000”;
var Rood = “”;
var Groen= “”;
var Blauw = “”;
var KleurIndex = 0;
var TotaalBlokken =  Math.floor(Math.random() * 100) + 1;
while (teller<TotaalBlokken){
<!– Krimpend Vierkant –>
Breedte= Math.floor(Math.random() * 600);
Hoogte= Math.floor(Math.random() * 500);
Xpos = Math.floor(Math.random() * 700);
Ypos = Math.floor(Math.random() * 500);
KleurIndex = Math.floor(Math.random() * 255);
Rood = KleurIndex.toString(16);
KleurIndex = Math.floor(Math.random() * 255);
Groen = KleurIndex.toString(16);
KleurIndex = Math.floor(Math.random() * 255);
Blauw = KleurIndex.toString(16);
color1 = “#” + Rood + Groen + Blauw;<!– Construct HTML RGB color –>
KleurIndex = Math.floor(Math.random() * 255);
Rood = KleurIndex.toString(16);
KleurIndex = Math.floor(Math.random() * 255);
Groen = KleurIndex.toString(16);
KleurIndex = Math.floor(Math.random() * 255);
Blauw = KleurIndex.toString(16);
color2 = “#” + Rood + Groen + Blauw;<!– Construct HTML RGB color –>
<!– make sure color sring is # plus six characters, so total of 7 … –>
while (color1.length < 7) {color1 = color1 + “0”}
if (color1.length > 7) {color1 = color1.substring(0, 7)}
while (color2.length < 7) {color2 = color2 + “0”}
if (color2.length > 7) {color1 = color2.substring(0, 7)}
var BlockFill = TekenVlak.createLinearGradient(Xpos,Ypos,Xpos + Breedte,Ypos + Hoogte);
BlockFill.addColorStop(0,color1);
BlockFill.addColorStop(1,color2);
TekenVlak.fillStyle = BlockFill;
TekenVlak.lineWidth = 1.0;
TekenVlak.fillRect(Xpos,Ypos,Breedte,Hoogte);
TekenVlak.stroke();
teller++;
}
</SCRIPT>
<br>
<div align=”right” width=”1000″>&copy; H.L. Muller 2016</div>
</BODY>
</HTML>

Sterrenhemel

Wat is er mooier dan een zwarte hemel met sterren. Dat kan nu ook in als Internet pagina.

Klik hier voor een voorbeeld

<HTML>
<style type=”text/css”>
body {
background: #000000;
}
canvas {
display: block;
}
</style>
<BODY>
<br>
<br>
<canvas id=”myCanvas” width=”1000″ height=”800″>
</canvas>
<SCRIPT>
var TekenOppervlak = document.getElementById(“myCanvas”);
var TekenVlak = TekenOppervlak.getContext(“2d”);
TekenVlak.fillStyle = ‘white’;
TekenVlak.strokeStyle = ‘white’;
var PI = Math.PI;
var P = 0;<!– Aantal baanpunten –>
var M = 0;<!– Loop counter –>
var X = 1;<!– Begin punt –>
var Y = 0;
R = 1;
var A = R * Math.cos(2 * PI / 3);
var B = R * Math.sin(2 * PI / 3);
var C = Math.round(Math.random() * 4 + 1);
var Zx = 50;<!– Zoom factor –>
var Zy = 50;<!– Zoom factor –>
var Xmid = 400;
var Ymid = 300;
var Titel = “Sterren Hemel”;
var Bodem = “\u00A9 H.L. Muller 2016”;
TekenVlak.font = “16pt sans-serif”;
TekenVlak.fillText(Titel,20,20);
K = 1
while (K < 15001 ){
I = Math.round(Math.random() * 5 + 1);
if (I == 1){
Z = X;<!– Rotatie 1 –>
X = A * X – B * Y;
Y = B * Z + A * Y;
}
if (I == 2){
Z = X;<!– Rotatie 2 –>
X = X / 2 + Y;
Y = -1* Z – Y / 2;
}
if (I == 3){
Z = X;<!– Rotatie 3 –>
X = Y / 2;
Y = Z + Y;
}
if (I == 4){
Z = X;<!– Rotatie 4 –>
X = Y / 2;
Y = Z – Y;
}
if (I == 5){
Z = X;<!– Rotatie 5 –>
X = (X * X – Y * Y + C + 1) / C;
Y = 2 * Z * Y / C;
}
if (I == 6){
Z = X;<!– Rotatie 6 –>
X = (X * X + Y * Y + C + 1) / C;
Y = 2 * Z * Y / C;
}
X1rel = Xmid + (X * Zx);
Y1rel = Ymid – (Y * Zy);
TekenVlak.fillRect(X1rel, Y1rel,1,1);
TekenVlak.stroke();
K++;
}
TekenVlak.font = “8pt sans-serif”;
TekenVlak.fillText(Bodem,20,600);
TekenVlak.stroke();
</SCRIPT>
<br>
</BODY>
</HTML>

Namibië – Walvis Bay Haven

Namibie – Uitsig Farm

Namibie – Uitsig Farm

Namibie – Namib Woestijn

Namibie – Namib Woestijn

Zuid Afrika – Stellenbosch