-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path04.html
84 lines (61 loc) · 2.31 KB
/
04.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
<html>
<!--
#### Notes
1. After calling `size()`, the environment variables width and height hold the
dimensions of the sketch.
2. By default the `draw()` function is called repeatedly, and in this case,
prints the frame rate that processing is aiming to maintain. The default frame
rate is `60 fps`.
3. Processing offers a wide range of drawing functions that you can play
around with. Please consult the [online
documentation](http://processingjs.org/reference/)
4. If you uncomment the [`noLoop()` line (#27)](https://github.com/DGMD-E-15
/Processing-Tutorial-01/blob/master/04.html#L27), you will see that `draw()`
is then only run once.
5. The JavaScript functions `draw()` and `setup()` can be renamed to anything
we wish. The function names that we assign to `p.setup` and `p.draw` determine
the behavior of the Processing sketch.
-->
<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) {
p.println("The drawing functions!");
function setup() {
p.size(200, 200);
p.background(0); // set the background color to black
p.println("width: " + p.width + ", height: " + p.height);
//p.noLoop();
}
function draw() {
p.background(0);
drawPattern();
p.println(p.frameCount + " ");
}
function drawPattern() {
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);
}
p.setup = setup;
p.draw = draw;
}
var p = new Processing(canvas, sketch); // actually attach and run the sketch
</script>
</html>