Month: November 2019

Jacky Tian’s Project 10

sketch

// Project 10
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var unit = 50
var angle = 0

function preload() {
    s1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound1.wav");
    s2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound2.wav");
    s3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound3.wav");
    
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    myOsc = new p5.TriOsc();
    myOsc.freq(880.0);
    myOsc.setType('sine');
    myOsc.amp(0.1);
    myOsc.start();
}



    // you can replace any of this with your own code:
function draw() {
    background(0);
    fill(mouseX, mouseY, 150);
    rect(0, 0, width, 160);
    fill(150, mouseY, mouseX);
    rect(0, 160, width, 160);
    fill(mouseY, 150, mouseX);
    rect(0, 320, width, 160);
    var len = 480 - mouseX
    var sta = 640 - mouseY 
    var freq = mouseX * 10

    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;

    var freq = mouseX * 10
    var amp = len
    myOsc.freq(freq);
    
}

function mousePressed() {

    if (mouseY > 0 & mouseY < 160){
        s1.play();
    } else {
        s1.pause();
    }

    if (mouseY > 160 & mouseY < 320){
        s2.play();
    } else {
        s2.pause();
    }

    if (mouseY > 320 & mouseY < 480){
        s3.play();
    } else {
        s3.pause();
    }


}

For this project, I used my project 3 as the base image. I created 3 mouse press zones in different colors and when someone presses mouse on these three zones, three different sounds will play. The sound will pause if someone presses the mouse on a different zone.

Sammie Kim— Looking Outwards—11

Angela Washko is a digital artist who creates experimental games and entertainment that often revolves around feminist themes. One project that really stood out to me is called The Game, which won the Impact Award at Indiecade. As a feminist video game, this project presents an “exploration of consent and the politics, tactics and practices of the male pick-up artist and seduction community.” The format resembles a dating simulator, where players experience several seduction techniques deriving from instructional books and seduction coaches (pickup artists. The pickup gurus attempt to seduce the player, where six prominent coaches try to gain the player’s attention at a bar—an opportunity for players to explore the complex social behavior and psychology behind dating, as well as experience being a femme-presenting individual exploring this difficult and risky path. I found this game to provoke a reflective process step by step, as it allows us to virtually explore and manipulate, while simultaneously complicit in the frequent dehumanizing behavior. This game is unique as it’s composed entirely of scenarios moving on, providing a digital narrative that satirizes this convoluted system of power and desire in the world of contemporary sex and dating.

Exhibition of The Game at The Museum of Moving Image
People playing through The Game in the museum
A dialogue scene captured in The Game

Link to the artist’s website:  https://angelawashko.com/section/437138-The-Game-The-Game.html

SooA Kim: Project-10-Sonic-Sketch


sookim_w10

I made my own audio segments, where if you press “play all” you can hear the music in one piece. Each character is assigned with different musical instruments.

/* SooA Kim
Section C
sookim@andrew.cmu.edu
Week 10 Project - Sonic Sketch
*/

var inst1; 
var inst2;
var inst3;
var bell;
var img;

function preload() {
    // call loadImage() and loadSound() for all media files here
    var myImageURL = "https://i.imgur.com/kxau9oQ.jpg"
    img = loadImage(myImageURL);

    inst1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Kalimba.wav");
    inst2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/MA.wav");
    inst3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Piano.wav");
    bell = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bell1.wav");
    inst1.setVolume(1);
    inst2.setVolume(1);
    inst3.setVolume(1);

}


function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 300);

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

}
 

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:

}


function draw() {
    background(156, 202, 255);
    image(img, 0, 0);

 //play all instruments
    fill(255);
    textSize(32);
    textAlign(CENTER, CENTER);
    textFont("Apple Chancery")
    text("Play All", width/2, 250);
}
    //plays each instrument when mouse is pressed 
