Skip to content
zkobrinsky edited this page Feb 23, 2020 · 41 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, read about the history of loops in art and cinema. Check out the work of Saskia Freeke, beesandbombs, Etienne Jacoband Golan Levin's students.

Assignment:

The idea for this week is to use trigonometric functions and/or oscillating motion in a code sketch. This is barely a constraint and you should feel free to design your own exercise or pick from below. Don't hesitate to sketch your idea out on paper first and document in a blog post.

Oscillation

  • 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.

Polar Coordinate Designs

  • You can use polar coordinates a variety of patterns derived from the points along the contours of a circle. Visualize your own pattern. Feel free to start from any of these examples.
  • You might also google "parametric equations" to find one not in the examples above like this heart GIF.

The Fourier Transform and Epicycles

  • A fourier transform decomposes a "signal" into a series of wave patterns. Try applying the fourier transform to your own data and visualize the wave patterns.

Angles and Forces

  • 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.
  • 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.

Pendulums and Springs

  • String together a series of pendulums so that the endpoint of one is the origin point of another.
  • 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.
  • Visualize a double pendulum! video + 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 with a blog post link below.
  • Try to post by 5pm the day before class if at all possible.
  • Add a question below!

Questions

  • your question, your name
  • What's the difference between "PVector.sub(mouse, location);" and "mouse.sub(location);", bora

Post your work