For my final project, we wanted to create an audio-visual experience that would also have some interactive aspect tied to it. We want to set a peaceful and dreamy tone, so we’ll be using a variety of different-colored circles to represent the sounds. To make it an interactive experience, we’ve decided to add layers of audio with each click so that the user can see the different types of instruments that go into making a song. The graphic interface will start of with the circles in the middle of the canvas in a straight line and fluctuating as the sounds are piled on. We’ve also decided that we will assign a different color to each new instrument/sound that is added. In that way, the user will be introduced to a combination of sounds that transform what they previously saw from before clicking.

Proposed collaborators: Katherine Hua (khua)

I am interested in creating an visual representation with audio, much like how Ren Yuan does in her project Sorting. Using Processing, she sorted copious amounts of data and created visual and audio aids to pair with the data actual data being sorted. In Studio Antimateria’s Shape in Scapes, a similar use of data visualization is at work, with students’ architectural projects at three different locations are being abstractly demonstrated. Although I believe that the visual and audio representations were added as aids for the user’s fascination in watching the project, I believe they play just as important roles in making the user interested in otherwise a very confusing experience. For my project, I also wanted to create some visual and audio accompaniment to some third factor.

Sources:

Sorting – Visualisation, sortification and sonification of an algorithm

Shape in Scapes – Transporting architecture into audio-video performance

For this week’s project, I wanted to take a look at the computer-generated music from Clara Starkweather’s Student Project at Duke University. She uses a Kinect camera to detect the motions of her body parts and generate different sounds at different progressions. More accurately, the algorithm she wrote plays different instruments in response to the camera’s detection of the different body parts being moved.

In Starkweather’s project, she wrote her code using the software synthesis programming language called SuperCollider. In this video, Starkweather showcases her project by demonstrating the different audio sounds filling in as background music for the song “Golden” by Jill Scott. I admire this project because Starkweather states that she had to learn how to play a few instruments to write her code. Her musical stylistic choices are also manifested in her project and despite it being a hard task to create harmonizing sounds using different body parts to control different instruments, she does so in a seamless way.

Source: https://www.youtube.com/watch?v=Q1ad8KG7tWc

index

var comb = 50;
var s = 25;
var bees = [];
var px = [];
var py = [];

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

    //sets each bees position

    for (var i = 0; i < 10; i++) {
    	px.push(random(0, width));
    	py.push(random(0, height));
    };

}

function draw() {
	background(199, 149, 68);

    strokeJoin(MITER);
    strokeCap(PROJECT);

    //draws dark lines on hive
	var ttl1 = makeTurtle(0, -300)
	ttl1.setColor("black");
	ttl1.setWeight(5);
	for (var y = 0; y < 30; y++) {
		for (var i = 0; i < 15; i++) {
			ttl1.penDown();
			ttl1.forward(s);
			ttl1.right(60);
			ttl1.forward(s);
			ttl1.left(60);
		};
		ttl1.penUp();
		ttl1.goto(0, y * 50 * sqrt(3) / 2 - 300);
	};

	//draws thin lines on hive
	var ttl2 = makeTurtle(0, -302)
	ttl2.setColor("black");
	ttl2.setWeight(0.5);
	for (var y = 0; y < 30; y++) {
		for (var i = 0; i < 15; i++) {
			ttl2.penDown();
			ttl2.forward(s);
			ttl2.left(60);
			ttl2.forward(s);
			ttl2.right(60);
		};
		ttl2.penUp();
		ttl2.goto(0, y * 50 * sqrt(3) / 2 - 300);
	};

	strokeCap(ROUND)

	//creates bees
	for (var i = 0; i < 10; i++) {
		//moves bees randomly
		fill(0);
		ellipse(px[i], py[i], random(10, 15), random(10, 15))
		px[i] += random(-1, 1);
		py[i] += random(-1, 1);


		//if bees are too close to edges, keep them from going off canvas
		if (px < 1) {
			px += random(0, 1);
		} else if (px > width - 1) {
			px += random(-1, 0);
		};

		if (py < 1) {
			py += random(0, 1);
		} else if (py > height - 1) {
			py += random(-1, 0);
		};
	};
}



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

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 project I wanted to recreate a beehive’s hexagons and add bees, but I unfortunately ran out of time so I simplified the bees.

