Download presentation

Presentation is loading. Please wait.

Published byOwen Mygatt Modified about 1 year ago

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

Similar presentations

© 2016 SlidePlayer.com Inc.

All rights reserved.

Ads by Google