-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path08.html
80 lines (60 loc) · 1.6 KB
/
08.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
<html>
<!--
Note that by a simple change in how the background of the sketch is
refreshed, we can have the ball leave a small trail behind.
Instead of drawing a solid color into the background of the sketch, draw a
rectangle the size of the background with a fill color with a transparency.
-->
<head>
<script src='processing-1.4.1.js'></script>
<style>
canvas {
outline: none;
}
/* So that when we click, the canvas isn't outlined */
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
function sketch(p) {
var x, y; // ball's position
var direction; // ball's directon
function setup() {
p.size(200, 200);
p.ellipseMode(p.CENTER);
p.println("width: " + p.width + ", height: " + p.height);
x = p.width / 2;
y = p.height / 2;
direction = 1;
//p.noLoop();
}
function draw() {
// p.background(0);
// leaving a trail behind
p.fill(0, 15);
p.rect(0, 0, p.width, p.height);
if (p.frameCount < 60) {
// a delay....
} else {
ball(x, y);
y += 2 * direction;
if ((y > p.height) || (y < 0)) {
direction *= -1;
}
}
}
function ball(x, y) {
// p.println("drawing ball...");
p.fill(255);
p.noStroke();
p.ellipse(x, y, 25, 25);
}
p.setup = setup;
p.draw = draw;
}
var p = new Processing(canvas, sketch); // actually attach and run the sketch
</script>
</html>