Introduction to programming
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Introduction to Programming PowerPoint PPT Presentation


  • 62 Views
  • Uploaded on
  • Presentation posted in: General

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 ;

Download Presentation

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


Grayscale black white

Grayscale: black  white


Introduction to programming

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


  • Login