More Animation Fun

This week, I wasn’t really sure what I felt like making for my Computational Media assignment. I spent hours watching coding train videos about everything from flow to genetic algorithms but nothing felt right. I began doing some more research for inspiration and came across this animation. I decided to use this animation as a possibility for my final outcome.

Thinking about how the person created the concaving lines, it seemed that they used a series of points that acted as lines and then used sinusoidal functions to have them converge in the middle of each line. I spent some time trying to work this out for myself but realized that I had not begun to code anything. This being so I decided to just start programming and see where it went.

 Initial animation

Initial animation

After working from this initial animation I decided to try to work with the circle pattern I created in the center. The point of this homework assignment was to work with arrays, classes, and objects so I knew that I had to keep those constraints in mind. I moved the lines being created into a new class and began restructuring the rest of my program around it.

Below are two videos of the final version of the assignment.

The first video shows the animation show the rotation around -pi/8 while the second shows the rotation around pi/4. This change is triggered when the mouse is pressed.

This program was a lot more playing around with numbers and angles than having a set plan for the program. I plan to work on this type of animation further on and work to move past my own limitations in terms of my understanding classes and array management.

You can see the final sketch here: sketch

CODE

/*
ICM HW 5 - Morgan Mueller
This homework takes  the basic idea of last weeks assignment and works 
//with sinusoids again. Using arrays, a class, and objects I created 
//an animation that takes a set of lines and rotates them around 
//an axis in a motion that is somewhat hypnotic
*/


let lines = [];
let t = 0;

function setup() {
  createCanvas(400, 400);

  //create 25 line objecs and add them to the arrya
  for (i = 0; i < 25; i++) {
    lines[i] = new Lines(i);
  }
}

function draw() {
  background(0, 10);
  translate(width / 2, height / 2);
  stroke(255, 20);
  //create the effect on all objects in the array
  for (i = 1; i < 25; i++) {
    lines[i].effect(t);
  }

  //increment the speed 
  t += 0.05;
}

class Lines {

  //constructor function
  constructor(numLines, speed, angRotate) {
    this.numLines = numLines;
    this.speed = speed;
    this.angRotate = angRotate;
  }

  //run function
  run() {

    this.effect();

  }

  // The effect function contains the code for drawing the lines and 
  //performing the calculations on rotate 
  effect(speed) {

    //sets the rotation depening on if the mouse is pressed
    if (mouseIsPressed) {
      this.angRotate = PI / 4;
    } else {
      this.angRotate = -PI / 8;

    }

    //draws the lines and rotates the positions.
    line(this.x(speed * this.numLines), this.y(speed * this.numLines), 0, height / 2);

    //not totally sure why this function causes the randomness that it does
    rotate(this.angRotate * cos(speed * 0.1) + this.angRotate);

    line(this.x1(speed * this.numLines), this.y1(speed * this.numLines), 0, height / 2);

  }


  /*
  this group of functions
  */

  x(t) {

    return sin(t / 30) * 100;

  }

  y(t) {

    return cos(t / 30) * 100;

  }

  x1(t) {

    return sin(t / 50) * 50;

  }

  y1(t) {

    return cos(t / 50) * 50;

  }

}