Skip to content

Commit 99e0404

Browse files
REASREAS
committed
New layout draft for Arrays tutorial, part 1
1 parent 009cd29 commit 99e0404

2 files changed

Lines changed: 47 additions & 22 deletions

File tree

‎content/static/tutorials/arrays/index.html‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
<div class="content" style="margin-top: 0px;">
2-
<table width="656" style="margin-top: 0px;">
3-
<tr>
4-
<td>
5-
<h1>Arrays</h1>
6-
<p class="license">This tutorial is the Arrays chapter from the second edition of <em><a href="https://mitpress.mit.edu/books/processing-0">Processing: A Programming Handbook for Visual Designers and Artists</a></em>, published by MIT Press. Copyright 2013 MIT Press. This tutorial is for Processing version 2.0+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.</p>
7-
8-
<br />
9-
<p>
10-
The term array refers to a structured grouping or an imposing number: “The dinner buffet offers an array of choices,” “The city of Boston faces an array of problems.” In computer programming, an array is a set of data elements stored under the same name. Arrays can be created to hold any type of data, and each element can be individually assigned and read. There can be arrays of numbers, characters, sentences, boolean values, and so on. Arrays might store vertex data for complex shapes, recent keystrokes from the keyboard, or data read from a file.
11-
For instance, an array can store five integers (1919, 1940, 1975, 1976, 1990), the years to date that the Cincinnati Reds won the World Series, rather than defining five separate variables. Let’s call this array “dates” and store the values in sequence:
12-
</p>
1+
<table width="650" style="margin-top: 0px;">
2+
<tr>
3+
<td>
4+
5+
6+
<p class="license">This tutorial is the Arrays chapter from <em><a href="../../handbook">Processing: A Programming Handbook for Visual Designers and Artists, Second Edition</a></em>, published by MIT Press. &copy; 2014 MIT Press. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.</p>
7+
8+
<h1 style="line-height: 0.7em;">Arrays</h1>
9+
<h3 style="line-height: 0.7em;"><em>Casey Reas and Ben Fry</em></h3>
10+
11+
12+
<p>&nbsp;</p>
13+
14+
<p class="txt">
15+
The term array refers to a structured grouping or an imposing number: “The dinner buffet offers an array of choices,” “The city of Boston faces an array of problems.” In computer programming, an array is a set of data elements stored under the same name. Arrays can be created to hold any type of data, and each element can be individually assigned and read. There can be arrays of numbers, characters, sentences, boolean values, and so on. Arrays might store vertex data for complex shapes, recent keystrokes from the keyboard, or data read from a file. For instance, an array can store five integers (1919, 1940, 1975, 1976, 1990), the years to date that the Cincinnati Reds won the World Series, rather than defining five separate variables. Let’s call this array “dates” and store the values in sequence:
16+
</p>
17+
18+
1319
</td>
1420
</tr>
1521

@@ -855,4 +861,3 @@ <h3>Two-dimensional Arrays</h3>
855861
</tr>
856862

857863
</table>
858-
</div>

‎content/static/tutorials/interactivity/index.html‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1282,34 +1282,34 @@ <h3>Mouse events</h3>
12821282

12831283
<table style="width: 650px; border-collapse: separate; border-spacing: 10px;">
12841284
<tr>
1285-
<td style="width: 150px">
1285+
<td style="width: 130px">
12861286
<strong>mousePressed()</strong>
12871287
</td>
1288-
<td style="width: 500">
1288+
<td style="width: 520px">
12891289
Code inside this block is run one time when a mouse button is pressed
12901290
</td>
12911291
</tr>
12921292
<tr>
1293-
<td style="width: 150px">
1293+
<td style="width: 130px">
12941294
<strong>mouseReleased()</strong>
12951295
</td>
1296-
<td style="width: 500px">
1296+
<td style="width: 520px">
12971297
Code inside this block is run one time when a mouse button is released
12981298
</td>
12991299
</tr>
13001300
<tr>
1301-
<td style="width: 150px">
1301+
<td style="width: 130px">
13021302
<strong>mouseMoved()</strong>
13031303
</td>
1304-
<td style="width: 500px">
1304+
<td style="width: 520px">
13051305
Code inside this block is run one time when the mouse is moved
13061306
</td>
13071307
</tr>
13081308
<tr>
1309-
<td style="width: 150px">
1309+
<td style="width: 130px">
13101310
<strong>mouseDragged()</strong>
13111311
</td>
1312-
<td style="width: 500px">
1312+
<td style="width: 520px">
13131313
Code inside this block is run one time when the mouse is moved while a mouse button is pressed
13141314
</td>
13151315
</tr>
@@ -1629,10 +1629,30 @@ <h3>Key events</h3>
16291629
Each key press is registered through the keyboard event functions keyPressed() and keyReleased():
16301630
</p>
16311631

1632+
<table style="width: 650px; border-collapse: separate; border-spacing: 10px;">
1633+
<tr>
1634+
<td style="width: 130px">
1635+
<strong>keyPressed()</strong>
1636+
</td>
1637+
<td style="width: 520px">
1638+
Code inside this block is run one time when any key is pressed
1639+
</td>
1640+
</tr>
1641+
<tr>
1642+
<td style="width: 130px">
1643+
<strong>keyReleased()</strong>
1644+
</td>
1645+
<td style="width: 520px">
1646+
Code inside this block is run one time when any key is released
1647+
</td>
1648+
</tr>
1649+
</table>
1650+
1651+
<!--
16321652
<ul>
16331653
<li><strong>keyPressed()</strong> Code inside this block is run one time when any key is pressed</li>
16341654
<li><strong>keyReleased()</strong> Code inside this block is run one time when any key is released</li>
1635-
</ul>
1655+
</ul>-->
16361656

16371657
<p class="txt">
16381658
Each time a key is pressed, the code inside the keyPressed() block is run once. Within this block, it’s possible to test which key has been pressed and to use this value for any purpose. If a key is held down for an extended time, the code inside the keyPressed() block might run many times in a rapid succession because most operating systems will take over and repeatedly call the keyPressed() function. The amount of time it takes to start repeating and the rate of repetitions will be different from computer to computer, depending on the keyboard preference settings. In this example, the value of the boolean variable drawT is set from false to true when the T key is pressed; this causes the lines of code to render the rectangles in draw() to start running.

0 commit comments

Comments
 (0)