-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path06.html
95 lines (71 loc) · 2.49 KB
/
06.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
<html>
<!--
#### Notes
1. The `x` and `y` variables will hold the position of the ball. You can see
this [on line 42](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/06.html#L42) where they are being passed in ball as
arguments and [on line 67](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/06.html#L67) where the arguments are used to set the
position of the center of the ellipse representing the ball.
2. As you can see [on line 43](https://github.com/DGMD-E-15/Processing-
Tutorial-01/blob/master/06.html#L43), every animation frame, we change the `y`
position of the ball by one pixel. This means that the ball will move
downwards at roughly 60 (frame rate) pixels per second.
-->
<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;
function setup() {
p.size(200, 200);
p.ellipseMode(p.CENTER);
x = p.width / 2;
y = p.height / 2;
p.println("width: " + p.width + ", height: " + p.height);
drawPattern();
//p.noLoop();
}
function draw() {
p.background(0);
if (p.frameCount < 120) {
drawPattern();
} else {
ball(x, y);
y += 1;
}
}
function drawPattern() {
// p.println("drawing test pattern...")
p.stroke(0, 0, 255); // set the stroke color to blue
p.line(10, 10, p.width / 2 - 10, p.height / 2 - 10); // draw a line from (10,10) to (90,90)
p.stroke(0, 255, 0); // set the stroke color to green
p.line(p.width / 2 + 10, p.height / 2 + 10, p.width - 10, p.height - 10); // draw a line from (110,110) to (190,190)
p.stroke(255, 0, 0); // set the stroke color to red
p.line(p.width - 10, 10, p.width / 2 + 10, p.height / 2 - 10); // draw a line from (190,10) to (110,90)
p.stroke(255, 255, 0); // set the stroke color to yellow
p.line(p.width / 2 - 10, p.height / 2 + 10, 10, p.height - 10);
}
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>