-
Notifications
You must be signed in to change notification settings - Fork 0
/
chaos.html
111 lines (89 loc) · 3.23 KB
/
chaos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head><title>Fractals and Chaos</title></head>
<script>
var size = 500;
var startX= 10+50, startY = 550;
var p1 = [startX, startY];
var p2 = [startX+size,startY];
var p3 = [startX+Math.cos(-Math.PI /3)*size, startY+Math.sin(-Math.PI /3)*size];
function drawTriangle(canvasId) {
var canvas = document.getElementById(canvasId);
var ctx=canvas.getContext("2d");
ctx.fillStyle="#F0F0F0";
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX+size,startY);
ctx.lineTo(startX+Math.cos(-Math.PI /3)*size, startY+Math.sin(-Math.PI /3)*size);
ctx.lineTo(startX, startY);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#000000";
ctx.font="20px Arial";
ctx.fillText("1,2",p1[0]-25-5,p1[1]+10);
ctx.fillText("3,4",p2[0]+5,p2[1]+10);
ctx.fillText("5,6",p3[0]-13,p3[1]-8);
ctx.fillText("Fractals and Chaos", 50, 50);
ctx.fillText("https://www.youtube.com/watch?v=DO8yFGbbGmg", 50, 50+20);
setInterval("drawPoints()", 200);
}
function signP(v1, v2, v3) {
return (v1[0] - v3[0]) * (v2[1] - v3[1]) - (v2[0] - v3[0]) * (v1[1] - v3[1]);
}
function pointWithinTriangle(pt, v1, v2, v3) {
var d1, d2, d3;
var has_neg, has_pos;
d1 = signP(pt, v1, v2);
d2 = signP(pt, v2, v3);
d3 = signP(pt, v3, v1);
has_neg = (d1 < 0) || (d2 < 0) || (d3 < 0);
has_pos = (d1 > 0) || (d2 > 0) || (d3 > 0);
return !(has_neg && has_pos);
}
var i = 0;
var lastPoint = [0,0]
function drawPoint() {
var canvasId = 'canvas';
var canvas = document.getElementById(canvasId);
var ctx=canvas.getContext("2d");
if (i == 0) {
var withinTriangle = false;
var p = [0, 0];
while (! withinTriangle) {
p = [Math.random() * 600, Math.random() * 600];
//console.log("sampled " + p);
if (pointWithinTriangle(p, p1,p2,p3)) {
console.log("sampled " + p);
ctx.fillStyle="#000000";
ctx.fillRect(p[0], p[1], 2, 2);
lastPoint[0] = p[0];
lastPoint[1] = p[1];
break;
}
}
} else {
var rnd = parseInt(Math.floor(Math.random() * 3));
var target = [p1[0],p1[1]];
if (rnd == 1) {
target = [p2[0],p2[1]];
} else if(rnd == 2){
target = [p3[0],p3[1]];
}
var p = [(target[0] + lastPoint[0])/2, (target[1] + lastPoint[1])/2];
ctx.fillStyle="#000000";
ctx.fillRect(p[0], p[1], 2, 2);
lastPoint[0] = p[0];
lastPoint[1] = p[1];
}
i += 1;
}
function drawPoints() {
var c = parseInt(Math.floor(Math.random() * 20));
for (var k=0;k<20+c;k++) {
drawPoint();
}
}
</script>
<body onload="drawTriangle('canvas')">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>