1. Introduction to Programming
With Computer Language Processing

2. Processing Born in 2001 at MIT. Open source.
Language and environment to program images, animation, and sounds.
Build on Java.

3. Processing Based on Java. Case sensitive Statement terminates by ;
Three major components:
Fundamentals: data types, variables, operators…
Control structs:
Functions
Decisions: if
Loops: while, for
Data structures:
Class and objects
Many examples

4. Processing Interactions: Libraries and references:
Mouse operations: move, click…
No buttons, labels... Use Java to add them
Libraries and references:
Use Help
Go to

5. Data Representations in a Computer
Computer understands only 0’s and 1’s.
Text file: ASCII file  numbers
Binary file: all numbers
Images and graphics: every pixel has a number representing
Grayscale (0 – 255)
Color (red: 0-255, green: 0-255, blue: 0-255)
Optional: alpha (0-255), color transparency.

6. Grayscale: black  white

8. Three basic colors can generate
Red + Green = Yellow
Red + Blue = Purple
Green + Blue = Cyan (blue-green)
Red + Green + Blue = White
no colors = Black
Three basic colors can generate
all colors

10. Pixels and Coordinates
Pixel: unit of image resolution
Coordinate system:
Top-left corner: (0,0)
X axis: horizontal axis, left to right
Y axis: Vertical, top to buttom
Point: (X-coordinate, Y-coordinate)
Examples: Point (0,0), (2,5), (3,3)…

19. Graphical Shapes: Line
Two points determines a line: p1(x1,x2) and p2(x2,y2)
Function to draw a line
Line(x1,y1,x2,y2);

20. Graphical Shapes: Rect
Three modes: CORNER, CENTER, CORNERS. Default: CORNER
CORNER: rectMode(CORNER);
rect(x1,y1,w,h); //x1,y1: top-left corner
CENTER: rectMode(CENTER);
rect(x,y,w,h); //x,y: center
CORNERS: rectMode(CORNERS);
rect(x1,y1,x2,y2); //x1,y1,x2,y2: top-left and button right coners

21. Graphical Shapes: Ellipse
Three modes: CORNER, CENTER, CORNERS. Default: CENTER
CORNER: ellipseMode(CORNER);
ellipse(x1,y1,w,h); //x1,y1: top-left corner
CENTER: ellipseMode(CENTER);
ellipse(x,y,w,h); //x,y: center coord.
CORNERS: ellipseMode(CORNERS);
ellipse(x1,y1,x2,y2); //x1,y1,x2,y2: top-left and button right coners

23. Graphical Shapes: Exercises
Draw a circle
Draw a triangle using
function triangle
function line
Draw an angle
Draw a quad using
function quad

24. Graphical Contents stroke(color); fill(color); noStroke(); noFill();
strokeWeight(int);
background(color);

25. Important System Variables
mouseX, mouseY: current x,y coordinates of the mouse
pmouseX, pmouseY: previous x,y coordinates of the mouse

26. Important Interactive Functions
mouseMoved();
mouseDragged();
mouseClicked();
mousePressed();
mouseReleased();
keyPressed();