Skip to content

Commit d9dfb0a

Browse files
author
philiptr
committed
Rendering tutorial layout
1 parent a8412e9 commit d9dfb0a

File tree

1 file changed

+60
-1
lines changed

1 file changed

+60
-1
lines changed

content/static/tutorials/rendering/index.html

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ <h3>Another drawing surface</h3>
3535
background(0);
3636
ellipse(50, 50, 75, 75);
3737
</pre>
38+
<br />
39+
<br />
40+
<br />
3841

3942
<p>
4043
To draw the same shape into a new surface, first create a new PGraphics object, then draw to it by typing the name of the object and dot operator before the name of the drawing functions. This new surface is placed in the display window with the image() function.
@@ -57,7 +60,15 @@ <h3>Another drawing surface</h3>
5760
<br />
5861
In practice, new PGraphics layers are most often used with programs that have setup() and draw(). To work together, the PGraphics object is declared as global, it is created inside setup(), then can be modified in draw().
5962
</p>
60-
<img src="imgs/35_03.png" style= "width: 100px; height: 100px; float: left;">
63+
<div style="float: left;">
64+
<img src="imgs/35_03.png" style= "width: 100px; height: 100px;">
65+
<br />
66+
<br />
67+
<br />
68+
<br />
69+
<br />
70+
<br />
71+
</div>
6172
<pre>
6273
PGraphics circle;
6374

@@ -104,6 +115,14 @@ <h3>Another drawing surface</h3>
104115
ellipse(mouseX, mouseY, 40, 40);
105116
}
106117
</pre>
118+
<br />
119+
<br />
120+
<br />
121+
<br />
122+
<br />
123+
<br />
124+
<br />
125+
<br />
107126
<p>
108127
To allow for the circles to accumulate in the display window, but to have a different effect for the crosshairs, a new drawing surface is created to render the circles, while the crosshairs are drawn in the main display window. The surface with the circles is redrawn each frame in draw(), followed by the lines so they are on top of the circles layer.
109128
</p>
@@ -144,6 +163,16 @@ <h3>Another drawing surface</h3>
144163
circles.endDraw();
145164
}
146165
</pre>
166+
<br />
167+
<br />
168+
<br />
169+
<br />
170+
<br />
171+
<br />
172+
<br />
173+
<br />
174+
<br />
175+
<br />
147176
<p>
148177
To allow for the circles to accumulate in the display window, but to have a different effect for the crosshairs, a new drawing surface is created to render the circles, while the crosshairs are drawn in the main display window. The surface with the circles is redrawn each frame in draw(), followed by the lines so they are on top of the circles layer.
149178
</p>
@@ -235,6 +264,14 @@ <h3>OpenGL surfaces</h3>
235264
cube.endDraw();
236265
}
237266
</pre>
267+
<br />
268+
<br />
269+
<br />
270+
<br />
271+
<br />
272+
<br />
273+
<br />
274+
<br />
238275
<p>
239276
As implied by the previous example, the only rule to remember about selecting renderers for new drawing surfaces is to match the renderer defined in size() and createGraphics(). The exception to this rule is using the default renderer and P2D as alternate options when P3D is the main renderer defined in size(). For example, the following code won’t run because it’s not possible to run a 3D renderer when the default is used as the primary renderer:
240277
<pre>
@@ -264,6 +301,22 @@ <h3>Combine surfaces</h3>
264301
<br />
265302
<br />
266303
<img src="imgs/35_09_3.png" style= "width: 100px; height: 100px;">
304+
<br />
305+
<br />
306+
<br />
307+
<br />
308+
<br />
309+
<br />
310+
<br />
311+
<br />
312+
<br />
313+
<br />
314+
<br />
315+
<br />
316+
<br />
317+
<br />
318+
<br />
319+
267320
</div>
268321
<pre>
269322
PGraphics cubeA;
@@ -360,6 +413,8 @@ <h3>Combine surfaces</h3>
360413
cube.endDraw();
361414
}
362415
</pre>
416+
<br />
417+
<br />
363418
<p>
364419
When the cubeA object is passed into the drawCube() function in the second line of draw(), the drawCube() functions renders into that object. When the cubeB object is passed into the drawCube() function in the third line of draw(), the drawCube() function renders into that object. This ability is the power of the revised program; it shows a modular technique for drawing into any PGraphics object through parameterization.
365420
<br />
@@ -409,6 +464,10 @@ <h3>Combine surfaces</h3>
409464
cube.endDraw();
410465
}
411466
</pre>
467+
<br />
468+
<br />
469+
<br />
470+
<br />
412471
<p>
413472
In general, blend modes and controlling transparency with tint() are the primarily ways to easily mix the pixels from two PGraphics objects together in the main display window. Try experimenting with this using the last example in the chapter. Keep in mind that the default blend mode is blendMode(BLEND) to reset to the way a program draws. Also, some blend modes don’t work with all background values. For example, if the background is white, then using blendMode(LIGHTEST) will always be a white screen because no pixel will ever be lighter than the background value. Conversely, blendMode(DARKEST) and blendMode(MULTIPLY) don’t have results with a black background.
414473
</p>

0 commit comments

Comments
 (0)