Author: Sara

LO 7 – Sara Frankel


caption: Artist Nicholas Rougeux captures the conversation of music with his circular, intricate images that are in relation to the score itself.

Artist Nicholas Rougeux has been working on the project of visualizing music. He does so by scoring single instrument pieces in one color, and larger orchestrations with more colors; different parts associated with specific colors. He also correlates the position of a note on the staff with the radius of its position from the center of the circle; so lower notes on a musical staff will have a smaller radii than a higher note. Overall, its the visualization of an entire piece within a circle, its an “Off the Staff” experience. In other words, its taking a book of dots on lines and visualizing it to bring another perspective and meaning to what we hear in complex classical music. I admire this project as one gets a great sense of the voicing of a piece and the relationship between each voice. As a musician, this is a really important aspect of my career in the sense that it is the conversation with musicians around me and to the audience that matters the most. This is what the artist is ultimately trying to achieve, to break down the relationship and conversation of music that can sometimes be hard to know where to even start when you listen to it firsthand.

(link to their website: https://www.c82.net/offthestaff/ )

Project 07 Curves – Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 07
// Section A

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

var perwidth = 480.0; 
var constrainmin = 1.0;
var constrainmax = 1.4;

function draw() {
	
	background('pink');
	var changecenter = width/4 * mouseX / perwidth * constrain(1 - (mouseY / perwidth), constrainmin, constrainmax); // variable to insert into drawDevilsCurve to help assiciate its position from the 
																													// center curbe proportionately in both the x and y direction with the mouse

	//center curve
	drawDevilsCurve(true, width/2, height/2, 180, 150, 100);
	drawDevilsCurve(false, width/2, height/2, 180, 150, 100);
	
	//top left curve
	drawDevilsCurve(true, width/2 - changecenter, height/2 - changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 - changecenter, height/2 - changecenter, 40, 30, 35);
	
	//bottom left curve
	drawDevilsCurve(true, width/2 - changecenter, height/2 + changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 - changecenter, height/2 + changecenter, 40, 30, 35);

	//top right curve
	drawDevilsCurve(true, width/2 + changecenter, height/2 - changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 + changecenter, height/2 - changecenter, 40, 30, 35);

	//bottom right curve
	drawDevilsCurve(true, width/2 + changecenter, height/2 + changecenter, 40, 30, 35);
	drawDevilsCurve(false, width/2 + changecenter, height/2 + changecenter, 40, 30, 35);
}

//-------------------------------------------------------

function drawDevilsCurve(isSide, centerX, centerY, maxA, maxB, nPoints) {
	
	var x;
	var y;
	var hx = mouseX / perwidth; //puts mouseX on a percent scale
	var hy = mouseY / perwidth; //mouseY on a percent scale
	var a = maxA * hx; //correlates maxA and hx for shape below
	var b = maxB * hy; //correlates maxB and hy for shape below
	var t = radians(2 * a); //angle of shape in relation to a

	beginShape();
	for (var i = 0; i < nPoints; i++) { //for loop to create the devils curve shape

		colorMode(HSB);
		stroke(280 * i, map(100 - i, 100, 0, 60, 0), 100 * i); //maps the color so that each curve corrolates in color (dependant on how many points are on the shape) in terms of pink
		
		var t = map(i, 0, nPoints, 0, TWO_PI); //maps the angle of the curve to corrolate with the number of points and i
		x = cos(t) * sqrt(((a * a) * (sin(t) * sin(t)) - (b * b) * (cos(t) * cos(t)) / (sin(t) * sin(t)) - (cos(t) * cos(t))));
		y = sin(t) * sqrt(((a * a) * (sin(t) * sin(t)) - (b * b) * (cos(t) * cos(t)) / (sin(t) * sin(t)) - (cos(t) * cos(t))));
		
		if(isSide){ //if statement that flips the curve over y=x so that it creates the same curve perpendicular to the original
			var temp = x;
			x = y;
			y = temp;
		}

		vertex(x + centerX, y + centerY); //draws curve
		vertex(-x + centerX, -y + centerY);	//draws inverse of curve (gives it the cool pointy look)

	}

	endShape(CLOSE);
	noFill();

	
	
}

When I was looking through the catalog of curves, there was something that caught my eye about the devils curve. The proportions and visual aspects fascinated me. I decided to make almost these flower shapes in proportion of one another (as well as the mouse) and track along more or less the y = x plane. Screenshots as follow:


Pictured is what to expect when the shape is almost as small as it can go. It is a plus shape surrounded by smaller “+”s.


Pictured is medium size expected when x and y are closer to the center

LO – 06 Sara Frankel


Caption: This performance of Cage’s piece “Electronic Music for Piano” will be like no other performance of this piece.

John Cage in the music industry today is known for his expansion on the definition of what music is. His most infamous work, 4’33, requires the performer to sit with their instrument in “complete silence” for four minutes and thirty three seconds for all three movements. The idea of this piece though is to bring attention to the music around you, the random sneezes, the sound of electricity or just the thoughts and breathing of the audience member. Essentially, Cage brings attention to the coherency of randomness. In his piece “Electronic Music for Piano”, the score is just a piece of letterhead paper with very few instruction “for the use of parts from Music for Piano 4-84, reliant upon electronic equipment (microphones, amplifiers, and oscilloscope) and a constellation from an astronomical chart” (http://johncage.org/pp/John-Cage-Work-Detail.cfm?work_ID=59). John Cage’s work is inspiring to me as, if you let it, music and stories are told all around you all the time. Whether it is the buzz of the electricity or the sound of birds chirping outside, every random aspect of life contributes to the musicality of life. As seen in “Electronic Music for Piano”, there is story and music within random sounds of a piano.

Project 6 – Abstract Clock Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 6
// Section A


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

var earthw = 340;
var earthh = 350;
var sunw = 50;
var sunh = 50;


function draw() {
	background(0); 
	var hours = hour();
	var mins = minute();
	var sec = second();
	textSize(30);

	//little dipper
	stroke(80); // I put in lines to emphasize the shape of the dipper :), I put this in for aesthetic effect
	line(50, 40, 110, 60);
	line(110, 60, 150, 100);
	line(150, 100, 200, 135);
	line(200, 140, 280, 85);
	line(285, 85, 225, 45);
	line(230, 45, 155, 105);
	fill('yellow');
	text('*', 50, 60);
	text('*', 110, 80);
	text('*', 150, 120);
	text('*', 200, 155);
	text('*', 280, 100);
	text('*', 225, 65);


	noStroke();
	fill('blue');
	ellipse(width/2, height, earthw, earthh);
	//sun
	fill('orange');
	ellipse(width/2 + cos(radians(360 * ((hours + 6)/24.0))) * (200), height + sin(radians(360 * ((hours + 6)/24.0))) * (200), sunw, sunh); //I used sin and cos to help rotate the sun around the earth at the speed of each hour (from 6am to 6pm you will be able to see the sun)
	//moon
	fill(50);
	ellipse(width/2 + cos(radians(360 * ((hours + 18)/24.0))) * (200), height + sin(radians(360 * ((hours + 18)/24.0))) * (200), sunw, sunh);//I used sin and cos to help rotate the moon around the earth at the speed of each hour (from 6pm to 6am you will be able to see the moon)

	//cloud
	var clouddir = hours % 2 === 0; //Boolean value that, as used in the if statement, that helps to depict the direction of the cloud
	if  (clouddir){
		mins = minute();
	} else {
		mins = 60 - minute(); // when the cloud moves 1 hour, it will change direction and go accross the screen the other direction
	}
	var cloudx =  cos(radians(90 * ((mins - 5)/60.0)) + 180) * 300 + width/2 - 50; //I used sin and cos to help move the cloud around the screen at the speed of each minute (it will move at the speed of the minute and change direction every hour)
	var cloudy = sin(radians(90 * ((mins - 5)/60.0)) + 180) * 450 + height + 20;
	fill('grey');
	ellipse(0 + cloudx, 100 + cloudy, 50, 50);
	ellipse(30 + cloudx, 80 + cloudy, 50, 50);
	ellipse(60 + cloudx, 80 + cloudy, 50, 50);
	ellipse(90 + cloudx, 100 + cloudy, 50, 50);
	ellipse(60 + cloudx, 120 + cloudy, 50, 50);
	ellipse(30 + cloudx, 120 + cloudy, 50, 50);

	//airplane
	var planedir = mins % 2 === 0;//Boolean value that, as used in the if statement, that helps to depict the direction of the plane
	if  (planedir){
		sec = second();
	} else {
		sec = 60 - second(); //after 60 seconds, the plane will change directions
	}
	var planex = cos(radians(90 * ((sec - 5)/60.0)) + 180) * 300 + width/2 - 100; //I used sin and cos to help move the plane around the screen at the speed of each second (it will move at the speed of the minute and change direction every minute)
	var planey = sin(radians(90 * ((sec - 5)/60.0)) + 180) * 450 + height - 50;
	var backwing = [50, 120, 70, 80, 100];
	var frontwing = [100, 70, 60, 130, 140];

	if (!planedir) { //the plane will change direction when going back accross the screen
		backwing = [200 - backwing[0], 200 - backwing[1], 200 - backwing[2], 200 - backwing[3], 200 - backwing[4]];
		frontwing = [200 - frontwing[0], 200 - frontwing[1], 200 - frontwing[2], 200 - frontwing[3], 200 - frontwing[4]];
	}

	//body/wings of plane
	fill(255);
	rectMode(CENTER);
	rect(100 + planex, 100 + planey, 100, 20, 30);
	triangle(backwing[0] + planex, backwing[1] + planey, backwing[0] + planex, backwing[3] + planey, backwing[2] + planex, backwing[4] + planey);
	triangle(frontwing[0] + planex, frontwing[0] + planey, frontwing[1] + planex, frontwing[2] + planey, frontwing[3] + planex, frontwing[0] + planey);
	triangle(frontwing[0] + planex, frontwing[0] + planey, frontwing[1] + planex, frontwing[4] + planey, frontwing[3] + planex, frontwing[0] + planey);


}

I enjoyed making this project as I used it to try and understand how to use sin and cos for an object to rotate around another. I decided to go with an adventurous space theme with with the earth in the bottom center and the sun and moon rotating around the earth. The sun is orange and the moon grey, both resembling the hour of the day (at 6pm and 6am you will be able to see both the sun and moon). The cloud resembles the minute of the hour and changes direction every hour. The cloud is seconds. I put the Little Dipper in the background as a nice accent to the overall picture.

Looking Outwards 5 – Sara Frankel


caption: CGI is used throughout the entire movie of The Hobbit.

The movie, The Hobbit, uses CGI, or computer generated imagery, to help develop the feeling of a different world. Every aspect of this movie is produced with CGI. Everywhere from the size of the characters (to distinguish the difference between a hobbit and not), the scenery (the differences between castles, caves, rolling hills, different villages), to building legitimate characters (the dragon, Gollum, and a lot of the little furry friends). I admire this process as by applying CGI to almost every aspect of the movie truly helps to fully develop the quality and almost the legitimacy of the reality of the movie. This movie inspires me with my major in the sense that just applying CGI, or in my case my phrasing, to one’s art will raise the quality and the coherency of the product.

Project 5 – Wallpaper Sara Frankel

Project 5

// Sara Frankel
// sfrankel
// Project 5
// section A

function setup() {
    createCanvas(600, 600);
    background('lightgreen');

    stroke('green');
    strokeWeight(2);
    for (var xback = 10; xback < width; xback += 20) { //green stripes placed in setup so that they are not redrawn everytime it is called
    	line(xback, 0, xback, height);
    }
    noLoop();
}

function draw() {
	stroke(0);
	strokeWeight(1);
	var diameter = 120;
	for (var xcircle = 0; xcircle < width + diameter/2; xcircle += 155) { // positions and redraws the lemons and limes along the x axis
		for (var ycircle = 0; ycircle < height + diameter/2; ycircle += 155){ // positions and redraws the lemons and limes along the y axis
			fill('orange');
			ellipse(xcircle, ycircle, diameter, diameter);
			fill(243,185,80);
			ellipse(xcircle, ycircle, diameter/2 + 40, diameter/2 + 40);
			
			if(ycircle % 2 === 0) { //makes every odd line, every lemon, the color yellow
				fill(255,255,153);
				ellipse(xcircle, ycircle, diameter, diameter);
				fill('yellow');
				ellipse(xcircle, ycircle, diameter/2 + 40, diameter/2 + 40);
			} 
			
			for (var i = 0; i < 6; i++) { //forms the slices of the citrus fruit
				var angle = i * radians(60);
				line(xcircle, ycircle, (diameter/3) * cos(angle) + xcircle , 
					ycircle + (diameter/3) * sin(angle));
			}	
		
		}
	}
}

For this project, I decided to make it citrus/summer theme. I made the backdrop watermelon inspired (with the green stripes) and made each row of citrus fruit alternate between oranges and lemons. As the weather gets colder, its sometimes nice to think of the beloved themes of summer.  Below is my sketch, please excuse my artistic ability but I came into the idea thinking about summer and warm beaches (and what is lovely to drink/eat by the ocean).

Looking Outwards 4 – Sara Frankel


Caption: This is the sound file from Lucier’s project “I Am Sitting in a Room”. As you can tell, his voice becomes quite distorted by the end of the project as the recording has been layered on top of another so many times.

Alvin Lucier’s project, “I Am Sitting in a Room” involves his voice, a room, and a recording/stereo system. How he goes about this project is he simply records his voice in a room by himself. After recording a few sentences, he replays his voice through the sound system in the room and records that through his microphone and he continues to play and record the newly layered recording. He does this for 45 minutes. As the recordings become more and more layered, one starts to notice that his sentences are no longer coherent as they become more “echoed”. By the time one reaches the end of the recording, the voice has become completely distorted and if anything, almost harmonic. Listening to the voice at this point in the recording is almost meditative if anything due to the sound waves of his voice being layered on top of each other. I admire this project because it truly proves the point that music is everywhere and within everyone. There is music and harmonic sequence within the everyday life, even so close to us that is our voice.

For even more information, here is a link to his exhibit at the MoMA in NYC, NY: https://www.moma.org/explore/inside_out/2015/01/20/collecting-alvin-luciers-i-am-sitting-in-a-room/

Project – 04 Sara Frankel String Art

sketch

var y1 = 0;
var y2 = 0;
var x1 = 0;
var x2 = 0;
var x3 = 0;

function setup() {
    createCanvas(400, 300);  
	background(0);
	for(var i = 0; i < 100; i++) { //for loop that is redrawing all of the lines
		y1 = lerp(height, 0, i/100); //increments lines at specific ratios
		x1 = lerp(0, width, i/100);
		y2 = lerp(0, height, i/100);
		x2 = lerp(width, 0, i/100);
		x3 = lerp(0, width, i/25);
		colorMode(HSB); // changes color values to those of saturation, not RGB
		strokeWeight(0.25); //decreases thickness of line
		stroke (280,map(100-i,100,0,60,0),100); //line of code that gradiates the color proportionally
		line(width, height/3, x3 - 1400, height * 2);
		colorMode(RGB); //color values back to RGB
		line(i,(height/2)+height*sin(map(i,0,100,0,2*PI))*.25,5*i,(height/2)-height*sin(map(i,0,100,0,2*PI))*.25); //creates lines that draw along a sin curve
		stroke(color(255));
		strokeWeight(0.5);
		line(x1 * i, y1, 0, 0);
		strokeWeight(1);
		stroke(color('#0B2838'));
		line(width/2, y1, x2, height/2);
		strokeWeight(2);
		stroke(color('#1F2654'));
		line(width/2, y2, x1, height/3);
		strokeWeight(0.05);
		stroke('pink');
		strokeWeight(1);
		line(width/2, height/2, x1, height * 0.125 - 50);
		stroke(color('10'));
		line(width/3, y2, x1, height/3);
		stroke(color('#513B70'));
		line(width/2 + 50, y2, x1, height/3);
		strokeWeight(0.25);
		stroke(color('#8E5D91'));
		line(width/2, y2, x1, height/4);
		strokeWeight(1);
		stroke(color('#B589A0'));
		line(width/2, y1, x2, height/4);
		line(width/2, height/2, x1, -height/8);

	}
}

I enjoyed doing this project as I really love looking at the play of negative space that tricks our eyes that these straight lines create a curved one. I also particularly enjoy experiencing and seeing the play of a color palette and how each color plays into the next.

Looking Outwards 3- Sara Frankel


Caption: Combining technology with the art of the instrument, this artist creates a playable violin with a 3D printer.

This project harmonizes the art of code and music together. It does so by means of using a 3D printer to produce a playable violin. What I admire about this project is the fact that someone was capable of making a plastic shape make music. This is inspirational to me in the sense that, being a music major, music is found everywhere in many different kinds of mediums. The fact that someone is able to speak through an instrument made by a machine is amazing as it truly speaks for the modern day; this project is the culmination of the art of code and music. An aspect of this project that would incorporate an algorithm is the fact that when the bow of the instrument is brought to the string, how the instrument will produce a sound.

Project 3 – Sara Frankel Dynamic Drawing

sketch

//flower size
var fradius1 = 30;
var fradius2 = 60;
var fradius3 = 120;
//petal size
var pradius1 = 4;
var pradius2 = 80;
var pradius3 = 160;
//number of petals on flower
var numpetals = 6;
//Boolean if mouse on flower
var onFlower1 = false;
var onFlower2 = false;
var onFlower3 = false;
//color of flower
var fcolor1 = 'yellow';
var fcolor2 = 'yellow';
var fcolor3 = 'yellow';
//color of petal
var pcolor1 = 255; 
var pcolor2 = 255;
var pcolor3 = 255;
//color of text & boolean of if mouse is on text
var textcolor = 255;
var ontext = false;

function setup() {
    createCanvas(480, 640);
}

function draw() {
	noStroke();
	background('blue');
	//change background color according to mouseX
	if (mouseX <= width/2) {
		background('orange');
	}

	//to insert text and change the color of text according to position of mouse
	fill(textcolor);
	if (mouseX <= width/2) {
		text('Oopsie Daisy', 10,30);
		}	
	if (mouseX >= 10 & mouseY <= 30 && mouseX<=100 && mouseY >= 15) {
		if (!ontext) {
		textcolor = color(random(0,255), random(0,255), random(0,255));
		}  ontext = true;
		} else {
			ontext = false;
			textcolor = 255;
	}

	if (mouseX <= width & mouseY <= height) {
		numpetals = 2*mouseX/48 + 6; //changing the number of petals dependant on mouse
		pradius1 = mouseX/48 * 4 + 4; //modifying radius of petals based on mouse
		pradius2 = mouseX/48 * -8 + 80;
		pradius3 = mouseX/48 * -16 + 160;
	}
	
	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width/4) * (mouseX - width/4) + (mouseY - height*0.20) * (mouseY - height*0.20) < fradius1 * fradius1) {
		if(!onFlower1) {
			fcolor1 = random(0,255);
			pcolor1 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower1 = true;
	} else { 
		onFlower1 = false;
		fcolor1 = 'yellow';
		pcolor1 = 255;
	}
	fill(fcolor1);
	ellipse(width*0.25, height*0.20, fradius1, fradius1); // drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.75) * (mouseX - width*0.75) + (mouseY - height*0.30) * (mouseY - height*0.30) < fradius2 * fradius2) {
		if(!onFlower2) {
			fcolor2 = random(0,255);
			pcolor2 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower2 = true;
	} else  {
		onFlower2 = false;
		fcolor2 = 'yellow';
		pcolor2 = 255;
	}
	fill(fcolor2);
	ellipse(width*0.75, height*0.30, fradius2, fradius2);// drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.4) * (mouseX - width*0.4) + (mouseY - height*0.65) * (mouseY - height*0.65) < fradius3 * fradius3) {
			if(!onFlower3) {
				fcolor3 = random(0,255);
				pcolor3 = color(random(0,255), random(0,255), random(0,255));
			}
			onFlower3 = true;
		} else  {
			onFlower3 = false;
			fcolor3 = 'yellow';
			pcolor3 = 255;
		}
			fill(fcolor3);
	ellipse(width*0.4, height*0.65, fradius3, fradius3);// drawing the center of flower


	//flower 1 (top left)
	fill(pcolor1); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < 24-numpetals; i++) { //flower that grows proportionately in the opposite direction as the other flowers
		var angle = i * radians(360/(24-numpetals));
		ellipse(width * 0.25 + (fradius1/2 + pradius1/2) * cos(angle), height * 0.20 + (fradius1/2 + pradius1/2) * sin(angle), pradius1, pradius1);
	}
	
	//flower 2 (top right)
	fill(pcolor2); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.75 + (fradius2/2 + pradius2/2) * cos(angle), height * 0.30 + (fradius2/2 + pradius2/2) * sin(angle), pradius2, pradius2);
	}
	//flower 3 (bottom)
	fill(pcolor3); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.4 + (fradius3/2 + pradius3/2) * cos(angle), height * 0.65 + (fradius3/2 + pradius3/2) * sin(angle), pradius3, pradius3);
	}

}

For this project, I decided to use daisies as my inspiration. At first I was kind of confused as to how I was going to execute this image, but after planning it out and figuring out the appropriate code for each movement, I was able to successfully draw this out.