index

var NPOINTS = 100;
var starX = [];
var starY = [];
var sandX = [];
var sandY = [];
var birdX = 270
var birdY = 160
var low = 300
var high = 120
var a = width / 2;
var b = width / 2;
var c = width / 2;

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

	//assigns new coordinate for each sand grain
	for (var i = 0; i < NPOINTS; i++) {
		sandX.push(random(0, 480));
		sandY.push(random(380, 480));
	};
}

function draw() {
	//sky gradient
	var col1 = color(47, 107, 177)
	var col2 = color(180, 197, 227)

	//rearranges values so that each line of sky has a different color
	for (var i = 0; i < height / 3 * 2; i++){
        var gradient = map (i, 0, height / 3 * 2, 0, 1);
        var newC = lerpColor(col1, col2, gradient);
        stroke(newC);
        line(0, i, width, i);
    }

	//bird's beak
	push();
	noStroke();
	fill(244, 198, 68);
	triangle(birdX + 8, birdY - 2, birdX + 8, birdY + 6, birdX + 17, birdY + 2);
	pop();

	//bird's head
	push();
	noStroke();
	fill(0);
	ellipse(birdX, birdY, 22, 20);
	pop();

	//bird's eye
	push();
	fill(255);
	strokeWeight(2);
	line(birdX + 1, birdY - 2, birdX + 4, birdY - 2);
	pop();


	//bird's back
	push();
	noStroke();
	fill(0);
	arc(birdX - 23, birdY + 2, 45, 30, 0, PI);
	pop();

	//sea
	noStroke();
	fill(123, 159, 189);
	rect(0, height / 3 * 2, width, height);

	//sand
	fill(211, 195, 182);
	arc(width / 2, height, width * 4, height / 7 * 3, PI, TWO_PI);

	//bird's wing
	noStroke();
	fill(0);
	quad(birdX - 30, birdY + 10, birdX - 35, birdY - 15, birdX - 21, birdY - 15, birdX - 5, birdY + 10);

	//moves bird according to mouse
	if (mouseY < 300 & mouseY > 120) {
		birdY = mouseY;
	} else if (mouseY < 120) {
		birdY = high;
	} else if (mouseY > 300) {
		birdY = low;
	};

	//makes sand move
	for (var i = 0; i < sandX.length; i++) {
		stroke(0);
		point(sandX[i], sandY[i]);
		sandX[i] = sandX[i] - 1;
		if (sandX[i] < 0) {
			sandX[i] = width;
		};
	};

}

For this project, I wanted to create a beach because I grew up living on an island. I initially wanted to create trees but ran out of time so I used sand as a way to represent a changing landscape.

Chloe Varelidi is an artist and designer whose mission statement is to “design and build playful products that empower humans to be creative, kind and curious about the world around them.” She studied design at Parsons School of Design and is now the founder and design director at humans who play. Her main work focuses on designing products that are both irresistable and fun.

Like many of her other projects, Minicade is an interactive and educational tool made by Veralidi that uses fun methods to teach important skills. I look up to this particular project because it is a web app that involves the user (along with others) to create and customize a playlist of games by learning how to code in HTML. It’s an extremely relevant skill to have and it’s projects like these that educate younger generations through a medium that they can enjoy.

Check it out: http://www.minica.de/

Source: http://varelidi.com/

What stood out to me about this project was the inspiration and technical applications that are possible through it. The device was inspired by Sony’s Playstation, which Katherine very accurately describes in her assignment. The application that Niklas Roy found for his device came through the musical exploration possibilities that follow the device. Through various switches on the device, the user is able to explore the binary structures within music and compare different rhythmic patterns and number systems for counting beats. An interesting and productive assessment of this device could be made from a strictly musical production standpoint by using it to create new and interesting instrumentals.

Source: https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/katherine-hua-looking-outwards-04/

index

