Skip to content
zarak5 edited this page Feb 27, 2018 · 39 revisions

For all of the ideas below, consider making a GIF "loop" of your sketch. In other words, render out a number of frames where the last frame matches the first. Using sin() / cos() with a range between 0 and some multiple of TWO_PI is a particularly effective way of doing this. Golan Levin's loop templates will help. Here's a simplified p5.js loop template in the web editor.

Looping GiF

For more inspiration, check out beesandbombs.

Assignment: Choose one or create your own.

  • Design a creature with oscillating parts (legs, wings, antennae, etc.) Consider tying the speed of oscillation to the speed of the creature's linear motion. Can you make it appear that the creature's internal mechanics (oscillation) drive its locomotion? Example solution.
  • Experiment with polar rose patterns, video tutorial, code
  • Create a simulation where objects are shot out of a cannon. Each object should experience a sudden force when shot (just once) as well as gravity (always present). Add rotation to the object to model its spin as its shot from the cannon. How realistic can you make it look? example solution
  • Create a simulation of a vehicle that you can drive around the screen using the arrow keys: left arrow accelerates the car to the left, right to the right. The car should point in the direction it is currently moving.
  • Simulate the spaceship in the game Asteroids. In case you aren't familiar with Asteroids, here is a brief description. A spaceship (represented as a triangle) floats in two dimensional space. The left arrow keys turns the spaceship counter-clockwise, the right clock-wise. The space bar applies a “thrust“ force in the direction the spaceship is pointing. example solution.
  • String together a series of pendulums so that the endpoint of one is the origin point of another.
  • Use trigonometry to model a box sliding down an incline with friction. Note that the magnitude of the friction force is equal to the normal force.
  • Using the Spring example as a basis, create a system of multiple bobs and spring connections. How would you have a Bob connected to a Bob with no fixed anchor? (Sample Answer 1, Sample Answer 2)
  • Apply other forces (liquid drag, wind) to the spring or pendulum simulations.
  • Research and implement a simulation of Torque.
  • Visualize a double pendulum! video tutorial, [p5.js code], demo, code

Oscillation in other mediums

  • Oscillating colors? sizes? number of elements on the screen?
  • Use oscillation to control the timing of events on the screen: sounds, the appearance and disappearance of elements.
  • Create polyrhythms with different oscillating patterns that come in and out of phase with each other.
  • Create oscillating pitch patterns in sound.
  • Oscillate playback position or speed of a video.

Directions

  • Document your work on the web and link to it below.
  • Try to post by 10am the day of class if at all possible.
  • Add a questions below!

Questions

  • your question here -- your name (optional)

    • an answer will appear here
  • I noticed some strange behavior in the perfect loop gif template and was wondering if anyone else experienced this / can replicate it. If I comment out the bit of code at the bottom of the sketch.js file that was responsible for the visual feedback (i.e. the red text in the top left that indicates the percentage), the export no longer starts from the first frame and the resulting gif won't loop properly. -- Dominick

Post your work