HW 5 | Animation, Variables, & Simple Math

Using the draw() function, create a sketch that changes over time! This sketch can take one of two directions;

1. You can create a character of some sort (similar to last week) that moves
2. You can create an abstract image that changes over time.

Remember, the key to creating a dynamic sketch is to have function arguments that change overtime, between subsequent iterations of the draw() loop.

Specs:

This sketch should include (all of these):

• Obvious change over time (animation).
  • This means that the “meat” of your work will be in the draw() function.
  • You will need to use the setup() function to “setup” your sketch. This includes;
    • createCanvas()
• Your sketch should leverage variables to store data, alter data, and pass data around.
  • Remember, you use the var keyword to define a variable symbolic name.
  • Remember, variable naming conventions and style guides.
    • w3schools variable tutorial
    • multi-word conventions
  • Pay attention to “scope”.
    • i.e. where you define a variable and how it is used.
    • Remember, variables defined outside of setup() and draw() are available globally.
    • Variables defined in scope and draw are only available to the function they are in.
    • Variables defined inside draw() will be reset every loop.
      • i.e. The following will result in the value 2 every time;

draw(){
    let incrementingNumber = 1;
    incrementingNumber = incrementingNumber + 1;
}

• Your sketch should include, 1 element that changes over time, independently of the mouse (i.e. use variable math).
• Your sketch should include, 1 element controlled by the mouse.
  • mouseX
  • mouseY
• Your sketch should include, 1 element that is in relation to the canvas size.
  • You will need to use the width and/or height environment variables to do this.
• Your sketch should also follow the style, naming, and readability guidelines presented this week.

You should also continue to use the skills, functions, and techniques presented in the previous week. This will be necessary to complete the assignment (but you will not be graded for the inclusion).

As always, include lots of comments about what each section, does, or is trying to do.

Submission

As always, you should create a new hw-5/ directory, in the top level of your git repo. You will provide links to both the;

• live sketch
• homework repo directory

Example

As an example, look at the “Creepy Spinning Variable Person” from the simple math.