Author: Sara

Sara Frankel – Final Project

sketch

// Sara Frankel
// Final Project
// sfrankel
// Section A

var liftYourself;
var shostyTen;
var liftArray;
var fft;
var greatestWave;
var isPlaying;
var greatestOverall = 0;
var isLiftYourself;

function preload() {
    shostyTen = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/shostakovich-symphony-no-10-mvt-2-gianandrea-noseda-london-symphony-orchestra.mp3");
    liftYourself = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/Lift-Yourself.mp3"); 
}

function setup(){
    var cnv = createCanvas(400, 400);
    cnv.mouseClicked(togglePlay); //plays the canvas when clicked
    fft = new p5.FFT();
    liftYourself.amp(0.2);
    shostyTen.amp(1);
    isPlaying = false;
    isLiftYourself = true;
}

function draw(){
    background(0);
    var spectrum = fft.analyze(); //uses FFT to use the "spectrum" of sound (i.e. the eyebrows)
    var waveform = fft.waveform(); //uses FFT to use the waveform of the sound (i.e. the squiggled hair)
    noStroke();
    
    //draw variable to keep track of the greatest wave to give the "pulse" effect
    greatestWave = 0;
    for (i = 0; i < waveform.length; i++) {
        if(waveform[i] > greatestWave) {
            greatestWave = waveform[i];
        }   
    }
    //takes greatest overal wave value and stores it as greatest wave
    if(greatestWave > greatestOverall){
        greatestOverall = greatestWave;
    }

  
    //uses map use the value of the greatest wave of the sound and put it on a scale for color
    fill(map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 0, 0));
    

    //draws the "hair" of the eyebrow when turned on
    //left eyebrow
    for (var i = 0; i < spectrum.length; i++){
        var x = map(i, 0, spectrum.length, 0, width / 3); //maps i on the length of the spectrum variable
        var h = -height + map(spectrum[i], 0, 255, height, 0); //maps position in the spectrum array to allow height
        rect(x + width * 0.75 - 50, height / 4 + 35, width / spectrum.length, h / 4);
    }
    //right eyebrow
    for (var i = 0; i < spectrum.length; i++){
        var x = map(i, 0, spectrum.length, width / 3, 0);
        var h = -height + map(spectrum[i], 0, 255, height, 0);
        rect(x + 15, height / 4 + 20, width / spectrum.length, h / 4);
    }

    //draws base of eyebrows
    stroke(255);
    line(width / 4, height / 4 + 20, width / 4 + 50, height / 4 + 20);
    line(width * 0.75 - 50, height / 4 + 35, width * 0.75, height / 4 + 35);

    noFill();
    //draw eyeballs
    var y = map(greatestWave, -1, 1, 0, height); //allows for the eyes and head to pulse
    ellipse(width / 4 + 20, height / 4 + 60, y / 3, y / 3);
    ellipse(width * 0.75 - 20, height * 0.25 + 60, y / 6, y / 6);
    //draws head
    ellipse(width / 2, height / 2, y * 1.5, y * 1.5); 

    //calls that if the audio is playing, the color of hair and eyes change to the music
    if(isPlaying) {
        fill(map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 255, 0));
        stroke(map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 255, 0));
    } else {
        noFill();
        stroke(255);
    }

    //uses drawHairAtAngle function to draw the hair on the head that follows the pulse of the head (stays in spot with music)
    drawHairAtAngle(-14 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-12 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-10 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-8 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-6 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-4 * PI / 18, y * 0.75, waveform);

    //allows eyes to follow mouse, drawing eyeballs
    var eX = map(mouseX, 0, y, -1, 1); 
    var eY = map(mouseY, 0, y, -1, 1);
    ellipse(eX + width / 4 + 20, eY + height / 4 + 60, 40, 40);
    ellipse(eX / 2 + width * 0.75 - 20, eY / 2 + height * 0.25 + 60, 20, 20);

    //states that if playing, the color of the mouth and eyebrows change color
    if(isPlaying) {
        stroke(map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 0, 0));
    } else {
        stroke(255);
    }

    //draws mouth
    for (var i = 0; i < waveform.length; i++){
        var x = map(i, 0, waveform.length, width/4, width * 0.75);
        var y = map(waveform[i], -1, 1, 0, height);
        line(width / 2, y + 50, x, height / 2 + 50);
    }

    //displays instructions of the canvas and which song is playing
    stroke(255);
    noFill();
    text('Click to play or pause - Press space to change song', 60, 15);
    if(isLiftYourself) {
        text("Kanye West - Lift Yourself", width - 150, height - 10);
    } else {
        text('Dmitri Shostakovich - Symphony No. 10 Second Movement', width - 360, height - 10);
    }
}


