-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path05.html
87 lines (63 loc) · 2.1 KB
/
05.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
<html>
<!--
#### Notes
1. We can use `frameCount` to control what is drawn in specific frames. in
this case we ensure that a test pattern is drawn to the screen for the first
120 frames of the animation (which roughly corresponds to two seconds).
2. After the opening pattern is shown for roughly two seconds, a ball is drawn
at the center of the canvas.
-->
<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) {
function setup() {
p.size(200, 200);
p.background(0); // set the background color to black
p.ellipseMode(p.CENTER);
p.println("width: " + p.width + ", height: " + p.height);
drawPattern();
//p.noLoop();
}
function draw() {
p.background(0);
if (p.frameCount < 120) {
drawPattern();
} else {
ball();
}
}
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() {
p.println("drawing ball...");
p.fill(255);
p.noStroke();
p.ellipse(p.width / 2, p.height / 2, 25, 25);
}
p.setup = setup;
p.draw = draw;
}
var p = new Processing(canvas, sketch); // actually attach and run the sketch
</script>
</html>