Programming in Processing

Programming

Programming is the process of creating software that accomplishes a specific task on a computer. Typically this is done using a high-level, general pupose programming language. There are hundereds of programming languages and have similar features. We will be using a language called Processing.

Processing

Processing's computational model is the production of a "sketch" that is graphical and can include animation. In the most basic programs, one sets attributes then draws some features.

There are many built-in functions for creating simple graphics in Processing as described on the Processing Reference page. Some basic drawing features are

• point() which draws a point
• line() which draws a line
• rect() which draws a rectangle
• triangle() which draws a triangle
• ellipse() which draws an ellipse
• arc() which draws an arc

There are many built-in functions for setting graphics attributes in Processing as described on the Processing Reference page. Some basic drawing features are

• stroke() which sets the line, point, or outline color
• noStroke() causes no lines, points, or outlines to be drawn
• strokeWeight() which sets the line, point, or outline size
• fill() which sets the interior color for 2D shapes

Rather than naming colors, Processing uses numeric values to represent specific colors. The default is to use the RGB color model, which is extensively on modern computers. In this model, a color is represented by a triple of values (R,G,B), where R represents the amount of red, G represents the amount of green, and B represents the amount of blue. Typically each one or the color components is an 8-bit number having a value between 0 and 255. Thus, one can represent 2²⁴ = 16,777,216 different colors! You can use Processing's Color Selector to identify colors See the Color tutorial for more information.

Example

Here is a simple example showing what one can do using Processing.

size(600,600); background(80,200,80); noStroke(); fill(153,76,0); // brown // head ellipse(300,300, 400,400); // ear outlines ellipse(150,150, 150,150); ellipse(450,150, 150,150); fill(255,255,255); // white // ear interior ellipse(150,150, 100,100); ellipse(450,150, 100,100); fill(153,76,0); // brown // head ellipse(300,300, 400,400); // muzzle fill(255,255,255); // white ellipse(300,350, 225,225); fill(0,0,0); // black // eyes ellipse(250,200,50,50); ellipse(350,200,50,50); // nose ellipse(300,325,125,125); save("BearFace.jpg");

Processing Homework #1

References

1. Getting Started with Processing
2. Processing Overview
3. Coordinate System and Shapes in Processing
4. Examples from Daniel Shiffman's book Learning Processing