Steven Fei – Project – 10

sketch

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

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.