Most intro programming classes begin with text-based exercises and basic command line prompts. With Processing, we will be learning to program visually through manipulating images. Processing syntax is very similar to Java, a good understanding of the basics of Processing will give you a head start on the Java applet and game design sections over the rest of the week.
Why learn Processing?
The Processing environment is actually written in Java! Processing code is translated(compiled) into Java and is run as a Java program.
Starting with Processing allows you to have a basic graphics library at your disposal without worrying about more advanced Java concepts and object-oriented programming.
The goal of this lesson is to introduce you to programming and get you comfortable with drawing shapes through code. You will also learn about tracking mouse positions in order to make your graphics more interactive.
For Reference: http://processing.org/reference/
Let’s get to drawing with code! Open up a new Processing sketch and type the following into the text editor area:
line (0, 0, 100, 100);
This is our first function (more on functions later)! The line function is surrounded by brackets ( ) containing 4 numbers, separated by commas. The values within the brackets are called parameters (Provide a definition of a function and parameters, simple explanation).
Notice the semi-colon (;) at the end of the statement. The semi-colon is a very important part of Java syntax, it tells the compiler that you have finished your statement. Syntax is an important part of programming (specificity of language).
Programming languages are precise and will not run if you forget a semicolon or give your function the incorrect number or type of arguments. If you receive an error message while trying to run your application, don’t panic! The compiler will catch any errors in your code and offer suggestions to help fix the problem. This is an invaluable resource as you progress through the lesson material. Even professional programmers make errors quite often and that is why it is important to test your code often!
Let’s add another line:
line (100, 0, 0, 100);
Try running the code again.
We have created an X shape across the screen by constructing two lines, but how exactly does this work?
The numbers in the line function represent coordinate positions. You may have learned in Math class that coordinates are represented by two numbers in brackets representing the X (horizontal) and Y (vertical) position of a point. The line function takes two coordinates points as arguments and draws a line between the two points.
The coordinate system in Processing starts from the upper left hand corner (position 0, 0). This means that as your x value increases, the point moves RIGHT, and similarly, as your y value increases, your coordinate will move DOWN. This is important to remember as it will determine the placement of all the elements coded in your application.
By default, Processing runs on a 100 x 100 pixel window (we’ll see in a bit how to adjust the screen size). Our two lines are represented by two sets of coordinate points. Our first line function draws a line from point (0, 0) to point (100, 100) and the second line draws a line from point (0, 100) to point (0, 100).
Rectangles and Circles (Ellipses)
Here is the code we use to draw rectangles and ellipses. We will continue to build on top of the line drawings we constructed during the previous section.
rect( x_position, y_position, width, height)
*Remember that X and Y positions start at the upper left hand corner, position (0, 0).
Let’s make some rectangles! Type this code below your line code:
rectMode(CENTER); rect(50, 50, 50, 50);
Our rectangle will be drawn centered at position (50, 50) with a width of 50 and a height of 50. This effectively makes a square.
Run the code. You should see a square appear at the center of your lines. Notice that the rectangle is drawn on top of the lines. It is important to note that Processing draws images in the order that they are written in the code. If you place the rectangle code before the line code, the lines will appear on top of the rectangles.
Next up, let’s draw an ellipse!
The arguments (parameters) for drawing an ellipse are very similar to that of a rectangle:
ellipse (x_position, y_position, width, height)
Type this code below your rectangle code:
ellipseMode(CENTER); ellipse(50, 50, 50, 50);
Run this code again, and you should see a circle appear inside of your rectangle.
The code ellipseMode(CENTER) and rectMode(CENTER) mean that our coordinate positions (the first and second parameters of the function) for rectangle and ellipses are based on the center of our shape.
fill ( RedValue, GreenValue, BlueValue);
Colors are created by combining values of red, green and blue color. You might recall from art class that all colors can be made by combining different amounts of these three primary colors. In Processing (and many other programming languages), each color can take a value between 0 and 255, representing the intensity of that color.
Make sure that your fill function is placed before the shape you wish to apply the color to.
If you would like to a Grayscale color, simply use a single number argument with a value from 0 to 255. This is particularly useful for setting background colors.
Will set the background to black (the most extreme grayscale value).
Will set the background to white.
What’s an easy way to remember which number represents black and which represents white?
Think of the number value as “adding” color; a lower number value indicates a “lighter” color.
Having trouble thinking about how to make colors? Check out this short video on how computer mix colors from the Khan Academy:
Youtube link: http://youtu.be/qtVKzgtWWu4
Let’s finish off our basic shape knowledge by learning how to draw a triangle. the triangle function takes 3 sets of XY coordinates, representing the three points of the triangle.
triangle(x1, y1, x2, y2, x3, y3);
Notice the line of code:
size (200, 200);
The size function sets the screen size of your application (length, width). In this example, the size of the screen is set to 200 by 200 pixels.
Now that we’ve seen how to draw lines, shapes and add color to our drawing, we’re ready to create some drawings of our own! Take a look at the sample creature:
Let’s get on to making your own creature! If you feel comfortable with shape drawing and positioning, feel free to get started. You can also start by changing the colors and positions of the shapes in the sample application until you are happy with the results.
Here are a few fun things you can do to change up the look:
This will change the thickness of the lines surrounding the creature. Try changing the value and running the application to see the results.
stroke (RedVal, GreenVal, BlueVal)
The stroke function will change the color of the lines in the drawing. Recall that greyscale shades (from pure white 0 to solid black 255) consist of one argument, and colors 3 values between 0-255 represent the amounts of red, green and blue in the color respectively.
if you are done early: