For this project, I made a abstract keyboard that generate animations for each note, using some conmic icon to represent traditional keyboard.
var osc;
var env;
var dir = 1;
var speed = 10;
var diam = 20;
var col;
var isRed = []
var x1 = 50
var x2 = 25;
var y2 =25;
var x3 = 50;
var y3 = 0;
var x4 = 50;
var y4 = 800;
var x5 = 400;
var y5 = 0;
var x6 = 0;
var y6 = 400;
var x7 = 400;
var y7 = 40;
var terrainSpeed1 = 0.0005;
var terrainDetail1 = 0.0001227;
function setup() {
createCanvas(800,800)
osc = new p5.Oscillator();
osc.setType('sine');//set sound type
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(0,height/4);
}//set up background flow
frameRate(100);
}
function draw() {
background(254,175,188)
push();
fill(154,231,217);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height/4, height*3/4);
vertex(x, y);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();//background moving pattern
drawKeyBoard();
if (keyCode==49){
drawCircle();
}else if (keyCode==50){
drawball1();
}else if (keyCode==51){
drawLine();
}else if (keyCode==52){
drawball2();
}else if (keyCode==53){
drawSquare();
}else if (keyCode==54){
drawball3();
}else if (keyCode==55){
drawRing();
}else if (keyCode==56){
drawball4();
}else if (keyCode==57){
drawSquare2();
}else if (keyCode==48){
drawduck();
}//assign animation for each sound
push();
strokeWeight(0);
stroke(0);
textSize(20);
textStyle(BOLD);
textFont("Helvetica");
text("Press number key to start", 280, 760);
pop();//instruction
}
//make each animation
function drawCircle(){
noStroke();
fill(col);
ellipse(width/2, height*2/5, diam, diam);
diam += dir * speed;
if (diam > 200) {
dir = -dir;
diam = 200;
} else if (diam < 0) {
dir = -dir;
diam = 0;
}
}
function drawLine(){
push();
translate(width/2,height*2/5);
for(var j = 0;j<10;j++){
rotate(radians(36));
stroke(163,228,37);
strokeWeight(5);
line(0,0,x1,0);
x1+=dir*speed*0.08
if (x1 > 200) {
dir = -dir;
x1 = 200;
} else if (x1 < 0) {
dir = -dir;
x1 = 0;
}
}
pop();
}
function drawRing(){
stroke(154,231,217);
strokeWeight(10);
noFill();
ellipse(width/2, height*2/5, diam, diam);
diam += dir * speed;
if (diam > 200) {
dir = -dir;
diam = 200;
} else if (diam < 0) {
dir = -dir;
diam = 0;
}
}
function drawSquare(){
push();
translate(width/2,height*2/5);
noStroke();
fill(207,214,251);
quad(-x2,-y2,x2,-y2,x2,y2,-x2,y2);
x2 += dir * speed;
y2 +=dir*speed;
if (x2 > 200) {
dir = -dir;
x2 = 200;
} else if (x2 < 0) {
dir = -dir;
x2 = 0;
}
}
function drawSquare2(){
push();
translate(width/2,height*2/5);
stroke(112,208,236);
strokeWeight(5);0
noFill();
quad(-x2,-y2,x2,-y2,x2,y2,-x2,y2);
x2 += dir * speed*0.9;
y2 +=dir*speed*0.9;
if (x2 > 200) {
dir = -dir;
x2 = 200;
} else if (x2 < 0) {
dir = -dir;
x2 = 0;
}
}
function drawball1(){
noStroke();
fill(255,240,162);
ellipse(x3, y3, 50, 50);
x3 += dir * speed*2;
y3 +=dir*speed*2;
if (x3 > 800) {
dir = -dir;
x3 = 800;
} else if (x3 < 0) {
dir = -dir;
x3 = 0;
}
}
function drawball2(){
noStroke();
fill(166,159,255);
ellipse(x4, y4, 50, 50);
x4 += dir * speed*2;
y4 +=-1*dir*speed*2;
if (x4 > 800) {
dir = -dir;
x4 = 800;
} else if (x4 < 0) {
dir = -dir;
x4 = 0;
}
}
function drawball3(){
noStroke();
fill(166,108,148);
ellipse(x5, y5, 50, 50);
x5 += dir * speed*0.5;
y5 += dir*speed*2;
if (y5 > 800) {
dir = -dir;
y5 = 800;
} else if (y5 < 0) {
dir = -dir;
y5 = 0;
}
}
function drawball4(){
noStroke();
fill(255,115,118);
ellipse(x6, y6, 50, 50);
x6 += dir * speed*2;
y6 += dir*speed*0.5;
if (x6 > 800) {
dir = -dir;
x6 = 800;
} else if (x6 < 0) {
dir = -dir;
x6 = 0;
}
}
function drawduck(){
noStroke();
fill(255,115,118);
duck(x7, y7, 50, 50);
x7 += dir * speed*2;
y7 += dir*speed;
if (x7 > 800 ) {
dir = -dir;
x7 = 800;
} else if (x7 < 0) {
dir = -dir;
x7 = 0;
}
}
//monster keyboard
function drawKeyBoard(){
var index = map(keyCode,48,57,0,9);
for (var i = 0;i<9;i++){
monster(i*80+40,height*5/6,-25);
if (keyIsPressed===true){
monster((index-1)*80+40,height*5/6,-50*index);
}else{
monster(i*80+40,height*5/6,-25);
}
}
}
// animation pattern-duck
function duck(dx, dy) {//draw duck
push();
translate(dx, dy);
stroke(255, 183, 0);
strokeWeight(5);
line(-15, 60, -15, 85);//foot1
line(-5, 60, -5, 85);//foot2
stroke(154, 231, 217);
strokeWeight(40);
line(0, 0, 0, 30);//neck
strokeWeight(40);
line(-30, 40, 0, 40);//body
strokeWeight(10);
line(-55, 40, -30, 40);//tail
stroke(255, 183, 0);
strokeWeight(7);
line(10, 7, 25, 7);//mouse
line(10, 14, 25, 14);//mouse
fill(255);
noStroke();
ellipse(0, 0, 10, 10);//eye
fill(0);
noStroke();
ellipse(1, 0, 5, 5);
pop();
}
//keyboard pattern-monster
function monster(mx, my,earl) {//draw monster
push();
translate(mx, my);
stroke(137,78,115);
strokeWeight(5);
line(25, earl, 25, 0);//ear1
line(45, earl, 45, 0);//ear2
line(30, 30, 85, 40);//tail
stroke(244,179,220);
strokeWeight(30);
line(10, 0, 50, 0);//monster head
strokeWeight(5);
line(35, 40, 35, 60);//foot1
line(45, 40, 45, 60);//foot2
line(55, 40, 55, 60);//foot3
line(65, 40, 65, 60);//foot4
strokeWeight(50);
line(50, 10, 50, 30);//monster body
fill(255);
noStroke();
ellipse(22, 0, 15, 15);//left eye
ellipse(42, 0, 15, 15);//right eye
fill(0);
noStroke();
ellipse(20, 0, 5, 5);//eyeball1
ellipse(40, 0, 5, 5);//eyeball2
pop();
}
//assign sound to each key
function keyPressed(){
if (keyCode == 49){
osc.freq(174);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(1, 0.05);
col = ('yellow');
}else if (keyCode == 50){
osc.freq(196);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(1, 0.05);
col = ('blue');
}else if (keyCode == 51){
osc.freq(220);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(1, 0.05);
col = ('');
}else if (keyCode == 52){
osc.freq(233);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(1, 0.05);
col = ('blue');
}else if (keyCode == 53){
osc.freq(261);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(1, 0.05);
col = ('blue');
}else if (keyCode == 54){
osc.freq(293);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(0.5, 0.05);
col = ('blue');
}else if (keyCode == 55){
osc.freq(329);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(0.5, 0.05);
col = ('blue');
}else if (keyCode == 56){
osc.freq(349);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(0.5, 0.05);
col = ('blue');
}else if (keyCode == 57){
osc.freq(392);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(0.5, 0.05);
col = ('blue');
}else if (keyCode == 48){
osc.freq(440);
osc.amp(0);
osc.start();
osc.stop(0.25);
osc.amp(0.5, 0.05);
col = ('blue');
}
else {osc.amp(0, 0.5);
}
}
For the final project, i was inspired to explore the possibility in the sound visualization area and I beginning think of making sound graphic animation interact with sound track which sound be project into different architectural space to receive different effects.
I try to make the graphics radiator look, so it could fit different architectural space. The actual graphic still needs exploring and the final version would largely depend on the music track chose.
The first project I looked into is a transforming architectural installation named Suspès, made by by MID, PlayModes, and David Sarsanedas. It is based on the suspension of 100 helium ballons with 90 cm diameter with inner LED and control systems inside. By turning them on and off synchronically with the music, the installation simulates the apparition of stars and constellations that beat in a big aerial choreography. With the form of balloons, The installation can be held outdoors or indoors, and it includes architectural lighting for the sur- rounding buildings, which synchronizes seamlessly with the balloon matrix.
The second project I looked into is “La Llum de Miravet”. It is an audiovisual installation to transforms a church apse into an alive and mysterious space, discovered through contrast between hums and silence, light and darkness. The project using the spatial condition in the church to maximize the effect of the visual effect connected to the sound control. The project credited to 3D Model: Gerard Vallverdú; Unity3D: Guillem Galimany; Tech Project: Eloi Maduell; Sound: Santi Vilanova
These two project inspired me to explore the possibility in the sound visualization area and I beginning think of making sound graphic animation interact with sound track which sound be project into different architectural space to receive different effects.
his project created by Mark Wheeler is generated by integrating computational music data and visual graphics. It is a performance that shows how the soundtrack could control the world as well as how the outside could affect sound interactively.
The performance setup uses two synths, a monome running Mark Eats’ own Sequencer app and another monome controlling Ableton Live. These instruments connect via MIDI over wifi to a second laptop running a custom openFrameworks app that produces the visuals. Ableton Live and MidiPipe handle the routing. The visuals software was built using openFrameworks and operates much like a game engine. A map is created with rules for traffic flow, junctions and traffic lights. The simulation could thus visualize people’s behavior by manipulating the sound. By this project, not only the computational music got known by more general people, but It also give this kind of music a more functionalism position than it is before.
//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a
//project 11
function setup() {
createCanvas(400, 400);
frameRate(10);
}
function draw() {
for (var i=0;i<30;i++) {
strokeWeight(15);
stroke(220-i);
line(0,i*15,width,i*15);
}//background color
push();
var turtle = makeTurtle(0, 45);
turtle.penDown();
turtle.setColor(255);
turtle.setWeight(3);
strokeJoin(MITER);
strokeCap(PROJECT);
var i = 0;
while ( i < width) {
i++;
turtle.left(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(30);
turtle.right(90);
turtle.forward(20);
turtle.right(90);
turtle.forward(10);
turtle.right(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(20);
turtle.left(90);
turtle.forward(30);
turtle.left(90);
turtle.forward(40);
}
noLoop();
turtle.penUp();
pop();//upper frame
push();
var turtle = makeTurtle(0, height-5);
turtle.penDown();
turtle.setColor(255);
turtle.setWeight(3);
strokeJoin(MITER);
strokeCap(PROJECT);
var i = 0;
while ( i < width) {
i++;
turtle.left(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(30);
turtle.right(90);
turtle.forward(20);
turtle.right(90);
turtle.forward(10);
turtle.right(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(20);
turtle.left(90);
turtle.forward(30);
turtle.left(90);
turtle.forward(40);
}
noLoop();
turtle.penUp();
pop();//bottom frame
}
function mousePressed() {
var turtle = makeTurtle(mouseX, mouseY);
turtle.penDown();
turtle.setColor(255);
for (var i = 0; i < 20; i++) {
turtle.forward(50);
turtle.right(137.5);
turtle.forward(50);
}
turtlePenUp();
//make random turtles
}
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 tried to use turtle to create some abstract graphic that could interact with mouse motion. I use the turtle to make frames and another turtle to follow the mouse movement. whenever the mouse is pressed, a new turtle is drawn.
//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a
//project 10
var terrainSpeed1 = 0.0005;
var terrainSpeed2 = 0.0001;
var terrainSpeed3 = 0.0002;
var waterSpeed1 = 0.0001;
var terrainDetail1 = 0.005;
var terrainDetail2 = 0.02;
var terrainDetail3 = 0.05;
var waterDetail1 = 0.001;
var angle = 10;
var birds= [];
function setup() {
createCanvas(400, 600);
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(0,height/4);
birds[i] = makeBirds(rx,ry);
}
frameRate(10);
}
function draw() {
//draw background color
for (var i=0;i<30;i++) {
strokeWeight(15);
stroke(255-i);
line(0,i*15,width,i*15);
}
//far mountains
push();
fill(220);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail3) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height/4, height*3/4);
vertex(x, y);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
//middle mountains
push();
fill(205);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed3);
var y = map(noise(t), 0,1, height*3/8, height*3/4);
vertex(x, y);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
//close mountains
push();
fill(190);
beginShape();
noStroke();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed2);
var y = map(noise(t), 0,1, height/2, height);
vertex(x, y);
}
vertex(width, height);
vertex(0,height);
endShape();
pop();
//river
noFill();
beginShape();
strokeWeight(1);
stroke(255);
//stroke(134,179,194);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y);
}
endShape();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y+10);
}
endShape();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y+20);
}
endShape();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y+30);
}
endShape();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y+40);
}
endShape();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height*8/9, height);
vertex(x, y+50);
}
endShape();
updateAndDisplaybirds();
removebirds();
addbirds();
//makeBoat(mouseX,random(520,525));
push();
translate(mouseX, random(500,505));
noStroke();
fill(255);
beginShape();
vertex(-20,-15);
vertex(20,-15);
vertex(10,0);
vertex(-10,0);
endShape();
pop();
}
function updateAndDisplaybirds(){
// Update the bird's positions, and display them.
for (var i = 0; i < birds.length; i++){
birds[i].move();
birds[i].display();
}
}
function removebirds(){
var birdsToKeep = [];
for (var i = 0; i < birds.length; i++){
if (birds[i].x > 0) {
birdsToKeep.push(birds[i]);
}
}
//birds = birdsToKeep; // remember the surviving birds
}
function addbirds() {
// With a very tiny probability, add a new bird to the end.
var newBirdLikelihood = 0.005;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBirds(width,random(0, height/2)));
}
}
function birdsMove() {
this.x += this.speed;
this.y += random(-this.speed,this.speed);
}
function birdsDisplay() {
translate(this.x,this.y);
noStroke();
fill(100);
//body
ellipse(0,0,20,10);
//head
triangle(-5,3,-15,0,-5,-3);
//tail
beginShape();
vertex(8,-2);
vertex(14,-3);
vertex(14,3);
vertex(8,2);
endShape();
//wings
beginShape();
vertex(-5,0);
vertex(0,-10);
vertex(12,-12);
vertex(3,0);
endShape();
}
function makeBirds(birthLocationX,birthLocationY) {
var birds = {x: birthLocationX,
y : birthLocationY,
speed: -random(.5,1),
move: birdsMove,
display: birdsDisplay}
return birds;
}
For this assignment I try to create an ink painting style graphic. The mountains and birds and rivers are all randomly produced.I made the sky a gradians of grey to increase the sense pf hierarchy. the three layers of mountains are moving with different speeds, and with different steepness.
]]>
This project is a urban infrastructure designed for public area. The device use plastics to create the close space, and inflated with medicinal fog for people to stop by, breathe and connect. It is aim to reinvigorate the Thames River Path, inviting more people to come to the riverside. The devices integrate both plants and human into one space, and try to create a interactive system to make environment suitable for both human and plants. I find this project very interesting because it brings people to reconsider the relation between natural environment and human in an urban context.
The Horticultural Garden by Loop.ph from James Maiki on Vimeo.
Karla Torio Rivera is one of the designers for the production and fabrication. She works as an individual artist in England, digging into ideas for progression within culture, the environment and humanity, and did a lot of unpaid charitable activities like this one.
]]>
This is the original photo.
I relate the mouse movement to the area that is showing the photos
//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a
//project 09
var underlyingImage;
function preload() {
var image = "https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/14572982_354839081529321_6987009359279715749_n.jpg?oh=14016ac2f97e3340a7fb671665b39d1a&oe=589F4AC3";
underlyingImage = loadImage(image);
}
function setup() {
createCanvas(650,650);
background(0);
underlyingImage.loadPixels();
frameRate(1000);
}
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 mousecol = underlyingImage.get(mouseX, mouseY);
//get color fo the tranangle
fill(mousecol);
noStroke();
triangle(mouseX,mouseY,pmouseX,pmouseY,mouseX-random(-1,1),pmouseY+random(-1,1));
//make trangle size related to velocity of mouse movement
}
I found Simmon’s Looking Outwards of the 21 Balancoires really inspiring. It is an urban scale collective instrument which located in a kind of abandoned piece of land. The instrument produced music by the movements of swings. It requires participants’ cooperation to produce the melodies; therefore, it brings people to this area and transforms the abandoned streets into an active urban public space.
I think this idea of renew urban area is really helpful for the US cities today. Most of the urban areas in this country are almost developed and some cities have experience several polulation migration. This, rehabilitating cities would be the most sustainable way for urban planning in this century. By integrating the computational technique and human interactive devices, the decaying urban area could gain a second life with very low financial investments. Simmon also saw the underlying meaning of this instrument within the urban planning context. I think we would both agree that this could be a solution to the current urban planning problems in some recessing cities in developed countries.
]]>
Eyeo 2015 – Jake Barton from Eyeo Festival // INSTINT on Vimeo.
Jake Barton is an American designer, and the Principal and Founder of Local Projects. The firm is an experience design and strategy firm for museums, brands and public spaces based. His work focuses on storytelling and engaging audiences through emotion and technology. They usually create some interactive facilities in the buildings like museums to inspire visitors to memorize what they see by creating their own experience. Barton believe, the learning and thinking that happen in body are most strong. Therefore for the future of memory, they way those museums make people think and engage. I found his idea really inspiring because he makes a innovation to the current mode of museum and enriched visitor’s experience by the way people iterate.
]]>