How To Draw A Smile Face On Processing

Learning goals

Sympathise the bones elements of a Processing sketch
Empathise how to run sketches in the Processing surround
Use Processing drawing functions to draw shapes

What to do

Part 1: Setting up Processing

Offset Processing past clicking the start card, then choosing Programs, and so Processing.

Part ii: Importing the instance sketch

Download the post-obit cypher file and relieve it in your Downloads binder: Drawing.null.

Start a file browser window and navigate to your Downloads folder. Right click on Drawing.zip. Cull Excerpt All, then choose H:\My Documents\Processing every bit the destination directory.

In Processing, choose File → Open up. In the file chooser dialog, navigate to H:\My Documents\Processing, then double click on Cartoon, then choose Drawing.pde. Y'all should now take a Processing window with the source code of the instance sketch.

Click the run push, which looks similar this:

Part 3: Drawing with Processing

When the sketch runs, it draws a smiley face up and some boxes (click for full size):

Read through the code for the sketch. There are comments (lines of text beginning with "//") describing what each department of lawmaking is doing.

Now let's try changing some stuff!

Detect the code (in the draw part) that reads

                          // Use white fill up              fill              (              255              );

Try changing it to

                          // ???              fill              (              127              );

Run the sketch over again. What happened?

Now change information technology to

                          // ???              fill              (              194              ,              200              ,              93              );

How did that alter things? Experiment with unlike numeric values. Each value should exist an integer between 0 and 255. Suggestion: try setting two of the values to 0 and one of the values to 255. What happens when the first value is 255? The 2d? The third?

At present find the code (once more, in the draw function) that reads

                          // Large circle centered at 400,300              ellipse              (              400              ,              300              ,              400              ,              400              );

Try changing it to

                          // ???              ellipse              (              400              ,              300              ,              500              ,              500              );

Run the sketch again. What happened? Now effort

                          // ???              ellipse              (              400              ,              300              ,              300              ,              300              );

How did that change things? Side by side, try

                          // ???              ellipse              (              200              ,              300              ,              400              ,              400              );

What happened? Finally, try

                          // ???              ellipse              (              600              ,              300              ,              400              ,              400              );

Attempt some other values for the ellipse command to alter the placement and/or size of the ellipse.

Adjacent: observe the code reading

                          // Black-filled arc (part of an ellipse)              arc              (              400              ,              350              ,              150              ,              70              ,              0              ,              PI              ,              CHORD              );

Change it to

                          // ???              arc              (              400              ,              350              ,              150              ,              70              ,              PI              ,              PI              +              PI              );

What happens?

Finally, find the lawmaking

                          // Apply thick black borders on shapes              stroke              (              0              );              strokeWeight              (              five              );

Modify information technology to

                          // ???              stroke              (              85              ,              15              ,              157              );              strokeWeight              (              10              );

What did that practise?

Part iv: Making your own drawing

At this point, you probably accept a pretty good idea of what'south going on in a basic Processing sketch:

setup is for code that runs when the sketch starts, and it tin can gear up the size of the window, ready a background color, and other practise other "just one time" operations
draw is for lawmaking that does drawing operations
the origin signal (0, 0) is the upper left corner of the window
10 coordinates increase going to the right
y coordinates increase going down
fill and stroke colors tin exist blackness (0), white (255), gray (somewhere betwixt 0 and 255), or capricious colors (red, green, and blue component values, each inside the range 0-255)

You can consult the Processing reference for a complete listing of all Processing functions, including the drawing functions.

To terminate up, please start your ain Processing sketch by following the instructions in the Getting started department of Assignment ii. This should create a sketch chosen VisualArtProject.

In the fourth dimension remaining, start to translate the sketch you made on the graph paper into drawing operations in your new Processing sketch. You lot probably won't be able to create the entire prototype, but if you practise at least a few shapes, that'due south groovy.