Movement and animation

Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-3/embed

Bit more about variables

Often for animating things we need to store some values in variables. Variables were introduced in the last class but the video below recaps the key concepts and introduces a new topic: variable scope.

Animations with trigonometric functions

The video below shows how to use the sin() function for animations.

For circular motion, you can use the sine function for calculating the x coordinate and cosine function for calculating the y coordinate (note, that cos(a) is the same as sin(a + PI/2)):

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255, 10);
  let x = width / 2 + sin(frameCount * 0.05) * height * 0.4;
  let y = height / 2 + cos(frameCount * 0.05) * height * 0.4;
  ellipse(x, y, 100);
}

Changing the ratio between the parameters of the sine and cosine functions can produce more complex patterns. In the example above, the relationship between the frequencies of the vertical and horizontal sinusoidal inputs is 1:1: Both x and y coordinates are calculated with same value: frameCount * 0.05. In the example below, the ratio of the sinusoidal inputs is 1:3 (frameCount * 0.05 and frameCount * 0.05 * 3), producing a pattern with tree "lobes". These patterns are called Lissajous curves. Rational ratios produce closed (connected) or "still" figures, while irrational ratios produce figures that appear to rotate.

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255, 10);
  // Here the ratio between parameters of the sinusoidal functions is 1:3
  let x = width / 2 + sin(frameCount * 0.05) * height * 0.4;
  let y = height / 2 + cos(frameCount * 0.05 * 3) * height * 0.4;
  ellipse(x, y, 100);
}

Coordinate transformations

For rotating, scaling and moving things around we can move the coordinate system around to make things a bit easier. The video below shows how and here's also a great resource: https://genekogan.com/code/p5js-transformations/.

function setup() {
  createCanvas(800, 800);
  rectMode(CENTER);
  noFill();
  strokeWeight(10);
  stroke(255);
}

function draw() {
  background(0);
  let rx = (sin(frameCount * 0.01) + 1) * (width / 2);
  let ry = height / 2;
  rect(rx, ry, 600);

  let ex = (sin(frameCount * 0.01 + PI) + 1) * (width / 2);
  let ey = height / 2;
  circle(ex, ey, 600);

  push();
  translate(width / 2, height / 2);
  rotate(frameCount * 0.01);
  triangle(0, -300, -300, 300, 300, 300);
  pop();
}

Assignment

Use the concepts above and create an animated composition in p5. You can follow the following steps for inspiration if you wish:

• Define two colors for you composition.
• Draw three to five basic shapes on the canvas.
• Use trigonometric functions and coordinate transformations to animate the position, scale and/or rotation of the shapes.
• Use the two colors and background, stroke, fill, and strokeWeight methods for coloring your composition and for exploring negative shapes that emerge from the overlapping shapes.

If you wish, you can also use the composition created in the previous class as your starting point.

Submit a p5js.org link to your sketh on MyCourses.