Spirali frattali IFS con HTML5 canvas - matematica con JavaScript

Nel codice abbiamo inserito due angoli: α = 36°, per la prima trasformazione, e β = 0° per la seconda: lo abbiamo fatto per generalizzare il programma e permettervi, volendo, di fare prove con due angoli.

NOTA BENE - Gli utenti MSIE possono visualizzare il canvas solo se possiedono la versione dalla 9 in poi.

<!DOCTYPE html>
<HTML>
<BODY>
<canvas id="lavagna" width="380" height="360" style="border:1px solid maroon">Il tuo browser non supporta il tag HTML5 canvas.</canvas>
<script>
function Spirale(){
var x, y, xT, yT, T;
var alfa,beta; //primo e secondo angolo di rotazione
var r, g, b; //componenti rosso, verde e blu
var xs, ys; //coordinate punto da disegnare
var u =180; //unità di misura
alfa =36* Math.PI/180; //angoli trasformati in radianti
beta=0.0* Math.PI/180;
var passi = 60000; //numero di iterazioni
x = 0.0; //coordinate punto di partenza
y = 0.0;
var c = document.getElementById('lavagna');
ctx = c.getContext("2d");
var Ox = c.width/2 - 20; //posizione origine;
var Oy = c.height/2 + 40;
for(i = 1; i<= passi; i++){

T = Math.random(); //numero casuale
if (T < 0.87) {

//prima trasformazione applicata con probabilità = 87%
xT = (Math.cos(alfa) * x - Math.sin(alfa) * y)*0.9;
yT = (Math.sin(alfa) * x + Math.cos(alfa) * y)*0.9;
r = 255; g = 0; b = 0;

}
else{

//seconda trasformazione applicata con probabilità = 13%;
xT = (Math.cos(beta) * x - Math.sin(beta) * y)* 0.3 + 0.7;
yT = (Math.sin(beta) * x + Math.cos(beta) * y)*0.3 + 0.51;
r = 0; g = 0; b = 255;

}
xs = Math.round(u * xT + Ox)
ys = Math.round(Oy - u * yT)
if (i>500){

ctx.beginPath();

ctx.fillStyle="rgba("+ r +","+ g +"," + b + ",0.6)"
ctx.fillRect(xs, ys, 1, 1)

} x = xT;
y= yT

}
}
</script>

</BODY>
</HTML>

MATEMATICA CON JAVASCRIPT - AREA CANVAS

SPIRALE FRATTALE IFS CON IL TAG HTML5 CANVAS E JAVASCRIPT

COME REALIZZARE LA SPIRALE FRATTALE CON ANGOLO DI 36°

Contatti	MATEMATICA CON JAVASCRIPT - AREA CANVAS SPIRALE FRATTALE IFS CON IL TAG HTML5 CANVAS E JAVASCRIPT