function mousePressed() {
    if (mouseX > 0 & mouseX < 100 && mouseY > 0 && mouseY < 200) {
        inst1.play();
    } else {
        inst1.pause();
    }

    if (mouseX > 100 & mouseX < 200 && mouseY > 0 && mouseY < 200) {
        inst2.play();
    } else {
        inst2.pause();
    }

    if (mouseX > 200 & mouseX < 300 && mouseY > 0 && mouseY < 200) {
        inst3.play();
    } else {
        inst3.pause();
    }

    if (mouseX > 300 & mouseX < 400 && mouseY > 0 && mouseY < 200) {
        bell.play();
    } else {
        bell.pause();
    }

    if (mouseX > 0 & mouseX < 400 && mouseY > 200 && mouseY < 300) {
        playAll(); 
    }
    
}

function playAll(){
    inst1.play();
    inst2.play();
    inst3.play();
    bell.play();
}
/*
function pauseAll(){
    inst1.pause();
    inst2.pause();
    inst3.pause();
    bell.pause();
}
*/

Cathy Dong-Project-10-Interactive Sonic Sketch

sketch

/*  Cathy Dong
    yinhuid
    section D
    project-10-Interactive Sonic Sketch 
*/

var myOsc; //piano sound
var mySnd; //wave sound
var keyNum1 = 7; //lower key num
var keyNum2 = 5; //upper key num
var keyY = 0; //key y start from 0
var size = 20; //ball size


function preload() {
    // load wave sound
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sea.wav");
    mySnd.setVolumn(0.1);
}


function setup() {
    createCanvas(480, 360);
    //call to use sound
    useSound();
}

// piano sound
function soundSetup() { // setup for audio generation
    myOsc = new p5.Oscillator();
    // piano sound setting
    myOsc.amp(5);
    myOsc.freq(0);
    myOsc.start();
}


function draw() {
    background(0);
    //draw piano
    pianoDraw();
    //draw yellow dot
    pressDraw();
    // play piano when pressed on
    if (mouseIsPressed) {
        mySnd.play();
        // upper keys
        if (mouseY < height / 3 * 2) {
            var keyWidth = width / keyNum1 / 2;
            var keyGap = width / keyNum1 / 4 * 3;
            // upper 1
            if (mouseX > keyGap & mouseX < keyGap + keyWidth) {
                myOsc.freq(277.18);
            }
            //upper 2
            else if (mouseX > keyGap * 2 + keyWidth / 2 & mouseX < keyGap * 2 + keyWidth * 1.5) {
                myOsc.freq(311.13);
            }
            //upper 3
            else if (mouseX > keyGap * 3 + keyWidth * 3 & mouseX < keyGap * 3 + keyWidth * 4) {
                myOsc.freq(369.99);
            }
            //upper 4
            else if (mouseX > keyGap * 4 + keyWidth * 3.5 & mouseX < keyGap * 4 + keyWidth * 4.5) {
                myOsc.freq(415.3);
            }
            //upper 5
            else if (mouseX > keyGap * 4 + keyWidth * 5.5 & mouseX < keyGap * 4 + keyWidth * 6.5) {
                myOsc.freq(466.16);
            }
        }
        // lower keys
        else if (mouseY > height / 3 * 2) {
            var keyWidth = width / keyNum1;
            // lower 1
            if (mouseX > 0 & mouseX < keyWidth) {
                myOsc.freq(261.63);
            }
            // lower 2
            else if (mouseX > keyWidth & mouseX < keyWidth * 2) {
                myOsc.freq(293.66);
            }
            //lower 3
            else if (mouseX > keyWidth * 2 & mouseX < keyWidth * 3) {
                myOsc.freq(329.63);
            }
            //lower 4
            else if (mouseX > keyWidth * 3 & mouseX < keyWidth * 4) {
                myOsc.freq(349.23);
            }
            //lower 5
            else if (mouseX > keyWidth * 4 & mouseX < keyWidth * 5) {
                myOsc.freq(392.00);
            }
            //lower 6
            else if (mouseX > keyWidth * 5 & mouseX < keyWidth * 6) {
                myOsc.freq(440.00);
            }
            //lower 7
            else if (mouseX > keyWidth * 6 & mouseX < width) {
                myOsc.freq(493.88);
            }
        }
    }

}

