forked from jdf/processing-py-site
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
200 lines (188 loc) · 7.83 KB
/
index.html
File metadata and controls
200 lines (188 loc) · 7.83 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12), see www.w3.org">
<title></title>
</head>
<body>
<h1>Coordinate System and Shapes</h1>
<p class="license">This tutorial is for Python Mode in Processing
version 2+. If you see any errors or have comments, please
<a href=
"https://github.com/jdf/processing-py-site/issues?state=open">
let us know</a>. This tutorial is from the book, <a href=
"http://www.processing.org/learning/books/#shiffman">Learning
Processing</a>, by Daniel Shiffman, published by Morgan Kaufmann
Publishers, Copyright © 2008 Elsevier Inc. All rights
reserved.</p>
<p> </p>
<h3>Coordinate Space</h3>
<p>Before we begin programming with Processing, we must first
channel our eighth grade selves, pull out a piece of graph paper,
and draw a line. The shortest distance between two points is a
good old fashioned line, and this is where we begin, with two
points on that graph paper.<br>
<br>
<img src="imgs/1.1.jpg"><br>
<br>
The above figure shows a line between point A (1,0) and point B
(4,5). If you wanted to direct a friend of yours to draw that
same line, you would give them a shout and say "draw a line from
the point one-zero to the point four-five, please." Well, for the
moment, imagine your friend was a computer and you wanted to
instruct this digital pal to display that same line on its
screen. The same command applies (only this time you can skip the
pleasantries and you will be required to employ a precise
formatting). Here, the instruction will look like this:<br></p>
<pre>
line(1,0,4,5)
</pre><br>
Even without having studied the syntax of writing code, the above
statement should make a fair amount of sense. We are providing a
<em>command</em>(which we will refer to as a "function") for the
machine to follow entitled "line." In addition, we are specifying
some arguments for how that line should be drawn, from point A
(1,0) to point B (4,5). If you think of that line of code as a
sentence, the function is a verb and the arguments are the
objects of the sentence.<br>
<br>
<img src="imgs/1.2.jpg"><br>
<br>
The key here is to realize that the computer screen is nothing
more than a fancier piece of graph paper. Each pixel of the
screen is a coordinate - two numbers, an "x" (horizontal) and a
"y" (vertical) - that determines the location of a point in
space. And it is our job to specify what shapes and colors should
appear at these pixel coordinates.<br>
<br>
Nevertheless, there is a catch here. The graph paper from eighth
grade ("Cartesian coordinate system") placed (0,0) in the center
with the y-axis pointing up and the x-axis pointing to the right
(in the positive direction, negative down and to the left). The
coordinate system for pixels in a computer window, however, is
reversed along the y-axis. (0,0) can be found at the top left
with the positive direction to the right horizontally and down
vertically.<br>
<br>
<img src="imgs/1.3.jpg">
<h3>Simple Shapes</h3>
<p>The vast majority of the programming examples you'll see with
Processing are visual in nature. These examples, at their core,
involve drawing shapes and setting pixels. Let's begin by looking
at four primitive shapes.<br>
<br>
<img src="imgs/1.4.jpg"><br>
<br>
For each shape, we will ask ourselves what information is
required to specify the location and size (and later color) of
that shape and learn how Processing expects to receive that
information. In each of the diagrams below, we'll assume a window
with a width of 10 pixels and height of 10 pixels. This isn't
particularly realistic since when you really start coding you
will most likely work with much larger windows (10x10 pixels is
barely a few millimeters of screen space.) Nevertheless for
demonstration purposes, it is nice to work with smaller numbers
in order to present the pixels as they might appear on graph
paper (for now) to better illustrate the inner workings of each
line of code.<br>
<br>
A <a href=
"http://www.processing.org/reference/point_.html"><strong>point()</strong></a>
is the easiest of the shapes and a good place to start. To draw a
point, we only need an x and y coordinate.<br>
<br>
<img src="imgs/1.5.jpg"><br>
<br>
A <a href=
"http://www.processing.org/reference/line_.html"><strong>line()</strong></a>
isn't terribly difficult either and simply requires two points:
(x1,y1) and (x2,y2):<br>
<br>
<img src="imgs/1.6.jpg"><br>
<br>
Once we arrive at drawing a <a href=
"http://www.processing.org/reference/rect_.html"><strong>rect()</strong></a>,
things become a bit more complicated. In Processing, a rectangle
is specified by the coordinate for the top left corner of the
rectangle, as well as its width and height.<br>
<br>
<img src="imgs/1.7.jpg"><br>
<br>
A second way to draw a rectangle involves specifying the
centerpoint, along with width and height. If we prefer this
method, we first indicate that we want to use the "CENTER" mode
before the instruction for the rectangle itself. Note that
Processing is case-sensitive.<br>
<br>
<img src="imgs/1.8.jpg"><br>
<br>
Finally, we can also draw a rectangle with two points (the top
left corner and the bottom right corner). The mode here is
"CORNERS".<br>
<br>
<img src="imgs/1.9.jpg"><br>
<br>
Once we have become comfortable with the concept of drawing a
rectangle, an <a href=
"http://www.processing.org/reference/ellipse_.html"><strong>ellipse()</strong></a>
is a snap. In fact, it is identical to <strong>rect()</strong>
with the difference being that an ellipse is drawn where the
bounding box of the rectangle would be. The default mode for
<em>ellipse()</em> is "CENTER", rather than "CORNER."<br>
<br>
<img src="imgs/1.10a.jpg"><br>
<br>
<img src="imgs/1.10b.jpg"><br>
<br>
<img src="imgs/1.10c.jpg"><br>
<br>
It is important to acknowledge that these ellipses do not look
particularly circular. Processing has a built-in methodology for
selecting which pixels should be used to create a circular shape.
Zoomed in like this, we get a bunch of squares in a circle-like
pattern, but zoomed out on a computer screen, we get a nice round
ellipse. Processing also gives us the power to develop our own
algorithms for coloring in individual pixels (in fact, we can
already imagine how we might do this using "point" over and over
again), but for now, we are content with allowing the "ellipse"
statement to do the hard work. (For more about pixels, start
with: <a href="http://processing.org/reference/pixels.html">the
pixels reference page</a>, though be warned this is a great deal
more advanced than this tutorial.)<br>
<br>
Now let's look at what some code with shapes in more realistic
setting, with window dimensions of 200 by 200. Note the use of
the <a href=
"http://www.processing.org/reference/size_.html">size()</a>
function to specify the width and height of the window.<br>
<br>
<img src="imgs/1.11.jpg"><br>
<br></p>
<pre>
size(200,200)
rectMode(CENTER)
rect(100,100,20,100)
ellipse(100,70,60,60)
ellipse(81,70,16,32)
ellipse(119,70,16,32)
line(90,150,80,160)
line(110,150,120,160)
</pre>
<p> </p>
<p class="license">This tutorial is for Python Mode in Processing
version 2+. If you see any errors or have comments, please
<a href=
"https://github.com/jdf/processing-py-site/issues?state=open">
let us know</a>. This tutorial is from the book, <a href=
"http://www.processing.org/learning/books/#shiffman">Learning
Processing</a>, by Daniel Shiffman, published by Morgan Kaufmann
Publishers, Copyright © 2008 Elsevier Inc. All rights
reserved.</p>
<table width="656">
<tr>
<td></td>
</tr>
</table>
</body>
</html>