programming in processing n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Programming in Processing PowerPoint Presentation
Download Presentation
Programming in Processing

Loading in 2 Seconds...

play fullscreen
1 / 17

Programming in Processing - PowerPoint PPT Presentation


  • 100 Views
  • Uploaded on

Programming in Processing. Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 2/13/08. Who are we?. We’re MIT students. Ms. Fischer. Ms. Yen. Ms. Madsen. Quick review of last week’s material: Remember that green  numbers, blue  names. void setup() {

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 'Programming in Processing' - yan


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
programming in processing

Programming in Processing

Taught by Ms. Madsen

Assistants: Ms. Fischer and Ms. Yen

Winsor School, 2/13/08

who are we
Who are we?
  • We’re MIT students.

Ms. Fischer

Ms. Yen

Ms. Madsen

quick review of last week s material remember that green numbers blue names
Quick review of last week’s material:Remember that green numbers, blue  names.

void setup() {

color colorName;

colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

rect(xStart, yStart, width, height);

ellipse(xStart, yStart, width, height);

}

review of rect
Review of rect()

#2: yStart

#1: xStart

#4: height

#3: width

rect(xStart, yStart, width, height);

review of ellipse
Review of ellipse()

#2: yStart

#4: height

#1: xStart

#3: width

ellipse(xStart, yStart, width, height);

rules for naming things for example colors
Rules for naming things (for example, colors):
  • The name…
    • Must start with a LETTER (not a number or symbol.)
    • Must not have any spaces.
    • Can’t be a special word, like ‘color’ or ‘size’ or ‘background’.
we can use fill to give color to our shape
We can use fill() to give color to our shape.
  • First, create a color, like we did for background:

color colorName2 = color(redValue2, greenValue2, blueValue2);

  • Then, call fill() with that color name as an argument:

fill(colorName2);

new material fill remember that green numbers blue names
New material: fill! Remember that green numbers, blue  names.

void setup() {

color colorName;

colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

color colorName2 = color(redValue2, greenValue2, blueValue2);

fill(colorName2);

rect(xStart, yStart, width, height);

ellipse(xStart, yStart, width, height);

}

we use stroke the same way as fill
We use stroke the same way as fill.
  • You can set the outline color of a shape by using stroke() with a color name.
  • All of the shapes will use the same stroke color until you change it.
  • Also, instead of giving a color name, you can just give the three RGB values directly instead. (You don’t have to create a color for each fill/stroke statement.)
  • So you can do this:

stroke(colorName3);

  • Or this:

stroke(redValue3, greenValue3, blueValue3);

new material stroke remember that green numbers blue names
New material: stroke! Remember that green numbers, blue  names.

void setup() {

color colorName;

colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

color colorName2 = color(redValue2, greenValue2, blueValue2);

fill(colorName2);

stroke(redValue3, greenValue3, blueValue3);

rect(xStart, yStart, width, height);

ellipse(xStart, yStart, width, height);

}

we can use strokeweight to change the thickness of our outline
We can use strokeWeight to change the thickness of our outline.
  • strokeWeight takes just one argument: a number that can have a decimal point (called a float, which stands for “floating-point decimal.”)
  • You can call strokeWeight before your shapes to make the outlines thicker or thinner.
  • The existing strokeWeight for all your outlines is 1, but you can change it by setting a different strokeWeight.
new material strokeweight remember that green numbers blue names
New material: strokeWeight! Remember that green numbers, blue  names.

void setup() {

color colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

color colorName2 = color(redValue2, greenValue2, blueValue2);

fill(colorName2);

stroke(redValue3, greenValue3, blueValue3);

strokeWeight(lineThickness);

rect(xStart, yStart, width, height);

ellipse(xStart, yStart, width, height);

}

what s the command to make triangles
What’s the command to make triangles?
  • triangle(), of course!
  • triangle() takes six arguments, which are coordinate pairs for the three corners of a triangle.
  • So the command looks like this:

triangle(x1, y1, x2, y2 , x3, y3);

here s what that looks like
Here’s what that looks like.

#4: y2

#2: y1

#6: y3

#1: x1

#3: x2

#5: x3

triangle(x1, y1, x2, y2 , x3, y3);

new material triangle remember that green numbers blue names
New material: triangle! Remember that green numbers, blue  names.

void setup() {

color colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

color colorName2 = color(redValue2, greenValue2, blueValue2);

fill(colorName2);

stroke(redValue3, greenValue3, blueValue3);

strokeWeight(lineThickness);

rect(xStart, yStart, width, height);

ellipse(xStart, yStart, width, height);

triangle(x1, y1, x2, y2 , x3, y3);

}

you can make custom shapes by using the beginshape command
You can make custom shapes by using the beginShape command.
  • The custom shape command starts with beginShape().
  • You then give the x, y coordinates of a series of vertices like this:

vertex(x, y);

vertex(x, y);

vertex(x, y);

vertex(x, y);

  • Finally, finish your shape with endShape().
  • You can also try using endShape(CLOSE) instead.
new material beginshape vertex endshape remember that green numbers blue names
New material: beginShape/vertex/endShape! Remember that green numbers, blue  names.

void setup() {

color colorName = color(redValue, greenValue, blueValue);

background(colorName);

size(width, height);

}

void draw() {

beginShape();

vertex(x, y);

vertex(x, y);

vertex(x, y);

vertex(x, y);

endShape(); // try using endShape(CLOSE) instead.

}