var underlyingImage;
var textChoice;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    
    //randomizes text between three choices
    textChoice = random(0, 1000)

    noStroke();
    //size of text changes as mouse moves to right
    textSize(mouseX / 50)
    fill(theColorAtLocationXY);
    if (textChoice > 600) {
    	text("bruh", px, py);
    } else if (textChoice < 600 & textChoice > 400) {
    	text("wow", px, py);
    } else {
    	text("very", px, py);
    }
}

//press mouse to reset
function mousePressed() {
	background(0);
}

For this project, I wanted to channel the energy of memes to shape an appropriate photo of myself. I was very surprised to learn how simple it is to use images and extract colors for certain pixels, which will be helpful in creating future projects.

Meejin Yoon is a Korean-American architect and designer that co-founded Höweler+Yoon Architecture, a firm that uses design practices across the domains of architecture, urban design, public space, immersive experience, and design strategy. The firm is based out of Boston, Massachusetts and Munich, Germany.

What I admire about Yoon’s work is the way she chooses to deconstruct the ideas of private and public space by redefining these concepts. Most of her works shown in her talk feature interactions between people, technology, and public/personal space. One of her most stimulating works to me was her public project, Shadow Play, for creating a public parasol as opposed to a private one by utilizing the shape of the Mobius strip (a concept that Yoon is fascinated with) to create shade in a public place.

In her talk, she chooses to use many visual aids and categorizing to break down her speech in an easier way for her audience to understand the range and depth of her work.

Source: https://vimeo.com/channels/eyeo2015/133608603

sketch

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

