Category: SectionD

Shannon Ha – Project 10 – Sonic Sketch

sketch

//Shannon Ha
//sha2@andrew.cmu.edu
// Section D
//Project 10 Sonic-Sketch

var underlyingImage;

function preload() { // call loadImage() and loadSound() for all media files here
    scissorSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/scissors-2/");
    combingSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/combing2-2/");
    hairdryerSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/hairdrying-2/");
    spraySnd = loadSound(" https://courses.ideate.cmu.edu/15-104/f2019/spray-2/");
    tadaSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/mirror-2/");
    spraySndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/spray2-2/");
    combingSndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/combing-hair-2/")


    var saloonImg = "https://i.imgur.com/PqazkIh.jpg";
    underlyingImage = loadImage(saloonImg);

}


function setup() {
    createCanvas(500, 500);
    useSound();
}

function soundSetup() { // setup for audio generation
    scissorSnd.setVolume(2);
    combingSnd.setVolume(5);
    hairdryerSnd.setVolume(1);
    spraySnd.setVolume(1);
    tadaSnd.setVolume(1);
}

function draw() {
    background(0);
    image(underlyingImage, 0, 0); // stock photo of the saloon

}

function mousePressed() {
    //makes the sound of hair combing play when the mouse is between the set of XY coordinates boundaries of comb images.
    if (mouseX > 80 & mouseX < 160 & mouseY > 255 & mouseY < 360){
        combingSndB.play();
        }
        else{
            combingSndB.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
        }
    //makes the sound of spray play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 10 & mouseX < 160 & mouseY > 130 & mouseY < 240){
            spraySndB.play();
        }
        else{
            spraySndB.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }

    //makes the sound of hairdrying play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 70 & mouseX < 190 & mouseY > 30 & mouseY < 130){
            hairdryerSnd.play();
        }
        else{
            hairdryerSnd.pause();//pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }

    //makes the sound of combing play when the mouse is between the set of XY coordinate boundaries of combing image.
    if (mouseX > 210 & mouseX < 320 & mouseY > 20 & mouseY < 110){
            combingSnd.play();
        }
        else{
            combingSnd.pause();//pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }
    //makes the sound of spray play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 330 & mouseX < 460 & mouseY > 20 & mouseY < 150){
            spraySnd.play();
        }
        else{
            spraySnd.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }
    if (mouseX > 330 & mouseX < 470 & mouseY > 150 & mouseY < 200){
            scissorSnd.play();
        }
        else{
            scissorSnd.pause();
            }
    if (mouseX > 330 & mouseX < 450 & mouseY > 205 & mouseY < 325){
            tadaSnd.play();
            }
        else{
            tadaSnd.pause();
            }

}

This week I decided to use base my project on the sounds that you would hear at the hair salon. I found a copyright-free image that visualizes the steps the one goes through at a hair salon and I think adding the audio was a good way to show the procedure of getting your hair cut. I don’t know why my sketch won’t load on WordPress but it works so my localhost. Attached below is the image that I used for this project.

*1 grace day used for this project.

Lanna Lang – Project 11 – Landscape

sketch

//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 = [];

function setup() {
    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);
    }
}

function draw() {
    drawBackground();
    drawClouds();
    drawLandscape();

    UandDTrees();
    removeTrees();
    addNewTrees();
    
    UandDHouses();
    removeHouses();
    addNewHouses();

    drawTrain();
}

