Download presentation

Presentation is loading. Please wait.

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

Similar presentations

OK

By carefully incrementing the X and/or Y values of our set of lines, we can create a game board for a boat game. Lines that go from left to right are.

By carefully incrementing the X and/or Y values of our set of lines, we can create a game board for a boat game. Lines that go from left to right are.

© 2018 SlidePlayer.com Inc.

All rights reserved.

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.

Ads by Google