function draw() {
	background(255, 200, 200);
    fill(255, 255, 255, 64);
    var nPoints = 30;
    var radius = 30;

    //fire body
    //red fire
    push();
    translate(width / 2 - 30, height / 2);
    beginShape();
    noStroke();
    fill(201, 75, 56);
    beginShape();
    for (var i = 0; i < nPoints ; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = 5.5 * radius * cos(theta);
        var py = 5.5 * radius * sin(theta);
        if (i > 15 & i < 24) {
        	vertex(px + random(-2, 2), py + random(-2, 2) - 50);
        } else {
        	vertex(px + random(-2, 2), py + random(-2, 2));
        }
    }
    endShape();
    pop();

    //red-orange fire
    push();
    translate(width / 2 - 30, height / 2);
    beginShape();
    noStroke();
    fill(230, 112, 84);
    beginShape();
    for (var i = 0; i < nPoints ; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = 5 * radius * cos(theta);
        var py = 5 * radius * sin(theta);
        if (i > 15 & i < 24) {
        	vertex(px + random(-2, 2), py + random(-2, 2) - 50);
        } else {
        	vertex(px + random(-2, 2), py + random(-2, 2));
        }

    }
    endShape();
    pop();

    //orange fire
    push();
    translate(width / 2 - 30, height / 2);
    beginShape();
    noStroke();
    fill(235, 173, 78);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = 3.5 * radius * cos(theta);
        var py = 3.5 * radius * sin(theta);
        if (i > 13 & i < 22) {
        	vertex(px + random(-4, 4), py + random(-4, 4) - 40);
        } else {
        	vertex(px + random(-4, 4), py + random(-4, 4));
        }

    }
    endShape();
    pop();

    //yellow fire
    push();
    translate(width / 2 - 30, height / 2);
    beginShape();
    noStroke();
    fill(240, 209, 90);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = 1.5 * radius * cos(theta);
        var py = 1.5 * radius * sin(theta);
        if (i > 14 & i < 24) {
        	vertex(px + random(-5, 5), py + random(-5, 5) - 30);
        } else {
        	vertex(px + random(-5, 5), py + random(-5, 5));
        }

    }
    endShape();
    pop();

    //left cheek
    beginShape();
    smooth();
    noFill();
    curveVertex(width / 4 + 5 + random(-2, 2), height / 2 + 60 + random(-2, 2));
    curveVertex(width / 4 + 5 + random(-2, 2), height / 2 + 50 + random(-2, 2));
    curveVertex(width / 4 + 10 + 10 + random(-2, 2), height / 2 + 50 - 10 + random(-2, 2));
    curveVertex(width / 4 + 10 + 20 + 5 + random(-2, 2), height / 2 + 50 - 5 + random(-2, 2));
    curveVertex(width / 4 + 10 + 20 + 8 + random(-2, 2), height / 2 + 50 + 14 + random(-2, 2))
    curveVertex(width / 4 + 10 + 20 + random(-2, 2), height / 2 + 50 + 20 + random(-2, 2))
    endShape();

    //right cheek
    beginShape();
    smooth();
    noFill();
    curveVertex(width / 2 + 60 + random(-2, 2), height / 3 + 40 + random(-2, 2));
    curveVertex(width / 2 + 40 + random(-2, 2), height / 3 + 20 + random(-2, 2));   
    curveVertex(width / 2 + 40 - 12 + random(-2, 2), height / 3 + 20 + 15 + random(-2, 2));
    curveVertex(width / 2 + 40 + random(-2, 2), height / 3 + 20 + 30 + random(-2, 2));
    curveVertex(width / 2 + 40 + 10 + random(-2, 2), height / 3 + 20 + 30 + random(-2, 2))
    curveVertex(width / 2 + 80 + random(-2, 2), height / 3 + 30 + random(-2, 2))
    endShape();

    //mouth
    beginShape();
    smooth();
    noFill();
    curveVertex(width / 4 + 10 + 20 + 5 + random(-2, 2) - 20, height / 2 + 50 - 5 + random(-2, 2) + 50);
    curveVertex(width / 4 + 10 + 20 + 5 + random(-2, 2), height / 2 + 50 - 5 + random(-2, 2));
    curveVertex(width / 4 + 10 + 20 + 30 + random(-2, 2), height / 2 - 25 + random(-2, 2));
    curveVertex(width / 2 + random(-2, 2) - 20, height / 2 - 30 + random(-2, 2));
    curveVertex(width / 2 + 40 - 12 + random(-2, 2), height / 3 + 20 + 15 + random(-2, 2));
    curveVertex(width / 2 + 40 - 12 + random(-2, 2) + 30, height / 3 + 20 + 15 + random(-2, 2));
    endShape();

	//left eye
    push();
    fill(255);
    translate(width / 4, height / 2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        vertex(px + random(-1, 1), py + random(-1, 1));
    }
    endShape(CLOSE);

    //left pupil

    push();
    fill(0);
    var mouseXeyes = map(mouseX, 0, 1000, -10, 10);
    var mouseYeyes = map(mouseY, 0, 800, -10, 10);
    ellipse(mouseXeyes, mouseYeyes, 20, 20);
    pop();

   	//right eye
    translate(width / 4,  -height / 6);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        vertex(px + random(-1, 1), py + random(-1, 1));
    }
    endShape(CLOSE);

    //right pupil
    push();
    fill(0);
    var mouseXeyes = map(mouseX, -500, 1000, -10, 10);
    var mouseYeyes = map(mouseY, -500, 1000, -10, 10);
    ellipse(mouseXeyes, mouseYeyes, 20, 20);
    pop();

    pop();

  	//bottom text
  	stroke(0);
  	fill(0);
  	textFont("Georgia");
  	textSize(22);
  	text("calcifer.", width / 2 - 30, height / 10 * 9 + 10);

    //egg
    push();
    noStroke();
    fill(255);
    beginShape();
    smooth();
    ellipse(mouseX, mouseY, 50, 60)
  	endShape(CLOSE);
  	stroke(0);
  	beginShape();
  	vertex(mouseX - 23, mouseY - 10)
   	vertex(mouseX - 15, mouseY - 2)
	vertex(mouseX - 5, mouseY - 10)
  	vertex(mouseX + 5, mouseY - 2)
	vertex(mouseX + 15, mouseY - 10)
	vertex(mouseX + 25, mouseY - 2)
	endShape();
  	pop();

}

For this project, I was inspired by the moving circle in the example given. I used this to attempt to recreate one of my favorite characters from Studio Ghibli, Calcifer. The moving points give Calcifer the feel of a live fire.