// fade liftYourself if mouse is over canvas
function togglePlay() {
    //if statement that allows for each song to play and not overlap another and still alows for the click to play/stop to work
    if(isLiftYourself){
        if (liftYourself.isPlaying()) {
        liftYourself.pause();
        isPlaying = false;
        } else {
            shostyTen.pause();
            liftYourself.loop();
            isPlaying = true;
        }
    } else {
        if (shostyTen.isPlaying()) {
            shostyTen.pause();
            isPlaying = false;
        } else {
            liftYourself.pause();
            shostyTen.loop();
            isPlaying = true;
        }
    }
}

//object that helps to draw the hair along the head
function drawHairAtAngle(angle, rad, waveform) {
    beginShape();
    for (var i = 0; i < waveform.length; i++) {
        //uses map to place the hairs along the radius of the circle evenly spaced
        var hairY = map(i, 0, waveform.length, sin(angle) * rad + height / 2, sin(angle) * (rad) + height / 2 - 25);
        var hairX = map(waveform[i], -0.5, 0.5, cos(angle) * (rad - 25) + width / 2, cos(angle) * (rad + 25) + width / 2); 
        vertex(hairX, hairY);
    }
    endShape();
}

//function to switch songs if space bar is clicked
function keyTyped() {
    if(key === ' ') {
        isLiftYourself = !isLiftYourself;
        togglePlay();
    }
 }

For this project, I decided to visualize music. My first vision at this project was something more abstract, but as I was creating the project I felt it to be more fun to have a face. This face visualizes music in the sense that all aspects of it “dance” to the music. The eyebrows raise, the hair squiggles, and the mouth draws lines to give the effect of singing. What I wanted to prove in this project is that not only is Kanye West “boppable” to, but so can classical music. The image posted below is a screen shot taken from the Shostakovich.

The instructions for this project are:
To play click the canvas
To change the song click space
To dance along (with the eyes) move the mouse!

Hope you enjoy!

if code does not work correctly, here is the zip.file for it!
https://drive.google.com/file/d/1O-X48r1iUjrtR_PWghS4f_l9hLtnG8Vf/view?usp=sharing

Looking Outwards Week 12 – Sara Frankel

Looking through my peers’ posts, I found that Jenna Kim’s Week 10 and Sean Meng’s Week 4 Looking Outwards are quite similar to my project. I hope to capture the shape and colors of music. Jenna wrote about Christopher Yamane’s “wassiliscope”. This project uses a telescope to translate light frequencies to audible frequencies. In other words, this artist brings forth the sound and correlation of the color portrayed.

Sean talks about pop artist Ed Sheeran’s visualization of his song “Shape of You”. Ed Sheeran uses colors and geometric shapes to fill his backdrop of his music video allowing the viewer to follow along and experience the mood of the music visually.

Ed Sheeran’s creative process explained with music visualization

This is relevant to my project as I hope to incorporate visuals connected to music to help enhance the users experience in understanding the music, which both projects do. I admire these projects as, a music major, I experience more of the entire musical experience. I would love to be able to share this with other people in terms of how I feel and see the music.

Week 12 – Project Proposal Sara Frankel

For my project, I would like to incorporate a game with music. I have always loved projects that interact with music. I would be lying if I said I know exactly how my project will look as of right now, but I am thinking of using some sort of animation that is coordinated with a soundtrack. For instance, color tones match the “mood” of the piece and the shape represent the different musical aspects of it. On the other hand, I want to take advantage of the user’s keyboard so that they can play a part of the visual experience of sound. I attached an image of my sketch that I am envisioning. As you can see below, my plan is to have this abstract image most correlated with the piece in both color and shape, this shape will change in shape according to the frequencies emitting from the song. Scattered around this main shape will be simpler shapes that “pulse” and rotate according to different aspects of the piece. The user will be able to play around with all of these shapes and change the song and aspects of it on the color chosen by the user. This project connects color, sound, and shapes to display music.

Looking Outwards 11 – Sara Frankel


Caption: Each tree resembles a different city and visualizes the beautiful, unique music each produces.

For my looking outwards, I decided to explore what my peers have discussed. Arden Wolfe discusses The Sonumbra de Vincy. This light visualization, in my opinion illuminates the music of the city each “tree” represents. Each tree takes the sounds of bustling cities around the world and interprets them visually. While yes, you can argue there is no physical or computational sound, if you look deeper at the interpreted lines, you will hear the music and harmonies of each respective city. In music, a lot of times the most meaningful moments are the spaces between the notes. In this case, it is the drawing of the lines and the shapes of the trees that sing the music of each city. This is what I love about this project, is the artist’s ability to take music so abstract of a bustling city, and algorithmically display them for others to see what he sees and feels “between the notes”.

Sonumbra de Vincy


Here is a link to the project’s website.

Project 11 Composition – Sara Frankel

sketch

var terrainSpeed = 0.00025; 
var terrainDetail = 0.001; 

function setup() {
    createCanvas(400, 200);
    frameRate(20); 

}

function draw() {
    background('lightblue');

    fill('orange');
    ellipse(width - 35, 35, 50, 50); //draws the sun

    noFill();
    beginShape(); //draws terrain at random of noise
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y);
        stroke('blue');
        line(x, y, x, height); //fills terrain so that it appears blue
    }
    endShape();

    duck(mouseX, y - 10, 20); //draws "duck" in the row with specific different radius
    duck(mouseX - 100, y - 10, 10);
    duck(mouseX - 150, y - 10, 5);
    duck(mouseX - 200, y - 10, 15);

    
}

function duck(dx, dy, radius) {
    var ttl1 = makeTurtle(dx + radius, dy - radius);
    ttl1.penDown(); //puts pen down
    ttl1.setColor('yellow');//color is yellow
    ttl1.setWeight(6);

    ttl1.left(90);//rotates circle so that starting point is to right of the duck

    var increments = radius * 10;//variable that gives way so that each radious of duck is in proportion of other

    for (i = 0; i < increments; i++) {
        d = 1;
        ttl1.forward(d);
        ttl1.left(360/increments);// completes circle     
    }

    ttl1.setColor('orange');//draws nose
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);
    ttl1.right(120);
    ttl1.forward(radius);

    stroke(0); //draws eye
    strokeWeight(6);
    point(dx, dy - radius - 5);

    ttl1.penUp();
}


//_________________________________________________________

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 my project, I went in knowing I wanted to draw ducks floating on water. I did so by using turtle graphics to draw the duck and its beak and using parameters, to change the radius/size of each duck. Imaged is a “Family of Ducks Swimming Together on A Nice Day”. Here is an image of what it might look like.

Project 10 Landscape- Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 10
// Section A

var speed = 0.00025;
var detail = 0.001;
var sheeps = new Array(480);
var numNoDraw = 0;
var clouds = new Array(480);
var numNoDrawC = 0;
var cloudY = new Array(12);
var cloudCount2 = 0;
var sheepcolors = new Array(12);
var colorCount = 0;
var herderURL;
var sheepStatus;

function preload() {
	herderURL = loadImage("https://i.imgur.com/f7HUFMr.png?1");//uploads image of shepard into 
}

function setup() {
    createCanvas(480, 400);
    frameRate(10);
}

