1 / 16

Programming in Processing

Programming in Processing. Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 3/5/08. Lots of stuff today…. So stay focused! We’re going to go through each thing pretty quickly, but they’re all in your handout In Great Detail. Cool things we’re learning today:

royce
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, 3/5/08

  2. Lots of stuff today… • So stay focused! • We’re going to go through each thing pretty quickly, but they’re all in your handout In Great Detail. • Cool things we’re learning today: • Writing text to the screen • Making your animations “fade” • Using information from the mouse • Making randomly generated numbers

  3. Adding text to your program • We use three commands to put text on the screen: • createFont • lets us make a PFont. • textFont • lets us pick PFont and size. • text • lets us set a String, an xStart, and a yStart.

  4. We’ll use red for strings - (“Strings look like this”) (and green for numbers and blue for names, as usual.) PFont newFont = createFont(fontName); textFont(newFont, fontSize); text(screenText, xStart, yStart); Here are some font names. They’re in your handout: Arial, Book Antiqua, Century Gothic, Century Schoolbook, Curlz MT, Georgia, Gill Sans MT, Goudy Stout, Impact, Papyrus, Perpetua, Tahoma, Times New Roman, Tw Cen MT

  5. So, you’ll add something like this to your code: PFont newFont = createFont("Times New Roman”); textFont(newFont, 16); text(“hello world!”, 150, 100); Every time you want to add more text, add another textstatement. Only use createFont and textFont when you want to change fonts.

  6. Let’s print text to the screen. void setup() { size(width, height); background(colorName); } void draw() {... PFont newFont = createFont(fontName); textFont(newFont, fontSize); text(screenText, xStart, yStart); } Here are some font names. Don’t forget the “” around the name: Arial, Book Antiqua, Century Gothic, Century Schoolbook, Curlz MT, Georgia, Gill Sans MT, Goudy Stout, Impact, Papyrus, Perpetua, Tahoma, Times New Roman, Tw Cen MT

  7. How do we ‘fade’ during our animations? • We use the ‘opacity’ concept we were talking about before. • Instead of the ‘background’ call at the beginning of draw(), we’re going to create a semi-opaque rectangle.

  8. How do we fill a shape with a semi-opaque color? 1. Create a normal color… 2. …then set the fill opacity to something less than 255. color myColor = color(255, 100, 0); fill(myColor, 50); Opacity – between 0 and 255. (255 is default.)

  9. How do we create a rectangle the same size as our window? width and height in draw() are automatically defined as whatever width and height the window currently is. So this will always create a rectangle the same size as our window: rect(0, 0, width, height);

  10. To create the ‘fade’ effect, add these lines to the beginning of draw():(and get rid of the background() command, too) color myColor = color(255, 100, 0); fill(myColor, 50); rect(0, 0, width, height); Making this BIGGER (more opaque) will make the shape fade FASTER.

  11. How do we get information from the mouse? Most of the time, we just need mouseX and mouseY. mouseY mouseX

  12. You can use these in draw() for the xStart and yStart of a shape, for example, or for RGB values. Try adding a couple of lines like this to draw(): ellipse(mouseX, mouseY, 50, 70); fill(mouseX, mouseY, mouseX, mouseY); background(50, 50, mouseX + mouseY);

  13. Another thing we can use is a new method called mousePressed(). • setup() is called just once, at the beginning of a program… • draw() is called a certain number of times per second… • … and mousePressed() is called whenever the mouse is clicked by the user.

  14. The mousePressed method looks like this: void mousePressed(){ } Here are some things you could put inside it: foo = 10; // from last week’s project change = -1; // from last week’s project ellipse(50, 50, 10, 10); // will work better with ‘fade’ effect ellipse(mouseX, mouseY, 10, 10); // will work better with ‘fade’ effect

  15. Using random() • To get a random number between 0 and end: random(end); • To get a random number between beginand end: random(begin, end);

  16. Try using random() in your shapes or your color declarations. Like this: fill(255, 0, random(255)); stroke(random(200, 255), 0, 0); strokeWeight(random(5)); ellipse(random(width), 100, random(50), random(50));

More Related