introduction to programming
Download
Skip this Video
Download Presentation
Introduction to Programming

Loading in 2 Seconds...

play fullscreen
1 / 26

Introduction to Programming - PowerPoint PPT Presentation


  • 83 Views
  • Uploaded on

Introduction to Programming. With Computer Language Processing. Processing. Born in 2001 at MIT. Open source. Language and environment to program images, animation, and sounds. Build on Java. www.processing.org. Processing. Based on Java. Case sensitive Statement terminates by ;

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to Programming' - moshe


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to programming

Introduction to Programming

With Computer Language Processing

processing
Processing
  • Born in 2001 at MIT.
  • Open source.
  • Language and environment to program images, animation, and sounds.
  • Build on Java.
  • www.processing.org
processing1
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
processing2
Processing
  • Interactions:
    • Mouse operations: move, click…
    • No buttons, labels... Use Java to add them
  • Libraries and references:
    • Use Help
    • Go to www.processing.org
data representations in a computer
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.
slide8
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

pixels and coordinates
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)…
graphical shapes line
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);

graphical shapes rect
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

graphical shapes ellipse
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

graphical shapes exercises
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
graphical contents
Graphical Contents
  • stroke(color);
  • fill(color);
  • noStroke();
  • noFill();
  • strokeWeight(int);
  • background(color);
important system variables
Important System Variables
  • mouseX, mouseY: current x,y coordinates of the mouse
  • pmouseX, pmouseY: previous x,y coordinates of the mouse
important interactive functions
Important Interactive Functions
  • mouseMoved();
  • mouseDragged();
  • mouseClicked();
  • mousePressed();
  • mouseReleased();
  • keyPressed();
ad