function draw() { 
	background('lightblue');
//____________________________________________

	if(sheeps[0]) {
		shiftLeft(sheepcolors);//inserts random colors from array and shifts it over so that the value is not the same everytime
		//(makes sure the x point of the object moves with the point)
		colorCount--;
	}
	shiftLeft(sheeps);//
	if(numNoDraw === 0) {
		sheeps[479] = (random(0, 1) <= 0.05);//using a random 5% chance the sheep will be on the point
	} else {
		sheeps[479] = false;//there will be no sheep directly after
		numNoDraw--;
	}	
	if(sheeps[479]) {
		sheepcolors[colorCount] = random(0, 255); //each sheep will have a different random grey scale color
		if (colorCount === 11) {
        } else {
			colorCount++;
		}
		numNoDraw = 40;//there will be no sheeps every 40 pixels
	}
//____________________________________________
    
	if(clouds[0]) {
		shiftLeft(cloudY); //shifts cloud to the left so that the object moves with the x point change
		cloudCount2--;
	}

    shiftLeft(clouds);
    clouds[479] = false;//shift left and ensures last is set to default value (false)
	if(numNoDrawC === 0) {
	    clouds[479] = random(0,1) <= 0.01; //probility of if the cloud will be on the sreen in a specific point
    } else {
    	numNoDrawC--;
    }
    if(clouds[479]) {
    	numNoDrawC = 40;
    	cloudY[cloudCount2] = random(150,250); //randomly positions clouds between y points 150-250
  		if(cloudCount2 === 12){ //there cannot be more than 12 clouds (each cloud must be spaced at least 40 pixels from the last)
  		} else {
  			cloudCount2++;//increases number of clouds
  		}
    }

//______________________________________________

	noFill();
	beginShape();
	var cloudCount = 0;
	var sheepCount = 0; 
	for (var i = 0; i < width; i++) {
		var j = (i * speed) + (millis() * speed);
		var y = map(noise(j), 0, 1, height/2, height);//utilizes noise function 
		vertex(i, y);
		stroke('green');
		line(i, y, i, height);

		if(sheeps[i]) {
			sheep(i,y - 5, sheepcolors[sheepCount]);//places sheep on positions of the noise
			sheepCount++; //increases sheep count
		}

		if(clouds[i]) {
			cloud(i, y - cloudY[cloudCount]);//places clouds in position relative to noise
			cloudCount++;//increase cloud count
		}

		image(herderURL, 350, y + 30, 60, 60);//puts sheep herder on screen
	}
	endShape();
}

//draws sheep at given x, y coordinate and given face color 
function sheep(x, y, col) {
	beginShape();
	stroke(255);
	fill(255);
    ellipse(x, y, 10, 10);
    ellipse(x + 5, y + 5, 10, 10);
    ellipse(x + 10, y + 5, 10, 10);
    ellipse(x + 15, y, 10, 10);
    ellipse(x + 10, y - 5, 10, 10);
    ellipse(x + 5, y - 5, 10, 10);
 	fill(col);
    ellipse(x - 5, y, 10, 10);
    fill(255);
    endShape();
}

//draws clouds at given cx and cy
function cloud(cx, cy) {
	beginShape();
	stroke(255);
	fill(255);
	ellipse(cx, cy, 20, 20);
	ellipse(cx + 10, cy + 9, 20, 20);
	ellipse(cx + 20, cy + 9, 20, 20);
	ellipse(cx + 30, cy, 20, 20);
	ellipse(cx + 20, cy - 9, 20, 20);
	ellipse(cx + 10, cy - 9, 20, 20);
	endShape();
}

//uses for loop to help shift an array over so that you never reach the "end" of it
function shiftLeft(array){
	for(var r = 0; r < array.length - 1; r++) {
		try {
			array[r] = array[r+1];
		} catch(e) {
		}
	}
}

For my project, I decided that Shepard and their sheep was quite fitting. At first I was uncertain on how I will execute this project. I found that using an image for the Shepard and a cute little drawn image of the sheep would be quite fitting. Nothing would also be fluffier than white random clouds that go with it. Especially with the pain of this previous week, I felt that something calmer like “counting sheep” would be best.


^ Image of my original sketch

Looking Outwards 10 – Sara Frankel

https://carolinerecord.com/Light-Clock/
Caption: Project, Light Clock, captures the moment every 5 minutes, 24/7 for the entire year.

