Category: SectionA

sketch

For this project, I applied 4 different sounds into my project 3 post. When the mouse clicks, an explosion will be initiated to represent a start of the program. There are 3 variables in my sketch – the size that directly controls the radius of the hexagons, the color that changes when the mouse moves, and the angles that manipulates the positions of the hexagons on the canvas. Therefore, the idea is to give the 3 variables different sound effects to determine whether they have reached certain bounds. For the size, a “slutty wave” sound will pop up to indicate the size of the first hexagon in the sketch reaches the upper limit. For the color changing, a ghostly impression will be made everytime when the color transitions between pink(blue) and purple. Ultimately, the angular positions of the hexagons will be suggested through a “boon” sound everytime the hexagons finishes a 1/60 cycle. All the changes can be initiated when the mouse moves and clicks.

//Steven Fei
//Assignment 10
//Section - A
//zfei@andrew.cmu.edu
function setup() {
    createCanvas(600, 480);
    useSound();
    
}

var size = 8; //hexagon size that can change according to the mouse movement
let color = 0; //hexagon color that can change according to the mouse movement
var colorDir = 2; //the degree of change for the color change
let angle = 0; //the initial rotation angle for the hexagon
var dir = 1; // the growing direction of the hexagon, either positive or negative
var speed = 2; //the growing speed of the hexagon
var clickSoundSciFi;
var ghost;
var sizeShrink;
var rotatingPeriod;
function preload(){
    clickSoundSciFi = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490266__anomaex__sci-fi-explosion-2.wav");
    ghost = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490515__staudio__ghostguardian-attack-01.wav");
    rotatingPeriod = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490316__nicknamelarry__cartoon-space-sfx.wav");
    sizeShrink = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/489892__tkky__slutty-808.wav");
}
function soundSetup(){
    clickSoundSciFi.setVolume(0.3);
    ghost.setVolume(0.3);
    sizeShrink.setVolume(0.4);
    rotatingPeriod.setVolume(0.5);
}
function mousePressed(){
    clickSoundSciFi.play();//an explosion sound when mouse is pressed
}
function mouseMoved(){
    color = color +colorDir;
    if (color<0){
        colorDir = 2;
    } else if (color>255){
        ghost.play(); //a ghost will be created when the color of the hexagon transitions between purple and blue
        colorDir = -2;
    }
    angle +=0.5;
    if(angle % 60 == 0){
        rotatingPeriod.play();// a "boon" sound will make when the hexagons finishes 1/6 of a cycle
    }
    size += dir * speed;
    if(size<0){
        dir = 1;
        size = 0;
    }else if (size>=60){
        dir = -1;
        size = 60;
        sizeShrink.play();//a sound is made to imply the hexagons are reaching the maximum sizes
    }
}

var diffx = 0;
var diffy = 0;
var circlex = 300;
var circley = 300;

function draw() {
    background(0);
//    locate the mouse position
    diffx = mouseX - circlex;
    diffy = mouseY - circley;
    circlex = circlex + 0.1*diffx;
    circley = circley + 0.1*diffy;
    fill("white");
    circle(circlex,circley,20);
    
    fill(color,37,213);
    var x = max(min(mouseX,300),5); // decide the starting point of the hexagon, when the mouse is far on the left the canvas, the hexagons may shrink together and when the mouse is far on the right of the canvas, the hexagons may move away from each other
    translate(300,240); //move to the center of the canvas
//    draw the basic shape for 1st Hexagon  
    beginShape();
    rotate(radians(angle));
    vertex(x/2,0);
    vertex(x/2+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+2*size*cos(radians(60)),0);
    vertex(x/2+size+size*cos(radians(60)),size*sin(radians(60)));
    vertex(x/2+size*cos(radians(60)),size*sin(radians(60)));
    endShape();
    // draw the basic shape for 2nd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.3,0);
    vertex(x/2+1.3+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+2*1.3*size*cos(radians(60)),0);
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 3rd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.5,0);
    vertex(x/2+1.5+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+2*1.5*size*cos(radians(60)),0);
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    endShape();
//  draw the basic shape for 4th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.7,0);
    vertex(x/2+1.7+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+2*1.7*size*cos(radians(60)),0);
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 5th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.9,0);
    vertex(x/2+1.9+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+2*1.9*size*cos(radians(60)),0);
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 6th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+2.1,0);
    vertex(x/2+2.1+2.1*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+2*2.1*size*cos(radians(60)),0);
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size*cos(radians(60)),2.1*size*sin(radians(60)));
    endShape();
    
    
}

