forked from processing-js/processing-js.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
163 lines (68 loc) · 2.9 KB
/
Copy pathindex.html
File metadata and controls
163 lines (68 loc) · 2.9 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---
layout: default
---
<h3>Coordinates</h3>
<p>All shapes drawn to the screen have a position that is specified as a coordinate.
All coordinates are measured as the distance from the origin in units of pixels.
The origin [0, 0] is the coordinate is in the upper left of the window
and the coordinate in the lower right is [width-1, height-1].</p>
<p><a href="http://processing.org/learning/basics/coordinates.html">Original Processing.org Example: Coordinates</a><br>
<div class="learning-demo"><script type="application/processing">
// Sets the screen to be 200, 200, so the width of the window is 200 pixels
// and the height of the window is 200 pixels
size(200, 200);
background(0);
noFill();
stroke(255);
// The two parameters of the point() method each specify coordinates.
// This call to point() draws at the position [100, 100]
point(width/2, height/2);
// Draws to the position [100, 50]
point(width/2, height/4);
// It is also possible to specify a point with any parameter,
// but only coordinates on the screen are visible
point(60, 30);
point(60, 134);
point(160, 50);
point(280, -800);
point(201, 100);
// Coordinates are used for drawing all shapes, not just points.
// Parameters for different methods are used for different purposes.
// For example, the first two parameters to line() specify the coordinates of the
// first point and the second two parameters specify the second point
stroke(204);
line(0, 73, width, 73);
// The first two parameters to rect() are coordinates
// and the second two are the width and height
rect(110, 55, 40, 36);
</script><canvas width="200" height="200"></canvas></div></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>
<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>
// unless otherwise stated.
// Sets the screen to be 200, 200, so the width of the window is 200 pixels
// and the height of the window is 200 pixels
size(200, 200);
background(0);
noFill();
stroke(255);
// The two parameters of the point() method each specify coordinates.
// This call to point() draws at the position [100, 100]
point(width/2, height/2);
// Draws to the position [100, 50]
point(width/2, height/4);
// It is also possible to specify a point with any parameter,
// but only coordinates on the screen are visible
point(60, 30);
point(60, 134);
point(160, 50);
point(280, -800);
point(201, 100);
// Coordinates are used for drawing all shapes, not just points.
// Parameters for different methods are used for different purposes.
// For example, the first two parameters to line() specify the coordinates of the
// first point and the second two parameters specify the second point
stroke(204);
line(0, 73, width, 73);
// The first two parameters to rect() are coordinates
// and the second two are the width and height
rect(110, 55, 40, 36);</pre></div>