Processing Section 1

Drawing pictures with code? Yes!

pixelart

This exploration will function like a hunt for answers.

If you haven’t already installed Processing on your computer, you can download it for free here.

 

Section 1. Pixel Grid System:

First just a recap on the pixel grid: every point on the screen is a pixel and each point is specified by a location:  (x, y). 
pixel
Important Reminder: 

The pixel grid system has its 0,0 coordinate in the upper left corner.

This is a different position from the conventional math grid which has it in the bottom left corner.

block3

Section 2. Canvas is Coded as Size

Your computer screen is your workspace and in Processing you have two windows to work with. The coding instructions you enter are input into the main code window and the canvas that shows your design is called the Sketch window. 

mainframe-400x277

 

 

You must specify the dimensions of your canvas first and in Processing the code term for this is size.

Looking at the image here and thinking about the pixel grid system of graphing, test the code in Processing and figure out how the size(), background(), and line() functions (aka commands) work.

Now, replace the 3rd and 4th numbers (aka “arguments”) in the line() function with the words, “width” and “height”.

What do you think the code words “width” and “height” refer to looking at the code?

next

Exercise #1

a. Using the code model from the box above, make an X with two black lines on a gray background. 

b. Now, replace the arguments in your two lines using the new commands: “width” and “height.

block3

Section 3. Simple Shapes

 

The first task we have is to learn how to describe (create)  simple designs in the pixel grid system.  We will create these shapes with point coordinates.  In the images below, what information might you specify so that you can tell the computer to draw the various shapes?

 

next2

ANSWERS:

Point: X (horizontal) position, Y (vertical) position of one point.

Line: X (horizontal) position and Y (vertical) position of each end point.

Rectangle & Ellipse: location in horizontal and vertical axis, width and height of shape.

block3

Section 4. Functions and Arguments

Now you are thinking like a coder! By describing shapes with vector points on the pixel grid system you are on your way. Formally, in Processing, we program shapes with…

Functions, which work as action commands.

and

Arguments, which are the specifications for the action command.

red-dot

Regular Language Example:

Jump (function/action) from the ground (argument) to the ceiling (argument).

red-dot

Exercise #2

a. In the below four code/shape examples, list which parts are functions and what parts are arguments?

b. What action does each different function do specifically?

c. What do the arguments in each example control exactly (explain each one)?

point-line

Note 1: The functions/actions are in front of the parentheses and the arguments are inside of the parentheses.

Note 2: In Processing, the above shapes inside the gray boxes are called 2D Primitives. This set also has arcs, quads and triangles.

block3

Section 5. Shades of Gray

Screen shot 2013-07-10 at 3.52.08 PM

You designate gray tones very simply by specifying a number from

0 (zero – the darkest black) all the way to 255 (the lightest white).

block3

Section 6. Syntax & Comments

When using code to make the computer do something, the syntax of a computer language is the set of rules that defines the proper order and combinations of letters, numbers and symbols. The syntax rules must be strictly followed or the code will not work. If you misspell words, miss punctuation, or capitalization then your code might break.

Comments are notes to self to help you understand your chunks of code. We use two forward // to indicate a comment. 

 

Example code with correct syntax and comments // after  

background(255);          // Sets background to white
stroke(0);                       // Sets outline color to black
fill(150);                        // Sets color interior of a shape to grey
rect(50,50,75,100); // Draws shape with most recent settings

 

block3

Exercise #3

Based on the many clues from the above information. Code the following canvas:

box

block3

Section 8. Coloring Pixels with Reds, Greens and Yellows (RGB)

 

 

In art class and elementary school, the primary colors were red, yellow and blue.

Primary Colors

 

 

In the digital environment our primary colors are red, green and blue.

makeup-colours-additive-color-rgb-500x500
Digital Color Mixing 101:
Red + Green = Yellow
Red + Blue = Purple
Green + Blue = Cyan (blue-green)
Red + Green + Blue = White
no colors = Black

RGB Values:
Each color has a value between 0 and 255
0 means NONE of that color
255 means MAX of that color

Exercise #4

Which line of code matches which colored dot (see color key picture above)?

Tip: Processing has a color selector to aid in choosing colors. 

Access this via TOOLS (from the menu bar) → COLOR SELECTOR.

color

Use the values from R, G, B  to help you specify your

color choice in a 3 argument command such as fill() or stroke().

block3

Section 9. Adding Transparency Values

When considering the above formulations for RGB color, there are 3 values you must enter: the R value, the G value and B value. If you would like a color to not be opaque (solid) then you must add a fourth value to your color formulation to specify the opacity. The number range for opacity is the same as color, 0-255.

Exercise #5

Type the following code for this image and explain how opacity works as a fourth argument after testing your ideas.

Screen shot 2013-07-10 at 6.16.17 PM

 

block3

Section 10. The Processing Reference – Important Resource!

The Processing Online Reference is a complete library of commands that will help you do more and improve upon your code project.

Here’s how to get there:

HELP –> REFERENCE

It looks like this:

Under 2D Primitives find the quad() function and click to open it. 

The following explanation shows you how to understand the reference when using new code commands:

Exercise #6

Make a new sketch window and using the Processing Reference make a new design with two quad() shapes, one triangle() shape, and few other shapes that are all different colors and on different parts of the canvas.

block3
If the above concepts aren’t clicking for you or if you would like a fun review of these coding ideas, then try watching the very animated and informal free video tutorials by NYU professor and Processing champion, Daniel Shiffman.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

How to Use Processing

Drawing with Pixels

RGB Color

block3

Screen shot 2013-08-14 at 10.26.55 AM

 

 

 

 

bugkitty