sketch

I got this week’s project inspiration from the facebook emojis and decided to animate them with sound. You can click on each emoji and it will generate the corresponding mood sound. The hardest part of this project was trying to figure out how to use a local host and uploading it to WordPress, but overall, it was really fun!

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-10
*/

var laugh;
var wow;
var crying;
var angry;

function preload() { //load sound files
    laugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/laugh.wav");
    wow = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wow.wav");
    crying = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/crying.wav");
    angry = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/angry.wav");
}

function setup() {
    createCanvas(480, 300);
    noStroke();
    //create different background colors
    fill("#184293"); //laughing emoji
    rect(0, 0, width / 4, height);
    fill("#05B5C3"); //wow emoji
    rect(width / 4, 0, width / 4, height);
    fill('#BC2D15'); //angry emoji
    rect(width / 2, 0, width / 4, height);
    fill(0); //sad emoji
    rect(width * 3 / 4, 0, width / 4, height);
}

function draw() {
    noStroke();
    //create 4 emoji heads
    for (i = 0; i < 4; i++) {
        fill("#FBD771");
        circle(i * width / 4 + 60, height / 2, 90);
    }
    
    //laughing emoji
    //eyes
    stroke(45);
    line(35, 130, 50, 135); //left
    line(35, 140, 50, 135);
    line(70, 135, 85, 130); //right
    line(70, 135, 85, 140);
    //mouth
    noStroke();
    fill(45);
    arc(60, 155, 55, 50, 0, PI);
    fill('#F35269');
    ellipse(60,170,38,20);
    
    //wow emoji
    //eyes & mouth
    fill(45);
    ellipse(160, 140, 13, 20);
    ellipse(200, 140, 13, 20);
    ellipse(180, 170, 25, 35);
    //eyebrows
    noFill();
    stroke(45);
    strokeWeight(3);
    curve(130, 180, 152, 125, 166, 120, 140, 120);
    curve(170, 140, 193, 120, 207, 125, 200, 150);

    //angry emoji
    //eyebrows
    stroke(45);
    strokeWeight(4);
    line(270, 150, 290, 155);
    line(310, 155, 330, 150);
    //eyes
    fill(45);
    circle(283, 157, 5);
    circle(318, 157, 5);
    //mouth
    ellipse(300,170,20,3);

    //crying emoji
    //eyes
    ellipse(400, 150, 10, 12);
    ellipse(440, 150, 10, 12);
    //eyebrows
    noFill();
    stroke(45);
    strokeWeight(3);
    curve(410, 130, 392, 140, 405, 135, 450, 160);
    curve(410, 150, 435, 135, 448, 140, 450, 165);
    //mouth
    arc(420, 175, 20, 15, PI, TWO_PI);
    noStroke();
    //tear
    fill("#678ad6");
    circle(445, 185, 15);
    triangle(438, 182, 445, 165, 452, 182);
}

function mousePressed() {
    if(mouseX < width / 4) { //play lauging sound
        laugh.play();
    }
    if(mouseX > width / 4 & mouseX < width / 2) { //play wow sound
        wow.play();
    }
    if(mouseX > width / 2 & mouseX < width * 3 / 4) { //play angry sound
        angry.play();
    }
    if(mouseX > width * 3 / 4) { //play crying sound
        crying.play();
    }
}