-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchaos.html
55 lines (51 loc) · 1.51 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
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Canvas exercise</title>
<script type="text/javascript">
var c, panel, count, points, nowPoint;
function init(){
count = parseInt(document.getElementById('count').value);
c = document.getElementById('myPanel');
panel = c.getContext('2d');
points = new Array(count);
for(var i=0;i<count;++i){
points[i] = new Array(2);
points[i][0] = Math.floor(Math.random() * (750 + 1));
points[i][1] = Math.floor(Math.random() * (750 + 1));
}
nowPoint = new Array(2);
nowPoint[0] = Math.floor(Math.random() * (750 + 1));
nowPoint[1] = Math.floor(Math.random() * (750 + 1));
}
function play(){
var approchPoint = Math.floor(Math.random() * (count));
nowPoint[0] = (nowPoint[0] + points[approchPoint][0])/2;
nowPoint[1] = (nowPoint[1] + points[approchPoint][1])/2;
panel.beginPath();
panel.arc(nowPoint[0],nowPoint[1],1,0,2*Math.PI);
panel.stroke();
}
function start(){
init();
for(var i=0;i<count;++i){
panel.beginPath();
panel.arc(points[i][0],points[i][1],1,0,2*Math.PI);
panel.stroke();
}
panel.beginPath();
panel.arc(nowPoint[0],nowPoint[1],1,0,2*Math.PI);
panel.stroke();
setInterval("play();",1);
}
</script>
</html>
<body>
<div id="wrapper">
<input type="text" id="count"/>
<button onclick="start();">START</button>
<div id = "show_area" style="float:left;">
<canvas id="myPanel" width="750px" height="750px" style="border:2px solid #000000"></canvas>
</div>
</div>
</body>