1 / 16

More with Processing: Text and Animation

More with Processing: Text and Animation. Console Printing. Prints to the small output window on the Processing application print(“Hey!”); print(x); To go to the next line: println (“Hey – go down a line!”);. Fonts. Probably, you want to type to the applet window.

malia
Download Presentation

More with Processing: Text and Animation

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. More with Processing: Text and Animation

  2. Console Printing Prints to the small output window on the Processing application print(“Hey!”); print(x); To go to the next line: println(“Hey – go down a line!”);

  3. Fonts Probably, you want to type to the applet window. We need to create a .vlw font Go to Tools -> Create Font Find the one you like In your sketch folder you will see a folder named data, and in it is your font file.

  4. Text writing commands Whatever your font is named My message will be red! Draw it at (100,100) Pfont font; font = loadFont("ACaslonPro-BoldItalic-48.vlw"); textFont(font); fill(255,0,0); text(“Hello!”, 100, 100);

  5. Text size A font used at the same size it’s created looks best. But you can change the size of your text: textSize(12); If we need to know how wide our message is, we can type float width = textWidth(“My message”);

  6. Follow the Mouse use mouseX and mouseY to draw instead and watch the text follow the mouse! text("Hello!", mouseX, mouseY);

  7. Animation We can animate our message by changing the x,y values of where we write the text. Keep the current values of x,y outside the methods so that I can access them at any point.

  8. // Make all the variables I need floatx = 100; floaty = 100; PFont font; // This happens once void setup(){ size(400,400); font = loadFont("ACaslonPro-BoldItalic-48.vlw"); textFont(font); } // This happens over and over void draw(){ background(255,255,255); fill(255,0,0); x=x+1; y=y+1; text("Hello!",x,y); }

  9. Background drawing What happens if I move the background line to the setup method? Try it!

  10. Keep it in bounds Use an if statement: if(x > 400){ x = 0; } Means: if the x variable is bigger than the width of the screen, reset it to 0. Do this for y also.

  11. Your turn Can you change the code so that it wraps around when the right-most edge of the text is off screen rather than the left-most edge? Hint: Use textWidth!

  12. Bounce Let’s make the word bounce around rather than wrap. To do this we will use the idea of a velocity – how many pixels the word moves in each direction. Add variables near x and y for dx and dy. Change the code that moves the words to x = x + dx; y = y + dy;

  13. Bounce What should happen to the velocity when a boundary is hit? Can you write the if statements?

  14. More if statements And : && if (x<0 && y < 0){ Or: || if ( x < 0 || y < mouseY){ What do you think it does? if (y>400 || mousePressed){ dy = dy * -1; }

  15. And more… if(x<300){ x = x + dx; } else{ x =x – dx; }

  16. Can you… Make the word move faster with each bounce? Write on the screen how many times the bounce happens? Make the text change color when it bounces? Make it follow the mouse when the button is pressed, but bounce otherwise?

More Related