//draw mouse location as a yellow dot
function pressDraw() {
    noStroke();
    fill('yellow');
    ellipse(mouseX, mouseY, size, size);
}

//draw piano keyboards
function pianoDraw(){
    //lower keys
    stroke(0);
    strokeWeight(1);
    fill(255);
    for (var i = 0; i < keyNum1; i++) {
        var keyWidth = width / keyNum1;
        var keyX = i * keyWidth;
        var keyHeight = height;
        rect(keyX, keyY, keyWidth, keyHeight);
    }

    //upper keys
    fill(0);
    for (var j = 0; j < keyNum2; j++) {
        var keyWidth = width / keyNum1 / 2;
        var keyGap = width / keyNum1 / 4 * 3;
        var keyX = keyGap * (j + 1) + keyWidth * j / 2;
        var keyHeight = height / 3 * 2;
        //left two
        if (j < 2) {
            rect(keyX, keyY, keyWidth, keyHeight);
        }
        //right three
        else {
            var newX = keyX + keyWidth * 2;
            rect(newX, keyY, keyWidth, keyHeight);
        }
        
    }
}

This project creates keyboard with different pitches as a piano. A beach setting sound with waves and laughter is added as background.

 

Sewon Park – Project 10

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 10

var sound1;
var sound2;
var sound3;
var sound4;

function preload() {
    sound1 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/378641__13fpanska-kolar-jan__fire-stick-shake-2.wav');
    sound2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/476202__djmistressm__rain-drips.mp3');
    sound3 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/85602__jankoehl__walk-forest02.wav');
    sound4 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/459977__florianreichelt__soft-wind.mp3'); //saving sounds
}

//I have no clue why the sounds are not loading 


function setup() {
    createCanvas(400, 400);
    background(220);
    useSound(); 
}

function soundSetup() {
    sound1.setVolume(1); 
    sound2.setVolume(1);
    sound3.setVolume(1);
    sound4.setVolume(1);
}

function draw() {
fill(0,0,0);
rect(0,0,200,200); //black square

fill(255,0,0);
noStroke();
ellipse(100,150,50,50);
noStroke();
triangle(78,140,100,100,122,140)
fill(255,255,0);
ellipse(100,160,30,30); //fire


fill(0,255,0);
rect(0,200,200,200);
fill(220,180,130); //green square
  
rect(100,350,10,40);
fill(0,100,0);
triangle(90,360,105,300,120,360) //tree

fill(0,0,255);
rect(200,0,200,200); //Blue Square
  
for (var x=210; x<600; x=x+20) {
   for(var y=10; y<190; y= y+20) {
   stroke(135,206,235);
   fill(135,206,235);
   rect(x,y,1,10); //rain on background
        }

fill(255);
rect(200,200,200,200); //White Square
  
fill(130,200,230);
rect(270,350,70,5);
arc(280, 325, 60, 60, HALF_PI, PI); //wind symbol
}
}


function mousePressed() {
    // When mouse is pressed, appropriate sounds play

    if (mouseX < 200 & mouseY < 200) {
        sound1.play();
    } else {
        sound1.pause();
    } //Makes sound 1 for black square

    if (mouseX > 200 & mouseY < 200) {
        sound2.play();
    } else {
        sound2.pause();
    } //Makes sound 2 for blue square)

    if (mouseX < 200 & mouseY > 200) {
        sound3.play();
    } else {
        sound3.pause();
    } //Makes sound 3 for green square)

    if (mouseX > 200 & mouseY > 200) {
        sound4.play();
    } else {
        sound4.pause();
    } //Makes sound 4 for white square

}

For this project I used “The Last Airbender” as the theme. I drew the four elements and had sounds that correlated to the element playing when the mouse is clicked.

(Grace Day Used)

Katrina Hu – Project 10 – Sonic Sketch

sketch_project10

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

