Introduction to Programming With Computer Language Processing

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

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

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

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.

Grayscale: black  white

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

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)…

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);

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

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

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

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

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

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