Month: November 2019

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);
}

Angela Lee – Project 10 – Sonic Sketches

Long ago, the four nations lived together in harmony. Then, everything changed when the Fire Nation attacked…

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 10 Sonic Sketch
*/

// illustrations of the avatar characters
// illustrations created by me :)
var imageLinks = [
    "https://i.imgur.com/b8bcUw6.png",
    "https://i.imgur.com/CNlT1Ed.png",
    "https://i.imgur.com/vmDdgoD.png",
    "https://i.imgur.com/yOvvKhm.png"];

// variables in which images will be loaded into
var katara;
var aang; 
var toph; 
var zuko; 

// variables for sound
var waterSound; 
var airSound;
var earthSound; 
var fireSound;  


// loading the images and sounds
function preload() {
    // call loadImage() and loadSound() for all media files here
    aang = loadImage("https://i.imgur.com/b8bcUw6.png");
    katara = loadImage("https://i.imgur.com/CNlT1Ed.png");
    toph = loadImage("https://i.imgur.com/vmDdgoD.png");
    zuko = loadImage("https://i.imgur.com/yOvvKhm.png");

    waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-3.wav");
    airSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/wind.wav");
    earthSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/earth.wav");
    fireSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fire.wav");
}


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


function soundSetup() { // setup for audio generation
    waterSound.setVolume(1);
    airSound.setVolume(1.25);
    earthSound.setVolume(1);
    fireSound.setVolume(1);
}


function draw() {
    background(200);

    // images of the characters
    image(aang, 0, 0, width/2, height/2);
    image(katara, width/2, 0, width/2, height/2);
    image(toph, 0, height/2, width/2, height/2);
    image(zuko, width/2, height/2, width/2, height/2);
}

function mousePressed() {

    // airbending sounds play if user clicks in aang's space
    if (mouseX >= 0 & mouseX < width/2 && 
        mouseY >= 0 && mouseY < height/2) {
        airSound.play();
    } else { // if user clicks away, sound stops
        airSound.pause();
    }

    // waterbending sounds play if user clicks in katara's space
    /*
    note: the water sound has some silence in it, so if you 
    hear silence even after pressing on katara, it may be 
    the silent part of the file. click again to start from 
    the beginning of that sound file.
    */ 
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= 0 && mouseY < height/2) {
        waterSound.play();
    } else { // if user clicks away, sound stops
        waterSound.pause(); 
    }

    // earthbending sounds play if user clicks in toph's space
    if (mouseX >= 0 & mouseX < width/2 &&
        mouseY >= height/2 && mouseY < height) {
        earthSound.play();
    } else { // if user clicks away, sound stops
        earthSound.pause();
    }

    // firebending sounds play if user clicks in zuko's space
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= height/2 && mouseY < height) {
        fireSound.play();
    } else { // if user clicks away, sound stops
        fireSound.pause();
    }
}

Because one of the requirements was to feature at least 4 sounds, I thought of things that came in four and could be represented. There are 4 nations in the world of Avatar, which is a show I love. To introduce people who haven’t watched the show before, I used sound to communicate which nation each major character is from. The sounds of earth, air, water, and fire are all pretty distinct and recognizable, so I think it was successful in communicating those nations. Plus, I had a lot of fun creating the illustrations for the characters.

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

Yoshi Torralva-Project-10-Sonic-Sketch

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project-10-Sonic-Sketch
var gOpen;
var eOpen;
var dOpen;
var aOpen;

function preload() {
    // call loadImage() and loadSound() for all media files here
    gOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/gstring.wav");
    eOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/estring.wav");
    dOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dstring.wav");
    aOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/astring.wav");
}
function setup() {
    createCanvas(480, 480);
    useSound();
}
function soundSetup() {
    //adjusting the volume
    //lowering a and e as they are higher notes
    gOpen.setVolume(1);
    eOpen.setVolume(0.1);
    dOpen.setVolume(1);
    aOpen.setVolume(0.2);

}


function draw() {
    // you can replace any of this with your own code:
    background(245, 229, 215);
    noStroke();
    //violin body
    fill(150, 74, 12);
    ellipse(width/2, 400, 400, 400);
    fill(245, 229, 215);
    ellipse(50, 525, 120, 200);
    fill(245, 229, 215);
    ellipse(430, 525, 120, 200);
    //violin finger board
    fill(0);
    rectMode(CENTER);
    rect(240, 0, 100, 800);
    //strings
    fill(61, 51, 42);
    rectMode(CORNER);
    rect(210, 0, 4, 480);
    rect(230, 0, 4, 480);
    rect(250, 0, 4, 480);
    rect(270, 0, 4, 480);
    //violin bow
    //visual indicator to show over the strings 
    rectMode(CENTER);
    fill(51, 28, 9);
    rect(mouseX, mouseY, 480, 20);
    //creating constraints for start and stop of each string
    //slight overlap between some to have better transitions
    //using start and stop commands to the strings
    if(mouseX > 200 & mouseX < 225) {
        gOpen.play();
        }else{ gOpen.stop();
    }
    if(mouseX > 220 & mouseX < 240) {
        dOpen.play();
        }else{ dOpen.stop();
    }
    if(mouseX > 240 & mouseX < 265) {
        aOpen.play();
        }else{ aOpen.stop();
    }
    if(mouseX > 265 & mouseX < 280) {
        eOpen.play();
        }else{ eOpen.stop();
    }

}

