Drawing pictures with code? Yes!
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).
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.
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.
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?
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.“
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?
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.
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.
Arguments, which are the specifications for the action command.
Regular Language Example:
Jump (function/action) from the ground (argument) to the ceiling (argument).
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)?
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.
Section 5. Shades of Gray
You designate gray tones very simply by specifying a number from
0 (zero – the darkest black) all the way to 255 (the lightest white).
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
Based on the many clues from the above information. Code the following canvas:
Section 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 (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.
Use the values from R, G, B to help you specify your
color choice in a 3 argument command such as fill() or stroke().
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.
Type the following code for this image and explain how opacity works as a fourth argument after testing your ideas.
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:
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.
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: