Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Programming

Similar presentations

Presentation on theme: "Introduction to Programming"— Presentation transcript:

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

Download ppt "Introduction to Programming"

Similar presentations

Ads by Google