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.

For my project I would like to create a music visualizer that takes the lyrics from a song and changes the location and form of the letters based on the audio data from a file. I also think it would be interesting to add interaction between the letters and the mouse to make the program more interactive and interesting for the user. The best format for this, I think, would be a long scrolling line of text that is the lyrics of the song that get altered as the music goes on. 

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    strokeJoin(MITER);
    strokeCap(PROJECT);

}

function mousePressed(){

  drawturtles(mouseX, mouseY);

}

function drawturtles() {
  var t1 = makeTurtle(mouseX + 20, mouseY);
  var t2 = makeTurtle(mouseX - 20, mouseY);
  var t3 = makeTurtle(mouseX, mouseY + 20);
  var t4 = makeTurtle(mouseX, mouseY - 20);

  t1.penDown;
  t2.penDown;
  t3.penDown;
  t4.pendown;
  for(var i = 0; i < 480; i++){
    stroke(random(0,255),0,0);
    t1.forward(random(0,40));
    t1.right (random(0, 180));
    t1.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t2.forward(random(0,40));
    t2.right (random(0, 180));
    t2.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t3.forward(random(0,40));
    t3.right (random(0, 180));
    t3.forward (random(0,40));

    stroke(random(0,255), random(0,255), random(0,255));
    t3.forward(random(0,40));
    t3.right (random(0, 180));
    t3.forward (random(0,40));


  }
}
function draw() {
  }


  function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
  function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
  var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
  this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
  function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
  if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
  line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
  return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
  var absAngle=degrees(atan2(y-this.y,x-this.x));
  var angle=((absAngle-this.angle)+360)%360.0;return angle;}
  function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
  this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
  function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
  this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
  angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
  right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
  penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
  turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
  setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
  return turtle;}

For this week’s assignment, I made a program in which four turtles are drawn around the mouse when it is clicked. They move forward and right by random increments until they move off of the canvas.

https://blog.twitter.com/official/en_us/a/2013/the-geography-of-tweets.html

For this week’s looking outward assignment I looked at Asher Blackburn’s looking outwards 7, which is a visual map of where people have tweeted from. This caught my eye for the same reasons that he wrote about in his looking outwards post in that the concept is very simple, but the resulting image is incredibly complex and interesting. The map has billions of points from months of data collection and when all of these points are plotted, the map begins to raise questions. For example, after looking at the map in detail you start to wonder about why certain areas send more tweets than others, why one person is sending a tweet in the middle of nowhere, and what is the content of these tweets.

It would be very interesting if the map were able to link to the tweets that were sent out at these locations. Looking at the map, I am very curious what users are sending out at these locations and times. I would like to be able to look more in depth and answer some of these questions with the help of the map.

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/j59r16x.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    print("made");
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(20);
}

function draw() {
var size = 20;
    for(var i = 0; i < 480; i+=10){
      for(var j = 0; j< 480; j+=10){
        fill(underlyingImage.get(i, j));
        ellipse(i+random(-10,10), j+random(-10, 10), size ,size);
      }
    }


}

For my project I took a picture of my friend and replaced every pixel with an ellipse that is filled with the color of the underlying picture. This gives the image a sort of painterly feel. Then I made the ellipses move randomly to give the image a sense of movement.

This is one project from a data visualization firm called Variable. Nike hired the designers at Variable to create a data visualization for the data collected from one of their products, Nike Fuel. The video explains the process of moving from the raw data that the team received from these devices to these plant like organic forms. I think that this approach to data visualization is very interesting because the visualizations themselves don’t necessarily make the data readable in any useful way like a graph or a chart would. Instead, they create a sort of artistic expression of the data. My favorite part of this project is that each visualization was created with data from one person, and the colors and shape of the virtual strands are personalized to the athletes. This makes these visualizations sort of like self portraits of the athletes who’s data was collected.

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project_07

var nPoints = 1000;
function setup() {
  createCanvas(480, 480);


}
function drawEpicycloid(){
  // x = (R+r)cos theta - r cos((R+r)/r)theta)
  // y = (R + r)sin theta - rsin(((R+r)/r)theta)

  var R = 100 //radius of large circle
  var r = 10 //radius of small circle
  var a = mouseX //take values of mouse x
  var b = mouseY //take values of mouse y

  //draw curve in center of screen
  push();
  translate(240, 240)
  noFill();
  strokeWeight(.01);

  //draw curve
  beginShape();
  for(var i = 0; i < nPoints; i++){

    var t = map(i, 0, nPoints, 0, TWO_PI);

    var x = (a + r)*cos(t) - (r)*cos(((a + b)/r)*(t))
    var y = (b + r)*sin(t) - (r)*sin(((a + b)/r)*(t))

    //points of curve will be drawn at somewhere within 50 pixels of (x,y)
    vertex(x + random(-50, 50),y + random(50, - 50));
  }
  endShape(CLOSE);
  pop();
}

