YOU NEED TO GO THROUGH EVERYTHING ON THIS PAGE CAREFULLY BEFORE YOU BEGIN THE PROJECT AT END.
Drawing pictures with code?
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).
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.
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.
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?
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?
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.
Arguments, which are the specifications for the action command.
Regular Language Example:
Jump (function/action) from the ground(argument) to the ceiling (argument).
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?
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.
5. Shades of Gray
You designate gray tones very simply by specifying a number from zero (the darkest black) all the way to 255 (the lightest white).
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.
Based on the many clues from the above information. Try to code the following canvas:
8. Coloring Pixels with Reds, Greens and Yellows (RGB)
In art class and elementary school, the primary colors were red, yellow and blue.
In the digital environment our primary colors are red, green and blue.
Digital Color Mixing 101:
Red + Green = Yellow
Red + Blue = Purple
Green + Blue = Cyan (blue-green)
Red + Green + Blue = White
no colors = Black
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?
Tip: Processing has a color selector to aid in choosing colors.
Access this via TOOLS (from the menu bar) → COLOR SELECTOR.
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.
9. Processing has a Print Function. Look below and try the code to figure out how to use it.
10. Processing References
The Processing Online Reference is a complete internet resource to help you program your ideas. Go now.
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
MAKE A NEW DESIGN THAT LOOKS LIKE A CREATIVE LANDSCAPE USING:
- SEVERAL COLORS & GRAYSCALE
- POINTS, LINES, RECTANGLES AND ELLIPSES
- PRINTS A LINE OF TEXT AT THE BOTTOM
- SHOWS ALL OF YOUR CODE LINES ANNOTATED WITH COMMENTS //
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.
The videos which reference this webpage: