Processing Section 1

IMPORTANT NOTE:

YOU NEED TO GO THROUGH EVERYTHING ON THIS PAGE CAREFULLY BEFORE YOU BEGIN THE PROJECT AT END.

—-

Drawing pictures with code? 

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.

 

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

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, how do you think the code relates to the gray box?

next

 

block3

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

 

block3

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

Try code below and see if you can answer the following questions:

In the below four code/shape examples, guess what parts are functions and what parts are arguments?

What action does each different function do specifically?

What do the arguments in each example specify exactly?

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 includes: arcs, quads and triangles.

block3

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 zero (the darkest black) all the way to 255 (the lightest white).

block3

6. Syntax

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. See what syntax patterns you notice in the following code examples:

 

Code;                                    // Comment

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

 

 

Syntax Note: Processing is case sensitive.

block3

7.

Based on the many clues from the above information. Try to code the following canvas:

box

block3

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

 

Which line of code matches which colored dot?

fixed2

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

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

color

block3

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.

Try the following code for this image to see how opacity works.

transparency

Screen shot 2013-07-10 at 6.16.17 PM

block3

9. Processing has a Print Function. Look below and try the code to figure out how to use it.


print

 

block3

10. Processing References

The Processing Online Reference is a complete internet resource to help you program your ideas. Go now.

red-dot

You can also find information on a function that you are already using inside of the Processing environment by highlighting your function and then moving up to the menu bar to find it.

 

HELP –> FIND IN REFERENCE

blah

block3

REVIEW IT:

REVIEW SHEET 

SELF-TEST

 

block3

PROJECT ASSIGNMENT:

MAKE A NEW DESIGN THAT LOOKS LIKE A CREATIVE LANDSCAPE USING:

  • SEVERAL COLORS & GRAYSCALE
  • POINTS, LINES, RECTANGLES AND ELLIPSES
  • TRANSPARENCIES
  • PRINTS A LINE OF TEXT AT THE BOTTOM
  • SHOWS ALL OF YOUR CODE LINES ANNOTATED WITH COMMENTS //

 

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