1 / 17

Programming in Processing

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

yan
Download Presentation

Programming in Processing

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. Programming in Processing Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 2/13/08

  2. Who are we? • We’re MIT students. Ms. Fischer Ms. Yen Ms. Madsen

  3. 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); }

  4. Review of rect() #2: yStart #1: xStart #4: height #3: width rect(xStart, yStart, width, height);

  5. Review of ellipse() #2: yStart #4: height #1: xStart #3: width ellipse(xStart, yStart, width, height);

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

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

  8. 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); }

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

  10. 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); }

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

  12. 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); }

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

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

  15. 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); }

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

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

More Related