function draw(){
  drawEpicycloid();
}
//redraw background if the mouse is pressed
function mousePressed(){
  background(255);
}

For this assignment, I used the equation for an epicycloid with the mouse’s location driving certain variables to change the shape as the mouse moves. I can’t say I understand the equation for this type of curve that well so I just started substituting the mouseX and mouse Y value for random variables in the equation until I got something that looked cool. I also added a random value to the x and y coordinates of the points that the program draws.

Here is a screenshot from before I added the random values to the x and y coordinates.

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(480,480);
    angleMode(DEGREES);
}

function draw(){
  background(225);
  //variables for hours, minutes, and seconds
  h = hour();
  m = minute();
  s = second();

  //display text under clock
  text(h%12 + ':' + m + ':' + s, 220, 400);
  //rotate entire canvas -90 degrees so 0 degrees is pointing up
  push()
  translate(width/2, height/2);
  rotate(-90);
  //draw arc
  strokeWeight(2);
  //end of arc is defined by the value of seconds
  var sAngle = map(s, 0, 60, 0, 360);
  fill(255, 51, 51, 40);
  arc(0, 0, 250, 250, 0, sAngle);

  //draw a smaller arc where the end is defined by the value of minutes
  var mAngle = map(m, 0, 60, 0, 360);
  fill(51, 153, 255, 50);
  arc(0, 0, 200, 200, 0, mAngle)

  //instead of mapping the value of hours, map the value of h%12,
  //so 12 hours fits into 360 degrees instead of 24
  //draw arc where the end point is defined by h % 12
  var hAngle = map(h % 12, 0, 12, 0, 360);
  fill(128, 128, 128, 70);
  arc(0, 0, 150, 150, 0, hAngle)

  pop();

}

For this project, I started with the code I used for assignment C, which drew arcs that formed completed circles as the values for hours, minutes, and seconds increased. In the assignment I hid the arcs and drew lines that pointed to the endpoints to create the hands of a clock. For this, I got rid of the hands and filled in the arcs with transparent colors.

Artist Jason Salavon made these digital works of art that appear to depict blurred out women. The women depicted are actually an amalgamation of all of the Playboy centerfolds from each decade. He creates these images by inputting all of the data from the centerfolds into an algorithm that averages all of the images. You could look at the data from the centerfolds as random information. His algorithm organizes this “random” data to create the image. It is particularly interesting to see these works next to each other because, despite the blurriness of the image, you can see a pattern of how the centerfold girls have become whiter and thinner over the years. This creative method of data visualization makes a statement about how people’s concept of attractiveness and beauty have changed over the last couple decades.

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-05

var spacing = 120;
var x = 0; //initial x value
var y = 0; //initial y value


function setup() {
    createCanvas(480, 480);
    background(220);

    for(x = 0; x <= 5; x += 1){
      for(y = 0; y <= 5; y = y+1){
        var xpos = x * spacing;
        var ypos = y * spacing;
        if(y % 2 == 1){
          xpos -= 60;
          //defining each triangle that makes up the hexagon
          noStroke();
          fill(random(0,225));
          triangle(xpos+30,ypos, xpos, ypos+60, xpos +60, ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos,xpos+60,ypos+60,xpos +90,ypos);
          fill(random(0,225));
          triangle(xpos+90,ypos,xpos+120,ypos+60,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos,ypos+60,xpos+30,ypos+120,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos+120,xpos+60,ypos+60,xpos+90,ypos+120);
          fill(random(0,225));
          triangle(xpos+60,ypos+60,xpos+90,ypos+120,xpos+120,ypos+60);
        }else{
          noStroke();
          fill(random(0,225));
          triangle(xpos+30,ypos, xpos, ypos+60, xpos +60, ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos,xpos+60,ypos+60,xpos +90,ypos);
          fill(random(0,225));
          triangle(xpos+90,ypos,xpos+120,ypos+60,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos,ypos+60,xpos+30,ypos+120,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos+120,xpos+60,ypos+60,xpos+90,ypos+120);
          fill(random(0,225));
          triangle(xpos+60,ypos+60,xpos+90,ypos+120,xpos+120,ypos+60);
          //ellipse(xpos, ypos, 120, 120)


        }


      }
    }
}

For this project I used a hexagonal grid and drew each hexagon as triangles with a random black and white value assigned.