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
231 lines (206 loc) · 8.31 KB
/
index.html
File metadata and controls
231 lines (206 loc) · 8.31 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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>Two-Dimensional Lists</h1>
<table width="656">
<tr>
<td>
<p class="license">This tutorial is for Processing's Python Mode.
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 adapted 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>
<p> A <a href="http://py.processing.org/reference/list.html">list</a> keeps track of multiple
pieces of information in linear order, or a single dimension. However, the data associated
with certain systems (a digital image, a board game, etc.) lives in two dimensions. To
visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional
list.
<br><br>
A two-dimensional list is really nothing more than an list of lists (a three-dimensional list
is a list of lists of lists). Think of your dinner. You could have a one-dimensional list of
everything you eat:
<br><br></p>
<em>(lettuce, tomatoes, salad dressing, steak, mashed potatoes, string beans, cake, ice cream, coffee)</em>
<br><br>
<p>
Or you could have a two-dimensional list of three courses, each containing three things you eat:
</p>
<br><br>
<em>(lettuce, tomatoes, salad dressing) and (steak, mashed potatoes, string beans) and (cake, ice cream, coffee)</em>
<br><br>
<p>
In the case of a list, our old-fashioned one-dimensional list looks like this:
</p>
<pre>
myList = [0,1,2,3]
</pre>
<br>
<p>
And a two-dimensional list looks like this:
</p>
<pre>
myList = [ [0,1,2,3], [3,2,1,0], [3,5,6,1], [3,8,3,4] ]
</pre>
<br></p>
<p>For our purposes, it is better to think of the two-dimensional list as a matrix. A matrix can
be thought of as a grid of numbers, arranged in rows and columns, kind of like a bingo board.
We might write the two-dimensional list out as follows to illustrate this point: </p>
<pre>
myList = [ [0, 1, 2, 3],
[3, 2, 1, 0],
[3, 5, 6, 1],
[3, 8, 3, 4] ]
</pre>
<p>
<br>
We can use this type of data structure to encode information about an image. For example, the
following grayscale image could be represented by the following list:
<br><br>
</p>
<img src="imgs/grid.jpg">
<br><br>
<pre>
myList = [ [236, 189, 189, 0],
[236, 80, 189, 189],
[236, 0, 189, 80],
[236, 189, 189, 80] ]
</pre>
<p>
<br>
To walk through every element of a one-dimensional list, we use a for loop, that is:
</p>
<pre>
myList = [0,1,2,3,4,5,6,7,8,9];
for index in len(myList):
myList[index] = 0 # Set element at "index" to 0.
</pre>
<p>
<br>
For a two-dimensional list, in order to reference every element, we must use two nested loops.
This gives us a counter variable for every column and every row in the matrix.
</p>
<pre>
myList= [ [0, 1, 2]
[3, 4, 5]
[6, 7, 8] ]
# Two nested loops allow us to visit every spot in a 2D list.
# For every column i, visit every row j.
for i in len(myList):
for j in len(myList[0]):
myList[i][j] = 0
</pre>
<p>
<br>
For example, we might write a program using a two-dimensional list to draw a grayscale image.
<br><br>
</p>
<img src="imgs/points.jpg">
<pre>
# Example: 2D List
def setup():
size(200,200)
nRows = height
nCols = width
myList = make2dList(nRows, nCols)
drawPoints(myList)
def make2dList(nRows, nCols):
newList = []
for row in xrange(nRows):
# give each new row an empty list
newList.append([])
for col in xrange(nCols):
# Make every column in every row a random int from 0 to 255
newList[row].append(int(random(255)))
return newList
def drawPoints(pointList):
for y in xrange(len(pointList)):
for x in xrange(len(pointList[0])):
stroke(pointList[y][x])
rect(x,y,10,10)
</pre>
<br>
<p>
A two-dimensional list can also be used to store objects, which is especially convenient for programming
sketches that involve some sort of "grid" or "board." The following example displays a grid of Cell
objects stored in a two-dimensional list. Each cell is a rectangle whose brightness oscillates from 0-255
with a sine function.
<br><br>
</p>
<img src="imgs/cells.jpg">
<pre>
<a href="http://learningprocessing.com/examples/chp13/example-13-10-grid-cells">Example: 2D Array of Objects</a>
# Number of columns and rows in the grid
nCols = 10;
nRows = 10;
def setup():
global nCols, nRows, grid
size(200,200)
grid = makeGrid()
for i in xrange(nCols):
for j in xrange(nRows):
# Initialize each object
grid[i][j] = Cell(i*20,j*20,20,20,i+j)
def draw():
global nCols, nRows, grid
background(0)
# The counter variables i and j are also the column and row numbers and
# are used as arguments to the constructor for each object in the grid.
for i in xrange(nCols):
for j in xrange(nRows):
# Oscillate and display each object
grid[i][j].oscillate()
grid[i][j].display()
# Creates a 2D List of 0's, nCols x nRows large
def makeGrid():
global nCols, nRows
grid = []
for i in xrange(nCols):
# Create an empty list for each row
grid.append([])
for j in xrange(nRows):
# Pad each column in each row with a 0
grid[i].append(0)
return grid
# A Cell object
class Cell():
# A cell object knows about its location in the grid
# it also knows of its size with the variables x,y,w,h.
def __init__(self, tempX, tempY, tempW, tempH, tempAngle):
self.x = tempX
self.y = tempY
self.w = tempW
self.h = tempH
self.angle = tempAngle
# Oscillation means increase angle
def oscillate(self):
self.angle += 0.02;
def display(self):
stroke(255)
# Color calculated using sine wave
fill(127+127*sin(self.angle))
rect(self.x,self.y,self.w,self.h)
</pre>
<p> </p>
<p class="license">This tutorial is for Python Mode in
Processing 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 adapted from the book,
<a href=
"https://processing.org/books/#shiffman">Learning Processing</a> by Daniel Schiffman,
by Daniel Shiffman, published by Morgan Kaufmann Publishers,
Copyright © 2008 Elsevier Inc. All rights reserved.</p>
</td>
</tr>
</table>
</body>
</html>