Author: mstropka@andrew.cmu.edu

sketch

//Name: Max Stropkay
//Andrew ID: mstropka@andrew.cmu.edu
//Section: E
//Final Project

//decalare variables for font, and audio file
var avenir;
var littlewing;

//array to store vehicle objects
var vehicles = [];

//diameter of circles
var diameter;

//store the value of the amplitude of the audio file
var amplitude;

//array to store the strings that make up the lyrics
//of the song
var lyrics = ['little wing', 'well','shes','walking','through',
  'the','clouds','with a', 'circus', 'mind', 'thats','running', 'round',
  'butterflies', 'zebras', 'moonbeams', 'fairytales',
  'thats all', 'she ever', 'thinks about', 'riding with', 'the', 'wind', 'when',
  'Im sad', 'she comes', 'to me', 'with a', 'thousand', 'smiles', 'she',
  'gives to', 'me', 'free','its alright', 'she said', 'its alright', 'take',
  'anything', 'you', 'want', 'from me', 'anything'];

//array to store the times at which the lyrics
//should appear on screen
var times = [34000, 500, 500, 3000, 500, 500, 2000, 200, 300, 3000, 500,
  500, 3000, 1500, 1500, 2000, 3000, 3000, 300, 300, 300, 2000, 4000,
  500, 500, 3000, 500, 500, 2000, 200, 300, 3000, 500,
  500, 3000, 1500, 1500, 2000, 3000, 3000, 300, 300, 2000, 300, 18000];

var word = -1;

//load soundfile and font
function preload() {
  littlewing = loadSound('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Jimi-Hendrix-Little-Wing.mp3')
  avenir = loadFont("https://s3.us-east-2.amazonaws.com/maxstropkayfinalproject/AvenirNextLTPro-Demi.otf");
}

function setup() {
  createCanvas(1200, 480);
  //play audio file,set volume
  littlewing.play();
  littlewing.setVolume(0.5);
  //set value of amplitude to the amplitude of audio
  amplitude = new p5.Amplitude(.04);
  updateLyrics();

}

function draw() {
  background(51);

  //for every vehicle run behaviors, update, and show
  for (var i = 0; i < vehicles.length; i++){
    var v = vehicles[i];
    v.behaviors();
    v.update();
    v.show();
  }

  //set diameter to be determined by the amplitude
  var level = amplitude.getLevel();
  var volume = map(level, 0, 1, 0, 200);
  diameter = volume;
}

//define Vehicle object
  function Vehicle(x, y) {
    this.pos = createVector(random(0, width), random(0, height));
    this.target = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.acc = createVector();
    this.r = 10;
    this.color = 255;
    this.maxspeed = 10;
    this.maxforce = 0.5;
  }

  Vehicle.prototype.behaviors = function(f) {
    var arrive = this.arrive(this.target);
    this.applyForce(arrive);
  }

  Vehicle.prototype.applyForce = function(f) {
    this.acc.add(f);
  }
  //move vehicles based on attraction to the
  //target location
  Vehicle.prototype.update = function() {
    this.pos.add(this.vel);
    this.vel.add(this.acc);
    this.acc.mult(0);
    this.r = diameter + 10*(random(0,1));
    this.color = color(diameter*random(0, 100), diameter*random(0, 5), diameter*random(0, 10));
  }
  //draw ellipses at x,y coordinates of objects
  Vehicle.prototype.show = function() {
    noStroke();
    fill(this.color);
    ellipse(this.pos.x, this.pos.y, this.r, this.r);
  }
  //change speed of object as it gets closer to
  //its target location
  Vehicle.prototype.arrive = function(target) {
    var desired = p5.Vector.sub(target, this.pos);
    var d = desired.mag();
    var speed = this.maxspeed;
    if (d < 100){
      var speed = map(d, 0, 100, 0, this.maxspeed);
    }
    desired.setMag(speed);
    var steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxforce);
    return steer;

  }
  //move object toward its desired position
  Vehicle.prototype.seek = function(target) {
    var desired = p5.Vector.sub(target, this.pos);
    desired.setMag(this.maxspeed);
    var steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxforce);
    return steer;

  }

//display the next word in the array lyrics
//at the time from the time array
function updateLyrics(){
  vehicles = [];
  word = (word + 1) /*% lyrics.length*/;
  print(word);
  textAlign(CENTER);
  textFont("Avenir")
  var points = avenir.textToPoints(lyrics[word], 70, 300, 192);
  //console.log(points)

  for (var i = 0; i < points.length; i++){
    var pt = points[i];
    var vehicle = new Vehicle(pt.x, pt.y);
    vehicles.push(vehicle);
    // stroke(0,255,0);
    // strokeWeight(4);
    // point(pt.x, pt.y);
}
print(times[word]);
setTimeout(updateLyrics,times[word]);

}

For my final project, I made a program that generates dots that change size and color based on the volume of the music thats being played in the background. The dots then fly to form the lyrics in the song. Syncing up the timing of the lyrics and the music was harder and more time consuming than I anticipated, so it only is synced for the first verse.

Attached is the zip file that contains the audio and the font that can be run on a local server.

mstropka_Final Project_E

To run, first open terminal and copy and paste in this line of code

python -m SimpleHTTPServer 8000

This will run a local server. Then type into the URL in your browser

localhost:8000

Then navigate to wherever you downloaded the file and click to run it.