function preload() {
    evilLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/evillaugh.wav");
    evilLaugh.setVolume(0.5);

    womanLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/womanlaugh.wav");
    womanLaugh.setVolume(0.5);

    maniacalLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/maniacallaugh.wav");
    maniacalLaugh.setVolume(0.5);

    childLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/childlaugh.wav");
    childLaugh.setVolume(0.5);
}


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


function soundSetup() { 

}


function draw() {
    noStroke();
    //blue background
    fill(204, 224, 255);
    rect(0, 0, 120, 120);
    fill(74, 143, 255);
    ellipse(60, 60, 100, 100);
    fill(0);
    ellipse(40, 40, eyeSize1);
    ellipse(80, 40, eyeSize1);
    fill(255, 255, 255);
    ellipse(40, 38, eyeSize1 / 3);
    ellipse(80, 38, eyeSize1 / 3);
    fill(189, 100, 87);
    arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
    //yellow background
    fill(255, 252, 204);
    rect(120, 0, 120, 120);
    fill(255, 246, 82);
    ellipse(180, 60, 100, 100);
    fill(0);
    ellipse(160, 40, eyeSize2);
    ellipse(200, 40, eyeSize2);
    fill(255, 255, 255);
    ellipse(160, 38, eyeSize2 / 3);
    ellipse(200, 38, eyeSize2 / 3);
    fill(189, 100, 87);
    arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
    //pink background
    fill(255, 204, 204);
    rect(240, 0, 120, 120);
    fill(255, 90, 82);
    ellipse(300, 60, 100, 100);
    fill(0);
    ellipse(280, 40, eyeSize3);
    ellipse(320, 40, eyeSize3);
    fill(255, 255, 255);
    ellipse(280, 38, eyeSize3 / 3);
    ellipse(320, 38, eyeSize3 / 3);
    fill(189, 100, 87);
    arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
    //green background
    fill(222, 255, 214);
    rect(360, 0, 120, 120);
    fill(138, 255, 138);
    ellipse(420, 60, 100, 100);
    fill(0);
    ellipse(400, 40, eyeSize4);
    ellipse(440, 40, eyeSize4);
    fill(255, 255, 255);
    ellipse(400, 38, eyeSize4 / 3);
    ellipse(440, 38, eyeSize4 / 3);
    fill(189, 100, 87);
    arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
    //play sound if pressed in blue box
    if(mouseX <= 120) {
        eyeSize1 = random(8, 15);
        mouthWidth1 = random(40, 55);
        evilLaugh.play();
    }
    //play sound if pressed in yellow box
    if(mouseX > 120 & mouseX <= 240) {
        eyeSize2 = random(8, 15);
        mouthWidth2 = random(40, 55);
        womanLaugh.play();
    }
    //play sound if pressed in pink box
    if(mouseX > 240 & mouseX <= 360) {
        eyeSize3 = random(8, 15);
        mouthWidth3 = random(40, 55);
        maniacalLaugh.play();
    }
    //play sound if pressed in green box
    if(mouseX > 360 & mouseX <= 480) {
        eyeSize4 = random(8, 15);
        mouthWidth4 = random(40, 55);
        childLaugh.play();
    }

}

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.

CJ Walsh – Looking Outwards 10 – Computer Music

Dezeen video about Imogen Heap’s Mi Mu gloves

For this week’s Looking Outwards I decided to focus on Imogen Heap, a British singer-songwriter and audio engineer. I really admire her work as an artist because she has taken her musical vision beyond just creating music but has experimented with new ways in which to create. One of the projects she is best known for is the Mi Mu gloves, which use mapping technology to transfer the movement of the hands into musical compositions. In the video above, Heap explains many of the different uses for the gloves and the different movements that create changes in pitch, filter of the sound, and many other elements. I find the product to be really interesting and it adds a really cool dynamic to the way an artist can perform on stage. Heap has talked a lot about the fact that she hated having to have so much equipment on stage in order to create the kind of music she wanted to perform. The gloves give her the ability to not be locked down in a location and create a music experience that envelops both sound and movement.

