1 / 26

Introduction to Programming

This guide introduces Processing, an open-source programming language developed at MIT for creating images, animations, and sounds. Built on Java, Processing offers a user-friendly environment for beginners to explore programming concepts such as data types, variables, control structures, functions, and graphics. Learn to draw shapes, manage colors, and handle interactive mouse events. With comprehensive examples, this resource is perfect for educators and students keen on creative computing. Discover more at www.processing.org.

moshe
Télécharger la présentation

Introduction to Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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. • www.processing.org

  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 www.processing.org

  5. Data Representationsin 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. 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

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

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

  10. 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

  11. 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

  12. 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

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

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

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

More Related