Lab-Programming 2

Part I

Shape Buttons

  1. Start with the TwoShape program we looked at in class
  2. Change the shapes to two of your own design (i.e. a triangle, oval or something else).
  3. Move the shapes buttons to the bottom of the page.
  4. Save As.. this sketch, naming it yourname-Shape

Color Swatches

  1. Start with this simple drawing program with two buttons. There are two square buttons at the bottom of the screen. When the user clicks on the buttons a simple message is printed to the console.
  2. Pick two colors from the Color Selector on the Tools menu. You will have to remember the R, G and B values or the hex code from the Color Selector.
  3. Turn these buttons into color swatches for the two colors you picked from the Color Selector. When the user clicks on a swatch, they will be able to draw in the color of that swatch. You will have to add 3 variables to store the red, green, and blue color levels to store the current color that is being drawn in.
  4. Save As.. this sketch, naming it yourname-Swatches

Create a Character to Animate

Create a simple 2-5 shape “character” that you will animate on the screen.

  1. Begin a New sketch in Processing.
  2. Design/Plan your character on a piece of paper. Compose the character out of shapes that you know how to draw in Processing.
  3. Pick a “reference” point on your character. Think of this point as the handle with which you will be able to move it around the screen. (In this TeddyBear example, the reference point is in the belly of the Teddy Bear.)
  4. Put your character in Processing so that is moves with the mouse at the reference. In Processing you will draw the shapes that make up your character around this reference point (using offsets etc…). Take a look at the source code for the purple teddy bear, notice that every ellipse shape uses the mouseX and the mouseY variables. The same should be for your shape
  5. Save As.. this sketch, naming it yourname-Character

Simple Animation

Take a look at this sketch. It moves the TeddyBear across the screen from the lower-lefthand corner to the upper-righthand corner.

  1. Check the example’s code to see how it performs this simple animation.
  2. Change your Character sketch so it performs a similarly simple movement.
  3. Save As.. this sketch, naming it yourname-Animation

Bonus Options

  • Have your character move around the screen a rectangular fashion
  • Have you character move around the stage in a circular fashion (hint: you will want to use the sin() and cos() triganometry functions).
  • Have your character move around the screen in a random fashion (look at the random() function).
  • Have your character move around the screen, but avoid the mouse. (You may want to use the dist() function to calculate the distance between the mouse and your character).

Part II

Try to duplicate each of these creations with your own code. The last one is the most challenging, but does not use any math beyond simple arithmetic to work its physics.

Part III

Snow Man

  1. Here is a sketch of a house. There is a Snow Man next to the house. Find the code for the Snow Man in the draw() function, and put that code into it’s own appropriately named function. Don’t add any parameters to your function (you will add them in the next step).
  2. Add two parameters to the SnowMan function so you can position the Snow Man anywhere in the sketch. Remember that parameters go in the parenthesis after the function name, and that each one needs to be defined like this:
    void functionName(int firstVar, float secondVar) {
  3. Be sure to add comments to your Snow Man function to document what the parameters do.
  4. This world is black and white and really boring! Add some color to the world by adding fill and stroke functions to your code
  5. Populate the sketch with at least 5 different snow men.
  6. Save As.. this sketch, naming it yourname-snowman

Your Own Function

  1. Add your own feature to the world! You might want to use a character you’ve already created, or devise a new feature. Be creative and colorful! Make your feature with at least 3 shapes.
  2. Put your feature into its own appropriately named function, and add at least 2 parameters to move it around the screen. Try to add a parameter to change the size of the character/feature.
  3. Add comments to your functions, include your name in those comments, and include descriptions what the parameters do in the function.
  4. Use your function in the sketch. Populate your sketch with at least 5 instances of your feature/character.
  5. Share your function with the class! Put the code for your function in the message body of an e-mail and send it to the class group mailing list.
  6. Save As.. this sketch, naming it yourname-myfunction

Sharing Functions

  1. Pick a function that someone else has mailed out, and copy the text of the function.
  2. Paste that function into your sketch. You may need to clean up the text if it got munged a little in the email system.
  3. Use this person’s function in your program and populate your sketch with at least 5 instances of it.
  4. Save As.. this sketch, naming it yourname-sharedfunction

Animated Function

  1. Make at least 1 of the characters/features in your world animate over time.
  2. Save As.. this sketch, naming it yourname-animatedworld