The project I chose was the Light Clock by Caroline Record that is actually set up right down the street outside at the Carnegie Museum of Art. The clock conveys the passing of time through a continuously swooping solitary hand, which makes a rotation every 5 minutes and each time it gets to the top, the clock captures a 360º image of the museum plaza. Taking a panorama photo of the entrance facing Forbes Ave, it documents the images inside , resulting in hundreds of thousands of images. What I love about this project is that it literally stops life to look around and “realize” whats going on. Life feels like its flying by and sometimes you need to be reminded to stop and look around you to analyze what’s going on in the moment. Caroline Record is a graduate of Carnegie Mellon University with a Bachelors in Art and a Masters in Science. She works at The Innovation Studio which specializes in crafting custom digital experiences for the four Carnegie Museums (The Carnegie Museum of Art, The Carnegie Museum of Natural History, the Andy Warhol Museum, and the Carnegie Science Center ). She involved in every detail of creating immersive interactive experiences (Taken from her Linkdin profile*).

*https://www.linkedin.com/in/caroline-record-4419348a/

Looking Outwards 09 – Sara Frankel


caption: Terry Riley’s “In C” results in a different performance guaranteed eery time played.

The looking outwards assignment I am reviewing is Kyle Leve’s week 6 post about In C by Terry Riley. Listening to it, at first it sounded kind of jarring and unsettling because of the lack of harmonic progression, but the more I listened to it the more I appreciated it. Kyle mentions that this “piece… allows each player to make their own artistic decisions and have freedom from the written page”. I agree with this comment as there are legitimately infinite combinations and interpretations as it is dependent on how many or littles musicians there are and their own musicianship. I do agree with Kyle though to a degree about randomness as if one listens to it in passing, it would really not make sense. However, if you stop and listen and allow yourself to be open minded to the momentum of the music, the music should not feel random at all but in fact, the nonsense you hear should seem coherent.

Project 09 – Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 09 Portrait
// section A 

var underlyingImage; //variable to help display the image being shown
var circx = 0; //circle starting position is 0,0
var circy = 0;

function preload() {
    var myImageURL = "https://i.imgur.com/a3mX8Atl.jpg";
    underlyingImage = loadImage(myImageURL); //loads the image into the variable provided
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels(); //loads image
    frameRate(10);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //strokeWeight(5);
    fill(theColorAtLocationXY);
    text("twins", px, py);//inserts text randomly to draw the image

    if (mouseIsPressed) {
    	var theColorAtPos = underlyingImage.get(circx, circy);
		fill(theColorAtPos);
		ellipse(circx, circy, 5, 5); //draws ellipse at circx and circy
		circx = (circx + 5) % width; //increments circx accross the row and goes back to 0 when it reaches width
		if (circx === 0) { 
			circy += 5;// when circx reaches width, circy will increment
		}
	}
    
}

I chose to upload a picture of my sister and I. Being a fraternal twin, most of the time people do not believe or suspect that we are twins. At times, this can be quite fun to point out to people, but most of the time it is not. So I thought it would be ironic to use this picture of us in elementary school in such an abstract image that legitimately spells and draws out the truth with the text and circles. As when you press the canvas, ellipses will be drawn to almost “clearly” draw it out for you.


Here is the original picture.


Here is a final image shot.

Looking Outwards 8 – Sara Frankel


caption: The work of Amanda Cox’s projects that I admire the most is her primary election visuals as she not only used them to present the outcome of the votes, but she also used statistics and analytics to try to predict the voting outcomes as well.

http://amandacox.tumblr.com

Amanda Cox is a NYTimes editor of The Upshot section of the New York Times, however her first position was as a graphics editor, a position she held from 2005 to 2016. She was awarded the National Design Award in 2009 and the Excellence in Statistical Reporting Award from the American Statistical Association in 2012. Ms. Cox received a bachelor’s degree in math and economics from St. Olaf in 2001 and a master’s degree in statistics from the University of Washington in 2005. Having won awards in design, one of her most infamous works is the mapping of the primary election in 2012. She loves to correlate the abstract image of politics with more tangible images such as a colored bubble. What I admire about Cox’s work is her ability to branch the intangible concepts to the tangible; the concept of politics to bubbles. As a musician, this is my career as I am to connect my ideas and creation of sound to something that would make sense to the listener. Cox presents in a more casual way, throwing in jokes from her experience and outside references to help the audience member receive a better understanding of her work with visuals of politics.