-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathturtle-bounce.html
110 lines (107 loc) · 3.13 KB
/
turtle-bounce.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Javascript Turtle</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<link type="text/css" rel="stylesheet" href="turtle.css" />
</head>
<body>
<div id="wrap">
<h1>Javascript Turtle Graphics</h1>
<div id="leftcolumn">
<h4>Language Reference</h4>
<code>
forward(distance) <br/>
right(angle) <br/>
left(angle) <br/>
goto(x,y) <br/>
clear() <br/>
penup() <br/>
pendown() <br/>
reset() <br/>
angle(angle) <br/>
width(width) <br/>
colour(r,g,b,a) <br/>
write(string) <br/>
n = random(low,high) <br/>
hideTurtle() <br/>
showTurtle() <br/>
redrawOnMove(bool) <br/>
draw() <br/>
repeat(n, action) <br/>
wrap(bool) <br/>
animate(action,ms) <br/>
</code>
</div> <!-- leftcolumn -->
<div id="midcolumn">
<h4>Canvas</h4>
<canvas id="turtlecanvas" width="300" height="300"></canvas>
<canvas id="imagecanvas" width="300" height="300" style="display:none"></canvas>
<h4>Command</h4>
<input type="text" id="command" />
</div> <!-- midcolumn -->
<div id="rightcolumn">
<h4>Definitions</h4>
<textarea id="definitions" rows="20">
// rectagles which bounce off the side of the canvas
function init_drops(n) {
var drops = new Array(n);
for (var i = 0; i < n; i++) {
var x = random(-150, 150);
var y = random(-150, 150);
var velocityX = random(-6,6);
var velocityY = random(-6,6);
var size = random(20,300);
var width = random(1,40);
var a = Math.random();
var r = random(0,255);
var g = random(0,255);
var b = random(0,255);
drops[i] = {
x: x, y: y,
velocityX: velocityX,
velocityY: velocityY,
size: size,
r:r, g:g, b: b,
width: width,
a: a
};
}
return drops;
}
function rain (drops, n) {
clear();
for (var i = 0; i < n; i++) {
var d = drops[i];
colour(d.r,d.g,d.b,d.a);
width(d.width);
goto(d.x, d.y);
if (d.y < -150) {
d.velocityY = -d.velocityY;
}
else if (d.y + d.size > 150 && d.velocityY > 0) {
d.velocityY = -d.velocityY;
}
if (d.x - d.width/2 < -150) {
d.velocityX = -d.velocityX;
}
else if (d.x + d.width/2 > 150) {
d.velocityX = -d.velocityX;
}
forward(d.size);
d.y += d.velocityY;
d.x += d.velocityX;
}
}
function demo (n) {
wrap(false);
hideTurtle();
drops = init_drops(n);
animate(function () { rain(drops, n)}, 100);
}
</textarea>
</div> <!-- rightcolumn -->
</div> <!-- wrap-->
<script type="text/javascript" src="turtle.js"></script>
</body>
</html>