With this project using sound, I wanted to create an instrument. So, I decided to choose a violin. In this project, I represent the violin in a simple manner and have it close up. I initiate the sound of open G, D, A, and E strings by the mouseX position. When the mouseX position is not in bounds of the parameters, the sound stops. Slight overlaps in the parameters are used to create better sounding transitions between open strings.

Sydney Salamy: Looking Outwards-10

Apparatum is a piece made by PanGenerator, a musical group consisting of Krzysztof Goliński, Jakub Koźniewski, Piotr Barszczewski, and Krzysztof Cybulski, and was created in 2018. The group drew inspiration from the Pilish Radio Experimental Studio, which was one of the first studios to start producing electrostatic music. So while there is a digital interface, the apparatus is very old-fashioned looking and emits only analogue sound.

I really like the old aesthetic the group is trying to pull off with this installation. It’s the first thing that really stands out about it. I like this because it’s pleasing to look at and because there obviously isn’t a lot like it currently. I also really like how there was a mix of the old and the new. It wasn’t simply a remake of an old technology, the group decided to incorporate modern tech into an older styled model, resulting in a old looking apparatus with a digitally interactive interface. I like this since it takes the best parts of two different things to create an almost different invention.

Video Demonstrating Apparatum In Action

While the piece may be heavily influenced by an older aesthetic, it has modern electronic aspects to it as well. To create the electronic interface, the group used the software electron (node.js). The microcontroller elements are c running on Teensy 3.2. Teensy 3.2 is also used for the hardware. 

The piece (right) compared with its older influences (left)

Looking at their website, it is clear they have a certain aesthetic they are trying to pull off. The website is a sleek black and white, and many of their photos are in black and white as well.  The site almost looks like that for a newspaper. They seem to be going for an old fashioned but also futuristic look, if that’s possible, the color scheme giving off the old-timey vibe with the sleekness and use of geometric shapes in their photos giving the site a futuristic feel. This seems to be reflected well in Apparatum.

looking outward – 10 – ilona altman

  • I think it is interesting how musicality seems to be intrinsically tied to emotion. Just as we anthropomorphize visual stimuli, it seems there is a tendency to process notes in a way that reveals the interior subjectivity of that producing the noise. This makes me think about how perhaps music was our first language, and a study I saw that spoke about how the musicality of peoples voices when saying things (in anger, or speaking to babies) is similar across all languages, and that this may be one of the first ways we understand the world’s communication with us… I admire that this work was able to, in such a simple set up, touch on these concepts of musicality, emotion and projecting emption on to technology.
  • I would suppose that the algorithm used to generate this work was made by breaking down a note analysis of a singer who sag this song, and than repeating these notes by a computer, which holds them for the specified amount of time noted by the original recording.
  • The artist’s sensibility for humor definitely showed through this work with the song choice. It is also clear they have a bend toward minimalism, and it is this minimalism which strengthened the conceptual exploration of this work.
Video of the computer performance

http://www.everydaylistening.com/articles/2015/7/20/what-do-machines-sing-of.html

Gretchen Kupferschmid-Looking Outward-10

A new piece of sound art was installed at the San Fransisco Art Institute which mimics and/or satirizes the sinking & tilting Millennium Tower in SF. Created by Cristobal Martinez and Kade L. Twist (known together as Postcommodity), the piece uses computational algorithms to represent the movement of the tower. These sounds are supposed to create a soothing audio and beats which transforms this sinking and tilting into a therapeutic sound. The goal of the project was to encourage relaxation through the power of SF’s scenic beauty. I appreciate how the project aims to take a dire situation and flip it to call for relief from stress in a city. It is not often that art installed in museums is meant to aim to calm people or help soothe anxieties, so I appreciate this approach to art, especially through all you can do with something that can be so calming as sound. Though it doesn’t debut until the 15th, I am excited to see how the sounds themselves might sound and the effect it has on its viewers/listeners.

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=2ahUKEwiSvfvXyMrlAhUxvlkKHfrtCJoQFjACegQIABAB&url=https%3A%2F%2Fsfai.edu%2Fexhibitions-public-events%2Fdetail%2Fpostcommodity-the-point-of-final-collapse&usg=AOvVaw05NthM2gw_u99Ngo4gDnE_

