// Jai Sawkar
// Section C
// jsawkar@andrew.cmu.edu
// Project 10 - Sonic Sketch
functionpreload(){var facesURL ="https://i.imgur.com/3aPIhhm.jpg?" //picture of 4 people
famPic =loadImage(facesURL); //sets fam pic as the variable
hi1 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi1.wav");
hi2 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi2.wav");
hi3 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi3.wav");
hi4 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi4.wav");}functionsetup(){createCanvas(580,366);useSound();}functionsoundSetup(){ //sets the volume so they do not play so loud it frightens people
hi1.setVolume(.5);
hi2.setVolume(.5);
hi3.setVolume(.5);
hi4.setVolume(.5);}functiondraw(){ //simply places the picture to fill the canvas
background(200);image(famPic,0,0)}functionmousePressed(){ // allows that if the mouse presses on person, it plays & pauses the associated song
if(mouseX >0& mouseX <134){
hi1.play();}else{
hi1.pause();}if(mouseX >134& mouseX <314){
hi2.play();}else{
hi2.pause();}if(mouseX >314& mouseX <454){
hi3.play();}else{
hi3.pause();}if(mouseX >454& mouseX < width){
hi4.play();}else{
hi4.pause();}}
This week, I used sound to make a simple, yet interactive sketch of different people saying hi! I will say it took some time to play with how I to actually put sound in my sketch. After I did that, it took some time to then figure out how to reduce the volume of the sound files. Once all that was done, it was a matter of using previous skills to incorporate mouse-use into the sketch.
// USE BROWSER OTHER THAN CHROME TO PLAY
// I didn't have to set up a terminal to run my code but you might
// need to set up one in order to run the index
// My audio files for the cackle and bat dance were longer, but I had to trim
// them down in order to make my folder size smaller.
/* Ammar Hassonjee
ahassonj@andrew.cmu.edu
15104 Section C:
Project 10 - Sonic sketch
*/
// Global variables declared for the pong game
var ballx =0;var bally =250;var dir1 =1;var dir2 =1;var speedx =5;var speedy =3;
// variables for changing the background
var bluetone =0;var increment =1;var framecount =0;functionpreload(){ // call loadImage() and loadSound() for all media files here
// witch cackle sound loaded for ending the game
cackle =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cackleTrimmed.wav");
cackle.setVolume(0.5); // first type of bounce noise loaded
bounce =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bounce.wav");
bounce.setVolume(0.5); // background game music loaded
backMusic =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bat-danceTrimmed.wav");
backMusic.setVolume(0.5); // second type of bounce noise loaded
bounce2 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/shootingStar.wav");
bounce2.setVolume(0.5);}functionsetup(){createCanvas(480,480); //======== call the following to use sound =========
useSound(); // beginning to play the background music
backMusic.play()}functionsoundSetup(){ // setup for audio generation
// I've included an empty soundSetup function because
// the code doesn't run without it for some reason
}functiondraw(){ // changing the game background to a gradient
bluetone += increment;if(bluetone ===255){
increment =-1;}if(bluetone ===0){
increment =1;}background(0,0, bluetone);ellipse(ballx, bally,60,60);
ballx += dir1 * speedx;
bally += dir2 * speedy; // Making ball bounce off the right
if(ballx >=(width -30)){
dir1 =-dir1; // Playing the first bounce noise once the ball hits the wall
bounce.play();} // Making the ball bounce off the top and bottom
if(bally >=(height -30)|| bally <30){
dir2 =-dir2; // Playing the first bounce noise once the ball hits the wall
bounce.play();} // Making the ball bounce using the mouse
if(ballx < width /2& dir1 ===-1){if(dist(mouseX, mouseY, ballx, bally)<30){
speedY =random(-10,10);
dir1 =-dir1; // Playing the second bounce noise once the ball hits the mouse
bounce2.play();}} // Getting the background music to loop continuously
framecount++;if(framecount %300===0){
backMusic.play();}if(ballx <0){ // Playing the sinsister cackle to indicate you lost the game
cackle.play();
backMusic.stop();textSize(20);textAlign(CENTER);fill(255);text("Uh-oh. Better luck next time.", width /2, height /2);noLoop();}}
For this project, I was inspired by the pong game we had made earlier, and I wanted to add sound to make it a more interesting like game. I added background music that loops continuously, a bounce sound effect for when the ball bounces off the walls and a different noise when the user touches the ball. Then I also added a cackle to indicate the game is over when the ball touches the left side.
“I am using 1 of my grace days for this late
submission.”
Anders Lind is a great Swedish artist who actively uses computation to compose and perform music. Also a creative director at the Umea University, he composes music mainly for orchestras, choirs, and various ensembles and solo performers.
For this blog post, I was mainly interested in his 2016 exhibition, Lines, which brings musical experience to the field of electronics or interactive technology. In this experimental exhibition, the lines are attached to either wall, floor or hung to ceiling with sensors that create pitch of sound when interrupted by human body. The scale of the exhibition also encourages the visitor to be creative about music making and corporate with others to create musical harmony.
No musical background is required to enjoy the program. The video also shows different group of people interacting, including children.
I am using a Looking Outwards grace day for this assignment.
In 2013, professor Francisco Vico of the University of Malaga created Iamus, a computer that can generate classical music scores at the touch of a button. According to Vico, Iamus’s scores become increasingly more complex as they evolve throughout their duration, giving them a dynamic flow beyond a random progression of notes. The algorithm behind Iamus is inspired by human biological processes, and then a human selects from the pieces Iamus provides. This work is admirable because it is ground breaking, introducing artificial intelligence to the world of art and music in a new way. It is very interesting to see the progression of these technologies, and Iamus is just the beginning of a new era in the world of music.
//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 11 - Landscape
//variables for the gradients;
var yAxis =1;var c1, c2, c3, c4, c5; //background colors
//variables to draw the clouds
var cloudX =[500,700,1200];var cloudY =[150,120,190];var cloudDist =5; //the distance the cloud moves
//arrays for the tree and house objects
var trees =[];var houses =[];functionsetup(){createCanvas(480,480);frameRate(20);
c1 =color('#9a99d3'); //background sky lavender
c2 =color('#ff829f'); //background sky pink
c3 =color('#f6944d'); //background sky orange
c4 =color('#a29078'); //train color 1
c5 =color('#f2f2f4'); //train color 2
//create an initial collection of trees
for(var i =0; i <10; i++){var rtx =random(width);var rty =random(281,330);
trees[i]=makeTree(rtx, rty);} //create an initial collection of houses
for(var i =0; i <10; i++){var rhx =random(width);var rhy =random(300,350);
houses[i]=makeHouse(rhx, rhy);}}functiondraw(){drawBackground();drawClouds();drawLandscape();UandDTrees();removeTrees();addNewTrees();UandDHouses();removeHouses();addNewHouses();drawTrain();}
//function to draw the background and
//the canvas for the train
functiondrawBackground(){ //rectangle around full canvas
drawGradDGtoG(0,0, width, height, c4, c5, yAxis); //draw the sky with gradients
drawGradPtoP(35,100,400,80, c1, c2, yAxis);drawGradPtoO(35,181,400,105, c2, c3, yAxis);}
//draw the landscape inside the train windows
functiondrawLandscape(){var mtnSpeed =0.0005;var mtnDetail =0.01; //draw the moutains
stroke('#445c3c');for(var x =35; x <=435; x++){var t =(x * mtnDetail)+(millis()* mtnSpeed);var y =map(noise(t),0,1,170,300);line(x, y, x,380);} //draw the grass/horizon
noStroke();fill('#798f44');rect(35,281,400,107);}
//draw the clouds
functiondrawClouds(){for(var i =0; i < cloudX.length; i++){
cloudX[i]-= cloudDist; //the clouds move 5 pixels to the left
//draw the 3 clouds
noStroke();fill('#faa3b1');ellipse(cloudX[i], cloudY[i]+10,100,8);ellipse(cloudX[i]-24, cloudY[i]+1,30,20);ellipse(cloudX[i]+3, cloudY[i],40,22);ellipse(cloudX[i]-5, cloudY[i]-10,40,20);ellipse(cloudX[i]+22, cloudY[i],30,18); //when the clouds reach the end of the canvas,
//they will reset back at the other side of the canvas
//at a random x postion between 500 and 1300
if(cloudX[i]<0){
cloudX[i]=random(500,1300);}}}
//function to draw gradient from purple to pink
functiondrawGradPtoP(x, y, w, h, c1, c2, axis){noFill();if(axis == yAxis){for(var i = y; i <= y + h; i++){var inter =map(i, y, y + h,0,1);var cPtoP =lerpColor(c1, c2, inter);stroke(cPtoP);line(x, i, x + w, i);}}}
//function to draw gradient from pink to orange
function drawGradPtoO (x, y, w, h, c2, c3, axis){noFill();if(axis == yAxis){for(var i = y; i <= y + h; i++){var inter =map(i, y, y + h,0,1);var cPtoO =lerpColor(c2, c3, inter);stroke(cPtoO);line(x, i, x + w, i);}}}
//function to draw gradient from tan to light grey
function drawGradDGtoG (x, y, w, h, c4, c5, axis){noFill();if(axis == yAxis){for(var i = y; i <= y + h; i++){var inter =map(i, y, y + h,0,1);var cDGtoG =lerpColor(c4, c5, inter);stroke(cDGtoG);line(x, i, x + w, i);}}}
//function to draw the train
functiondrawTrain(){ //redraw the very left and right sides of the train
//because of the clouds moving
drawGradDGtoG(0,0,35, height, c4, c5, yAxis);drawGradDGtoG(435,0,490, height, c4, c5, yAxis); //rectangle to separate the sky gradient into two windows
drawGradDGtoG(210,0,60, height, c4, c5, yAxis); //dark brown line in the middle
noStroke();fill('#2e2423');rect(235,0,10, height); //black rect sign under windows
fill(0);rect(280,400,140,20);rect(50,400,140,20); //dark brown window frames
strokeWeight(2);stroke('#2e2423');noFill();rect(30,85,185,310);rect(265,85,175,310); //sign under windowa that says "Do not lean on train door"
fill(224);textSize(11);textStyle(BOLD);text("Do not lean on train door",284,413);text("Do not lean on train door",54,413); //draw the door handles on the train doors
stroke(193);fill(220);rect(180,440,35,70);rect(265,440,35,70); //draw the insides of the door handles
fill(130);rect(190,450,15,70);rect(275,450,15,70); //draw the train handles
for(var j =0; j < width +50; j +=150){stroke(200);strokeWeight(13);noFill();line(j,0, j,70);line(j,70, j +33,130);line(j,70, j -30,130);line(j -30,130, j +33,130);}}
//update the tree's positions, and display them
functionUandDTrees(){for(var i =0; i < trees.length; i++){
trees[i].move();
trees[i].draw();}}
//if a tree has dropped off the left edge,
//remove it from the array
functionremoveTrees(){var treesToKeep =[];for(var i =0; i < trees.length; i++){if(trees[i].x + trees[i].tw >0&
trees[i].y + trees[i].th >0){
treesToKeep.push(trees[i]);}}
trees = treesToKeep; //remember the surviving trees
}
//with a very tiny probability, add a new tree to the end
functionaddNewTrees(){var newTreeChance =0.01;if(random(0.1)< newTreeChance){
trees.push(makeTree(width,random(281,330)));}}
//update position of the tree at every frame
functionmoveTree(){this.x +=this.speed;}
//draw the tree and tree trunk
functiondrawTree(){noStroke();fill('#c39a2b');push();translate(this.x,this.y);triangle(0,-this.th,0-this.tw /2,0,0+this.tw /2,0);pop();fill('#512a17');push();translate(this.x,this.y);rect(-3,0,4,5);pop();}
//this function accepts parameters and uses the values
//of those parameters to initialize fields in the tree object
functionmakeTree(birthLocationX, birthLocationY){var mktr ={x: birthLocationX,
y: birthLocationY,
tw:random(5,15),
speed:-5.0,
th:random(15,30),
move: moveTree,
draw: drawTree}return mktr;}
//update the house's positions, and display them
functionUandDHouses(){for(var i =0; i < houses.length; i++){
houses[i].move();
houses[i].draw();}}
//if a house has dropped off the left edge,
//remove it from the array
functionremoveHouses(){var housesToKeep =[];for(var i =0; i < houses.length; i++){if(houses[i].x2 + houses[i].hw >0&
houses[i].y2 + houses[i].hh >0){
housesToKeep.push(houses[i]);}}
houses = housesToKeep; //remember the surviving houses
}
//with a very tiny probability, add a new house to the end
functionaddNewHouses(){var newHouseChance =0.003;if(random(0.1)< newHouseChance){
houses.push(makeHouse(width,random(300,350)));}}
//update position of the tree at every frame
functionmoveHouse(){this.x2 +=this.speed2;}
//draw the house and the house roof
functiondrawHouse(){noStroke();fill('#e7d2a0');push();translate(this.x2,this.y2);rect(-10,0,20,10);pop();fill('#95221b');push();translate(this.x2,this.y2);triangle(0,-this.hh /2,0-this.hw /2,0,0+this.hw /2,0);pop();}
//this function accepts parameters and uses the values
//of those parameters to initialize fields in the house object
functionmakeHouse(birthLocationX2, birthLocationY2){var mkh ={x2: birthLocationX2,
y2: birthLocationY2,
hw:random(10,40),
speed2:-5.0,
hh:random(10,30),
move: moveHouse,
draw: drawHouse}return mkh;}
When I first read this prompt, what came up to my mind immediately was creating a landscape that mimics what I see when sitting on a high-speed train. My favorite sceneries are usually what I see when I pass by complete cities in just a few hours on those trains. I had a lot of fun creating this landscape, but it was also very challenging for me. It definitely took me more than a couple of hours, but it was worth it.
On the topic of computer-generated music, I found this album by David Cope titled Classical Music Composed by Computer: Experiments in Musical Intelligence created in 1997 A professor from the University of California at Santa Cruz, he started as a trained musician but found a keen interest in the world of computing as it rose in popularity. David Cope realized how his musical approached paralleled that of programing. At that point in his life, he discovered the opportunity to explore where music meets computing. Eventually, Cope decided to create a program called the Experiments in Music Intelligence. The program would generate music based on data collected by various scores and even Cope’s music. In the album Classical Music Composed by Computer: Experiments in Musical Intelligence, the program generated the sheet music that the musicians would play from that would be recorded. What I admire about this work is how it finds a balance between human-made sound and generative computing. At its final stage, the song is made by an instrument, but the original song is derived from a computer program.
//ilona altman
//project 10
//iea@andrew.cmu.edu
//var music; // this is some background music I made myself
var music1; // pieces of interview on narrative vs poetic filming
var music2; // excerpt from as I was moving ahead occasionally I saw breif glimpses of beauty
var music3; // advice to the young
var music4; //except from the begining of his film lost lost lost
var theImage; // this is the background image
functionpreload(){
//music = loadSound('music0.mp3'); // preloading sound
music1 =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music1.mp3')
music2 =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music2.mp3')
music3 =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music3.mp3')
music4 =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music4.mp3')var myImageURL ="https://i.imgur.com/nyJdNSY.png"; //image
theImage =loadImage(myImageURL); //image
}functionsoundSetup(){ // setup for audio generation
}functionsetup(){createCanvas(600,600);background(255,255,255);noStroke();frameRate(20);
theImage.loadPixels(); //loading the image pixels
useSound(); //sound
// music.play(); //sound
// music.loop(); //loop the sound
}functiondraw(){
//going through all pixels of jonas mekas attriubution
background(255,255,255);for(x =0; x < width+10; x++){for(y =0; y < height+10; y++){var pixelColorXY = theImage.get(x,y);fill(pixelColorXY);ellipse(x, y,random(0,2),random(0,2));}}
//creating red rain
for(x =0; x < width+10; x=x+10+random(3,10)){for(y =0; y < height+10; y=y+10+random(3,10)){fill(255,0,0);ellipse(x, y,random(0,2),random(0,3));ellipse(x-1,y-1,random(0,2),random(0,3));ellipse(x+1,y+1,random(0,2),random(0,3));}}}functionmousePressed(){if(mouseX > width/2& mouseY > height/2){ // left top
music1.play();}elseif(mouseX > width/2& mouseY < height/2){ // left bottom
music2.play();}elseif(mouseX < width/2& mouseY > height/2){ // right top
music3.play();}elseif(mouseX < width/2& mouseY < height/2){// right bottom
music4.play();}}
This work was inspired very much by Jonas Mekas, who is one of my favorite artists and filmmakers… He past away about a year ago but still holds such a warm presence. He speaks often about beauty and poetry. I wanted this piece to almost be like a little tribute to him and his work, with sounds pulled from various interviews with him and his films.
Prelude in ACGT, a project created by Pierry Jacquillard at Ecole cantonale d’art de Lausanne’s Media and Interaction Design Unit, explores the literal relationship between the biology and music using the creator’s own DNA. The tools extract Jacquillard’s DNA and convert it into music.
Throughout Jacquillard’s studies, he has always been profoundly captivated by the connections made between highly organic structures and artificial structures brought to life through man; his interest lies in the contrasting nature of the two opposing ends of the spectrum, which he believes to provide means of creating long-lasting interpretations of the product. He explains, “This Prelude is important for me, as the technological advances are taking any data (including music) and turn them into DNA in order to save them for almost eternity as they promise. But for me, the most important is more the interpretation of a code rather than the materialism of the code itself. I think that maybe we are just generating data that will last centuries but the key to retrieve them won’t. They could be a kind of post-digital hieroglyphs.”
This project relies on five interfaces that ignite the interaction between biology and music, change sound qualities, and visualize the individual components. The visualizations are demonstrated through different web applications on iPads. I appreciate the comprehensive process of his using only Javascript to interpret and convert the data into statement graphics.
In the prompt it mentioned discussing new computational instruments. I asked my friend who is a member of CMU’s exploded ensemble what their favorite piece of tech that they used in the ensemble. What I found out about was a cool instrument called the Seaboard Rise.
What I admire about it is that it took one of the most harmonically capable instruments (the piano) and addressed its main weaknesses. Those being the the lack of different timbres and the limited expressiveness.
The seaboard is very akin to a super synthesizer. You can download and install different sounds that you want the instrument to produce and can change them real time which addresses the timbre problem I previously mentioned. It also allows for slides and vibrato, two very expressive aspects of music that are unavailable to real pianos.
The product was created by the company ROLI, so it hard to pinpoint a specific creator of the project. I think that the pure quality of the instrument shows how much the creators really cared about this and saw the effects it could have on the future of music.
/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Project-10-Sonic Sketch
*/var angry;var happy;var puzzled;var sad;functionpreload(){ // call loadImage() and loadSound() for all media files here
angry =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/angry-1.wav");
happy =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/happy.wav");
puzzled =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/puzzled.wav");
sad =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sad.wav");}functionsetup(){ // you can change the next 2 lines:
createCanvas(400,100);background(255); //======== call the following to use sound =========
useSound();}functionsoundSetup(){ // setup for audio generation
// you can replace any of this with your own audio code:
angry.setVolume(1);
happy.setVolume(2);
puzzled.setVolume(1);
sad.setVolume(1);}functiondraw(){background(255); //angry
fill("red");rect(0,0,100,100);fill("black");arc(20,30,10,10,0, PI);arc(80,30,10,10,0, PI);line(25,80,75,80); //happy
fill("yellow");rect(100,0,100,100);fill("black");ellipse(120,30,10,10);ellipse(180,30,10,10);arc(150,50,80,80,0, PI); //puzzled
fill("green");rect(200,0,100,100);fill("black");ellipse(220,30,10,10);ellipse(280,30,10,10);ellipse(250,80,10,10); //sad
fill("blue");rect(300,0,100,100);fill("black");line(315,30,325,30);line(375,30,385,30);arc(350,90,80,80, PI,0);}functionmousePressed(){ //setting mousepresed location
if(mouseX >0& mouseX <100){
angry.play();}else{
angry.pause();}if(mouseX >100& mouseX <200){
happy.play();}else{
happy.pause();}if(mouseX >200& mouseX <300){
puzzled.play();}else{
puzzled.pause();}if(mouseX >300& mouseX < width){
sad.play();}else{
sad.pause();}}
In this project, I created 4 different emojis: angry, happy, puzzled and sad. The associated sound plays when the mouse is pressed.