Skip to content

Commit 1195bb2

Browse files
REASREAS
committed
New layout draft for Color, Objects, Text tutorial, part 1
1 parent 34cce2f commit 1195bb2

5 files changed

Lines changed: 39 additions & 54 deletions

File tree

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
<h1>Color</h1>
2-
3-
<p>
4-
<table width="656">
5-
<tr>
6-
7-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
8-
9-
<p>&nbsp;</p>
1+
<table width="650">
2+
<tr>
3+
<td>
104

5+
<p class="license">
6+
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, &copy; 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.
7+
</p>
118

12-
<h3>Grayscale Color</h3>
9+
<h1 style="line-height: 0.7em;">Color</h1>
10+
<h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
1311

14-
In the digital world, when we want to talk about a color, precision is required. Saying "Hey, can you make that circle bluish-green?" will not do. Color, rather, is defined as a
15-
range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number - 50, 87, 162, 209, and so on - is a
16-
shade of gray ranging from black to white.
12+
<p>
13+
In the digital world, when we want to talk about a color, precision is required. Saying "Hey, can you make that circle bluish-green?" will not do. Color, rather, is defined as a range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number - 50, 87, 162, 209, and so on - is a shade of gray ranging from black to white.
1714
<br /><br />
1815
<img src="imgs/grayscale.jpg" border="1">
1916
<br /><br />
@@ -165,11 +162,8 @@ <h3>Custom Color Ranges</h3>
165162
With <a href="http://processing.org/reference/colorMode_.html"><strong>colorMode()</strong></a> you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%).
166163
</p>
167164

168-
<p>&nbsp;</p>
169-
170-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
171165

172166
</td>
173167
</tr>
174168
</table>
175-
</p>
169+

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
<h1 style="line-height: 0.7em;">Coordinate System and Shapes</h1>
1010
<h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
1111

12-
<p>&nbsp;</p>
13-
1412
<p>
1513
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 />
1614
<br />

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

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
<h1>Objects</h1>
2-
3-
<p>
4-
<table width="656">
5-
<tr>
6-
7-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
8-
9-
<p>&nbsp;</p>
10-
11-
<h3>I'm Down with OOP</h3>
12-
<p>
1+
<table width="650">
2+
<tr>
3+
<td>
4+
5+
<p class="license">
6+
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, &copy; 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.
7+
</p>
8+
9+
<h1 style="line-height: 0.7em;">Objects</h1>
10+
<h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
11+
12+
<p>
1313
Before we begin examining the details of how object-oriented programming (OOP) works in Processing, let's embark on a short conceptual discussion of "objects" themselves. Imagine you were not programming in Processing, but were instead writing out a program for your day, a list of instructions, if you will. It might start out something like:
1414

1515
<ul>
@@ -416,13 +416,8 @@ <h3>Objects are data types too!</h3>
416416
When a primitive value (integer, float, etc.) is passed in a function, a copy is made. With objects, this is not the case, and the result is a bit more intuitive. If changes are made to an object after it is passed into a function, those changes will affect that object used anywhere else throughout the sketch. This is known as <em>pass by reference</em> since instead of a copy, a reference to the actual object itself is passed into the function.
417417

418418
</p>
419-
420-
421-
<p>&nbsp;</p>
422-
423-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
424419

425420
</td>
426421
</tr>
427422
</table>
428-
</p>
423+

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<h1 style="line-height: 0.7em;">P3D</h1>
1010
<h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
1111

12-
<p class="txt">
12+
<p>
1313
In Processing 2.0, there are four render modes: the default renderer, P2D, P3D, and PDF. To use a non-default renderer, you can specify via the <a href="http://processing.org/reference/size_.html">size()</a> function.
1414
</p>
1515

@@ -19,7 +19,7 @@ <h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
1919
}
2020
</pre>
2121

22-
<p class="txt">
22+
<p>
2323
Now, you may be wondering: "Which render mode should I choose and why?" The mode itself tells Processing what to do behind the scenes when drawing the display window. For example, the default renderer employs existing Java 2D libraries to draw shapes, set colors, display text, etc. When deciding which renderer to use, you are balancing a number of factors: speed, accuracy, and general usefulness of the available features. In most cases, particularly when you are first learning Processing, you will want to use the default renderer setting. It provides the most elegant and accurate results when drawing in 2D.
2424
</p>
2525

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
<h1>Strings and Drawing Text</h1>
2-
3-
<p>
4-
<table width="656">
5-
<tr>
6-
7-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
8-
9-
<p>&nbsp;</p>
101

2+
<table width="650">
3+
<tr>
4+
<td>
5+
6+
<p class="license">
7+
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, &copy; 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.
8+
</p>
119

12-
<h3>The String class</h3>
10+
<h1 style="line-height: 0.7em;">Strings and Drawing Text</h1>
11+
<h3 style="line-height: 0.7em;"><em>Daniel Shiffman</em></h3>
1312

14-
<p>If you are looking to display text onscreen with Processing, you've got to first become familiar with the <a href="http://processing.org/reference/String.html">String</a> class. Strings are probably not a totally new concept for you, it's quite likely you've dealt with them before. For example, if you've printed some text to the message window or loaded an image from a file, you've written code like so:</pr>
13+
<p>
14+
If you are looking to display text onscreen with Processing, you've got to first become familiar with the <a href="http://processing.org/reference/String.html">String</a> class. Strings are probably not a totally new concept for you, it's quite likely you've dealt with them before. For example, if you've printed some text to the message window or loaded an image from a file, you've written code like so:
15+
</p>
1516

1617
<pre>
1718
println("printing some text to the message window!"); // Printing a String
@@ -600,11 +601,8 @@ <h3>Displaying text character by character</h3>
600601
<p>
601602
<i>Special thanks to <a href="http://ariel.chronotext.org/">Ariel Malka</a> for his advice on this last curved text example.</i>
602603
</p>
603-
<p>&nbsp;</p>
604-
605-
<p class="license">This tutorial is for Processing version 1.1+. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/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 &copy; 2008 Elsevier Inc. All rights reserved.</p>
606604

607605
</td>
608606
</tr>
609607
</table>
610-
</p>
608+

0 commit comments

Comments
 (0)