While I dont know too much about the details of the programming, the gloves use a network of bendable sensors that track the movement of the hand and fingers. This in addition to create an invisible map of the users space allows the software to recognize shifts in motion and attribute those to different music elements and sound qualities.

Video explaining the process of making the gloves

Overall I just find this to be a really intriguing project. I think that Heap’s vision toward the future of music and performance is really interesting because I dont think its something we see from a lot of musical artists. This enables the user to create a wide variety of new musical experiences and its really interesting to see how work like this will develop into the future.

Website: https://mimugloves.com

Alec Albright – Project 10 – Sonic Sketch

I am using one of my grace days on this assignment

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 10

var margin = 150;
var radius = 30;
var r = 0;
var g = 0;
var b = 0;
var rotation = 0;
var sine; // sine oscillator
var sineAmp; // sine amplitude
var sineFreq; // sine frequency
var sawtooth; // sawtooth oscillator
var sawtoothAmp; // sawtooth amplitude
var sawtoothFreq; // sawtooth frequency
var square; // square oscillator
var squareAmp; // square amplitude
var squareFreq; // square frequency

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

function soundSetup() { // setup for audio generation
    // making sine
    sine = new p5.Oscillator();
    sine.setType("sine");
    sine.start();

    // making sawtooth
    sawtooth = new p5.Oscillator();
    sawtooth.setType("sawtooth");
    sawtooth.start();

    // making square wave
    square = new p5.Oscillator();
    square.setType("square");
    square.freq(440);
    square.start();
}

function draw(){
    background("white");
    fill(r, g, b);

    // mapping angle of rotation to mouseY
    // as mouse moves up and down, shapes rotate
    rotation = map(mouseY, 0, height, 0, 360);

    // drawing hexagons with specified margin and rotation
    // center
    push();
    translate(width / 2, height / 2);
    rotate(rotation);
    hexagon(0, 0, radius);
    pop();
    // circle around center hexagon
    for(let i = 0; i < nvertex; i +=1){
        // finding exactly where the hexagon at hand is located
        // sin tells us where the y coordinate is
        var centerY = sin(angle) * margin;
        // cos tells us where the x coordinate is
        var centerX = cos(angle) * margin;
        // now draw the vertex at hand
        // setting up rotation for each individual hexagon
        push();
        translate(width / 2 + centerX, height / 2 + centerY);
        rotate(rotation);
        hexagon(centerX, centerY, radius);
        pop();
        // add the next portion of the angle
        angle = angle + (360 / 6)
    }
    
    // scaling mouseX to use the whole screen for size
    // as mouse moves right, shapes get bigger
    radius = map(mouseX, 0, width, 20, 70);
    
    // as mouse moves right, more red, more sine/less sawtooth
    r = map(mouseX, 0, width, 0, 255);
    // amplitude form 0 to 1
    sineAmp = map(mouseX, 0, width, 0, 1);
    sine.amp(sineAmp);
    // amplitude from .8 to 0 (bigger amplitude on left side)
    sawtoothAmp = map(mouseX, 0, width, .2, 1);
    sawtooth.amp(1 - sawtoothAmp);

    // as mouse moves down, more blue 
    b = map(mouseY, 0, height, 0, 255);
    // as mouse moves left, more green
    g = 255 - map(mouseX, 0, width, 0, 255);

    // frequency changes depending on whether we're in top half or bottom half
    if (mouseY <= height / 2) {
        // sine goes from 440 to 1760 Hz (2 octaves) if we're in the top half
        sineFreq = constrain(map(mouseY, 0, height / 2, 440, 1760), 440, 1760);
        sine.freq(sineFreq);

        // sawtooth frequency stabilizes at minumum value
        sawtooth.freq(110);
    } else {
        // sawtooth goes from 110 to 440 Hz (2 octaves) if we're in the bottom half
        sawtoothFreq = constrain(map(mouseY, height / 2, height, 110, 440), 110, 440);
        sawtooth.freq(sawtoothFreq);
     
        // sine frequency stabilizes at maximum value
        sine.freq(1760);
    }

    // if mouse is pressed, square wave can be changed
    if (mouseIsPressed) {
        // frequency mapped to the average of mouseX and mouseY, can go from 110 to 440 Hz 
        squareFreq = constrain(map((mouseX + mouseY) / 2, 0, 640, 110, 440), 110, 440);
        square.freq(squareFreq);

        // amplitude mapped to the distance from the center of x axis
        squareAmp = constrain(map(mouseX - (width / 2), -320, 320, 0, .8), 0, .8);
        square.amp(squareAmp);
    }

    // margin depends on mouseX, keeping same distance throughout
    margin = map(mouseX, 0, width, 50, 150);
}