Sean Meng-Looking Outwards-10

Module of Commodore 64
Link: https://www.youtube.com/watch?v=cLfYT6yXgEc

For this week’s looking outwards, I researched The Commodore 64, which is an 8-bit home computer introduced in January 1982 by Commodore International. The computer is evolutionary as it features a programming music function. The computer stores a certain track of sound and computerized it into its memory. By labeling and storing the music file, user can mix different tracks and mix them with different pace and the same time to compose music. The project is in 1984 and it opens up the possibility of the intersection between computer and music. And it also changes people’s perspective of music composition from a traditional method.

Margot Gersing – Project 10

sketch

//Margot Gersing - Project 10 - mgersing@andrew.cmu.edu - Section E


var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

var blop;
var plop;
var vpop;
var ting;

function preload(){
    blop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Blop.wav");
    plop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/plop.wav");
    vpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop.wav");
    ting = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Ting.wav");
}

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
    background(29, 19, 46);
    noStroke();
    one();
    four();
    two();
    three();

    //filler shapes (static)
    fill(192, 80, 49);
    ellipse(50, 600, 400, 150);
    fill(219, 160, 65);
    ellipse(600, 125, 100, 150);
    fill(114, 48, 35);
    ellipse(150, 150, 25, 25);
    ellipse(175, 175, 20, 20);
    ellipse(135, 180, 25, 25);
    ellipse(185, 135, 25, 25);
    ellipse(155, 115, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(490, 535, 25, 25);
    ellipse(600, 275, 25, 25);
    ellipse(575, 250, 25, 25);
    ellipse(560, 285, 20, 20);
    ellipse(60, 480, 25, 25);   

}

function one(){
    //peach shape
    var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
    if(act1){
        w1 = mouseX * .75;
        h1 = mouseY * .75;
    } else{
        w1 = 200;
        h1 = 200;
    }

    fill(117, 182, 129);
    ellipse(50, 50, w1, h1);
}

function two(){
    //epitrochoid
    var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
        h2 = constrain(mouseX / 8.0, 0, b);;
        ph2 = mouseX / 50.0;
    } else{
        h2 = constrain(100 / 8.0, 0, b);
        h1 = 100 / 50.0;
    }
    fill(235, 231, 201);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
    //cranioid
    var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
        var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
        var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(235, 231, 201);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
    //gray shape
    var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
    if(act4){
        w4 = mouseX;
        h4 = mouseY;
    } else{
        w4 = 200;
        h4 = 300;
    }

    fill(41, 89, 50);
    ellipse(475, 475, w4, h4);
}


function mousePressed(){

    //if clicked within in defined distance then activation state is... 
       //changed from true to false so the mouseX and mouseY will now take over
    var d = dist(oneX, oneY, mouseX, mouseY);
    if(d < 200){
        act1 = !act1;
        blop.play(0, 1, 2);
    }

    var d2 = dist(twoX, twoY, mouseX, mouseY);
    if(d2 < 100){
        act2 = !act2;
        vpop.play(0, 1, 2);
    }

    var d3 = dist(threeX, threeY, mouseX, mouseY);
    if(d3 < 100){
        act3 = !act3;
        plop.play(0, 1, 2);
    }

    var d4 = dist(fourX, fourY, mouseX, mouseY);
    if(d4 < 100){
        act4 = !act4;
        ting.play(0, 1, 2);
    }

}

For this project I decided to add sound to my previous project from week seven. The way I set up that project worked really well with how I was already planning on utilizing sound. I think this turned out pretty cute, the original project was meant to be playful and I think the sounds just added to it. Lastly, I changed up the colors just for fun.

William Su – Looking Outwards – 10

Aiva is an Artificial Intelligence capable of composing emotional soundtracks for a variety of media like films, video games, and commercials.

According to the team that worked on AIVA, it was trained to compose music composition by reading through a large collection of music partitions from Mozart, Beethoven, Bach, etc. It created a mathematical model of what music is and uses it to make its own unique pieces.

As someone who has worked on and with AI, the making of an AI musical composer doesn’t really come as a surprise to me. In fact, stuff like this has been around for ages like with vocaloids or other computer generated music technologies. What really interests me is how AI is accepted by society. Recently, AIVA became the first virtual artist to have its creations registered with an author’s rights society (SACEM). According to the team, this will not replace musicians or “steal” any jobs. However, this comes into question, when will an AI become so good at what it is trained to do that it could replace humans? And how will we respond to it? In this particular case, it looks like AIVA is marketed more as a tool but it is clear that it can save time, work, and money, maybe better than a trained musician.