Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Programming With Computer Language Processing.

Similar presentations


Presentation on theme: "Introduction to Programming With Computer Language Processing."— 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: – 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

7

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

9

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

11

12

13

14

15

16

17

18

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

22

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

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 With Computer Language Processing."

Similar presentations


Ads by Google