// 6 vertices, as a hexagon has
var nvertex = 6;
// angle we're working at (when we get to TWO_PI, we're done)
var angle = 0;

function hexagon(x, y, radius){
    // draw a hexagon at (x, y) using beginShape()
    beginShape();
    // find each vertex's specific location
    for(let i = 0; i < nvertex; i += 1){
        // finding exactly where the vertex at hand is located
        // sin tells us where the y coordinate is
        var vertexY = y + sin(angle) * radius;
        // cos tells us where the x coordinate is
        var vertexX = x + cos(angle) * radius;
        // now draw the vertex at hand
        vertex(vertexX, vertexY)
        // add the next portion of the angle
        angle += (360 / 6)
    }
    // connect beginning and end points
    endShape(CLOSE)
}

For this assignment, I added sonic features to my Project 3 – Dynamic Drawing. I added a sine wave oscillator, a sawtooth wave oscillator, and a square wave oscillator. The mappings for the amplitude and frequency of these oscillators are as follows:

  1. As the mouse moves from left to right, the sine wave amplitude increases and the sawtooth wave amplitude decreases.
  2. As the mouse moves from top to bottom on the top half of the screen, the sine wave frequency gets higher (scaling up to two octaves).
  3. As the mouse moves from top to bottom on the bottom half of the screen, the sawtooth wave frequency gets higher (scaling up to two octaves).
  4. As the average of mouseX and mouseY increases, so does the frequency of the square wave.
  5. The closer to the middle of the x-axis the mouse is, the louder the square wave becomes.

Note: the square wave can only be adjusted if the mouse is pressed!!

This process was very interesting in testing harmonic balances in my dynamic drawing, as manifested by these mappings. I certainly see a lot more dimensionality in my drawing now because of the added sound layers!

Joanne Chui – Project 10 – Sonic Sketch

sketch

/*
Joanne Chui
Section C 
Project 10
*/

let osc;

function preload() {
    // call loadImage() and loadSound() for all media files here
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/xylophone.wav");
    mySnd.setVolume(0.5);
}


function setup() {
    createCanvas(400, 300);
    background(255, 226, 145);
    osc = new p5.TriOsc();
    osc.start();
}


function draw() {
    //glasses
    fill(255, 240, 200);
    stroke("white");
    strokeWeight(2);
    rect(25, 100, 50, 100);
    rect(125, 100, 50, 100);
    rect(225, 100, 50, 100);
    rect(325, 100, 50, 100);
    //drink
    fill(192, 225, 237);
    noStroke();
    rect(27, 120, 46, 78);
    rect(127, 140, 46, 58);
    rect(227, 160, 46, 38);
    rect(327, 180, 46, 18);


}

function mousePressed(){
  //glass clink
  if(mouseX > 25 & mouseX < 75 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 125 & mouseX < 175 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 225 & mouseX < 275 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 325 & mouseX < 375 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  //pitch dependent on height of water
  let f = map(mouseX, 0, 375, 100, 800);
  osc.freq(f);
  
}

I was interested in how a combination of sounds could produce an interesting effect. I combined the sound of the glass clinking with the sound effect of the pitches created when blowing on glasses. I like how simple the project is.

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.