//function to draw the background and 
//the canvas for the train
function drawBackground() {
    //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
function drawLandscape() {
    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
function drawClouds() {
    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
function drawGradPtoP(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
function drawTrain() {
    //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
function UandDTrees() {
    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
function removeTrees() {
    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
function addNewTrees() {
    var newTreeChance = 0.01;
    if (random(0.1) < newTreeChance) {
        trees.push(makeTree(width, random(281, 330)));
    }
}

//update position of the tree at every frame
function moveTree() {
    this.x += this.speed;
}

//draw the tree and tree trunk
function drawTree() {
    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
function makeTree(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
function UandDHouses() {
    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
function removeHouses() {
    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
function addNewHouses() {
    var newHouseChance = 0.003;
    if (random(0.1) < newHouseChance) {
        houses.push(makeHouse(width, random(300, 350)));
    }
}

//update position of the tree at every frame
function moveHouse() {
    this.x2 += this.speed2;
}

//draw the house and the house roof
function drawHouse() {
    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
function makeHouse(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.

My sketch

Ian Kaneko LO – 10

The Seaboard Rise 49 by ROLI

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.

The Game of Thrones theme played on a Seaboard

Mari Kubota- Project 10- Sonic Sketch

For this project I used my project 3 code as a starting point. The movement in the x coordinate changes the frequency. The movement of the y coordinate changes the amplitude. Mouse press resets the frequency to a certain point. Pressing any key randomizes the frequency. If the firefly is off canvas, the sound automatically stops to prevent from any unsavory sounds.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 10
*/

var x = 300;
var y = 300;
var diameter = 8;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var angle = 0;
var value=0;

var frequency=400.0;
var amplitude= 5;



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

function preload() {
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.TriOsc();
    osc.freq(frequency);
    osc.amp(amplitude);
    osc.start();
}


function draw(){
    background (200-mouseY,220-mouseY,250);
//trees
    translate(100 - mouseX/2, 0);
    fill(0);
    rect (-1000, 400,3050,80);

    rect (30,200,20,200);
    triangle (40,150,80,350,0,350);

    rect (180,200,20,200);
    triangle (190,150,100,350,280,350);

    rect (330,200,20,200);
    triangle (340,150,380,350,300,350);

    rect (530,200,20,200);
    triangle (530,100,640,350,440,350);

    rect (750,200,20,200);
    triangle (750,100,860,350,660,350);

//sun
    fill("red");
    ellipse(30,50,50,50);


//firefly
    fill(value-100, value, value-200);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.1*diffx;
    y = y + 0.1*diffy;
    noStroke();
    ellipse(x, y, diameter, diameter);

//sound
    if(diffx > 0){
        osc.freq(frequency++); // difference in x changes frequency
    } else if(diffx<0){
        osc.freq(frequency--); 
    }    

    if(diffy > 0){
        osc.amp(amplitude++); //difference in y changes amplitude
    } else if(diffy<0){
        osc.amp(amplitude--); 
    }

    if (mouseIsPressed) { // resets frequency to 400
        frequency= 400;
    }

//sound cuts off if firefly is off canvas
    if(x>width+450 || x<-400){
        amplitude=0;
    }

    if(y>height || y<0){
        amplitude=0;
    }

}

//press any key to randomize frequency
function keyPressed(){
    frequency= random(200,2000);
}

Lauren Park – Project – 10 -Sonic Sketch

For this project, because of the weather changes recently, I was inspired to have users interact with the image and listen to different sound effects of weather. When the user clicks on different images, they can expect to hear each sound, including sounds that relate to thunder, wind, rain, as well as sounds you can hear on sunny days. I enjoyed playing around with different sound files to match with images, but it was very challenging getting the sound files to load properly.

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(600, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/4 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.mp3");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

Monica Chang – Looking Outwards – 11

Rosa Menkman

Her website: http://rosa-menkman.blogspot.com/

About page on Menkman’s website
Intro page, Rosa Menkman

Rosa Menkman is a Dutch curator, visual artist and researcher who specializes in digital media and analogue – specifically noise artifacts: glitches, encoding and feedback artifacts. With her artwork, she emphasizes the idea that the process of imposing efficiency, order and functionality does not involve the creation of procedures and solutions, but utilizes ambiguous compromises and the forever unseen and forgotten.

‘Xilitla’ by Rosa Menkman

Menkman is considered to be one of the most iconic video glitch artists as she often utilizes software glitches to develop her stunning pieces. One of her algorithmic pieces, ‘Xilitla’, is a hallucinatory, futuristic 3D architectural environment formed by polygons and other unconventional objects. Using game-like functions, the viewer is allowed to navigate through this graphic landscape using the head-piece in the center. Menkman also considers this particular piece to be one that would best describe her body of other works.

Mari Kubota- Looking Outwards- 10

The Classyfier, created by Benedict Hubener, Stephanie Lee and Kelvyn Marte at the CIID, is a table that detects the beverages people consume around it and chooses music that fits the situation accordingly.

A built in microphone catches characteristic sounds and then compares these sounds to a catalogue of pre-trained examples. The Classyfier identifies it as belonging to one of three classes; hot beverages, wine or beer. Each class has its own playlist that one can navigate through by knocking on the table.

The idea behind this project was to build a smart object that uses machine learning and naturally occurring sounds as input to enhance the ambiance of different situations. The main tools used were Wekinator, Processing and the OFX collection.

Sarah Choi – Project 10 – Interactive Sonic Sketch

project-10

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-10-Interactive-Sonic-Sketch

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

function preload() {
    // call loadImage() and loadSound() for all media files here
    sound1 = loadSound("birds.wav");
    sound2 = loadSound("thunder.wav");
    //sound3 = loadSound("springday.wav");
    sound4 = loadSound("lightshower.wav");
    sound1.setVolume(0.5);
    sound2.setVolume(0.5);
    //sound3.setVolume(0.5);
    sound4.setVolume(0.5);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("Interactive Sonic Sketch");

    //======== call the following to use sound =========
    useSound();

    
    rectMode(CENTER);
}

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.Oscillator();
    osc.freq(880);
    osc.amp(0.1);
    osc.start();
}

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

function draw() {
    background(0);
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;

        sound2.play();
        sound4.play();
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }

    sound1.play();
    //sound3.play();
}

I chose these sounds as I thought they gave a good representation of Pittsburgh when it goes from being a nice spring day that suddenly comes with thunderstorms and a light rain shower.

Shannon Ha – Looking Outwards – 10

Photo taken from https://itp.nyu.edu/classes/cc-s18/gesture-controlled-musical-gloves/

The mi.mu gloves can be defined as a wearable musical instrument for expressive creation, composition, and performance. These gloves were the creation of music composer and songwriter Imogen Heap, who wrote the musical score for Harry Potter and the Cursed Child. Her aim in creating these gloves is to push innovation and share resources. She believes that these gloves will allow musicians and performers to better engage fans with more dynamic and visual performances, simplify the hardware that controls music (laptops, keyboards, controllers) and connect movement with sound.

The flex sensors are embedded in the gloves which measure the bend of the fingers, the IMU measures the orientation of the wrist. All the information received by these sensors is communicated over wifi. There is also a vibration motor implemented for haptic feedback. With the glove comes software that allows the user to program movements to coordinate with different sounds. Movements can be coordinated with MIDI and OSC.

I believe this piece of technology really pushes the boundaries of computational music as it allows musicians to have complete agency over electronically generated sounds through curated body movement without having to control sounds through a stationary piece of hardware. Performers, in particular, could benefit heavily from these gloves as their artistry moves beyond music and into how body language is incorporated with sound.  As a designer, I personally admire how she was able to use advanced technology to create these novel experiences not only for the performer but also for the audience. There are instances where the use of technology can hinder artistry especially when it is overused, but I think these gloves allow musicians to connect more with the music and how it’s being presented to the audience.

Cathy Dong-Looking Outwards-10

Apparatum

“Apparatum,” commissioned by Adam Mickiewicz Institute, is a musical and graphical installation inspired by the Polish Radio Experimental Studio, which is one of the first studios to produce electroacoustic music. It is the fruit of digital interface meeting analog sound. The sound is generated based on magnetic tape and optical components. Boguslaw Schaeffer comes up with his personal visual language of symbols and cues and composes “symphony—Electronic Music” for the sound engineers. With two 2-track loops and three 1-shot linear tape samplers, they obtain noise and basic tones. They utilize analog optical generators based on spinning discs with graphical patterns.