Lanna Lang – Project 10 – Sonic Sketch

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 10-Sonic Sketch

var c1, c2; //variables for background colors;
var sfxWolf;
var sfxNight;
var sfxFire;
var sfxSnore;

function preload() {
    sfxWolf = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wolf-lanna.wav");
    sfxWolf.setVolume(1);

    sfxNight = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/night-lanna.wav");
    sfxNight.setVolume(0.1);

    sfxFire = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/fire-lanna-2.wav");
    sfxFire.setVolume(1);

    sfxSnore = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/snore-lanna-2.wav");
    sfxSnore.setVolume(10);
}

function setup() {
    createCanvas(600, 480);
    ellipseMode(CENTER);
    frameRate(5);

    //calling the gradient function
    c1 = color('#0b0043'); //background sky blue
    c2 = color('#fa3500'); //background sky red
    setGradient(c1, c2);
}

function draw() {
    //calling all the other draw functions
    drawLandscape();
    drawWolf();
    drawCamp();
    drawText();
    
    //play the background sound effect
    sfxNight.play();
}

//function to draw all the landscape in the background
function drawLandscape() {
    noStroke();
    
    //moon
    fill('#d0cba3');
    ellipse(390, height / 2, 400, 400);

    //left mountain
    fill(28);
    triangle(80, 370, 280, 100, 520, 370);
    //middle mountain
    fill(7);
    triangle(250, 350, 530, 115, width + 150, 350);
    //right mountain
    fill(41);
    triangle(120, 350, 370, 130, width, 350);

    //draw the smaller trees
    for (y = 0; y < height; y += 40) {
        for (x = -100; x < width + 50; x += 160) {
            fill('#051107'); //very dark green
            triangle(x + 150, y + 250, x + 70, y + 350, x + 230, y + 350);
        }
    }

    //draw the bigger trees
    for (y = 0; y < height; y += 40) {
        for (x = 0; x < width + 50; x += 160) {
            fill('#08190a'); //dark green
            triangle(x + 130, y + 170, x + 60, y + 270, x + 200, y + 270);
        }
    }

    //ground
    fill('#2d1c17');
    rect(0, 450, width, 30);
}

//function draw the wolf on the mountain
function drawWolf() {
    var x1 = [360.6, 363.08, 365.31, 367.38, 368.72, 369.44, 377.04, 
        383.33, 383.64, 382.46, 379.41, 352.73, 350.96, 354.51, 364.05, 
        353.13, 351.06, 355.04, 353.34, 353.15, 354.65, 356.89, 358.31];

    var y1 = [91.1, 97.49, 99.05, 104.99, 106.07, 107.05, 124.71, 134.52,
        145.3, 153.01, 155.56, 156.09, 154.64, 151.27, 146.85, 132.89, 123.88,
        103.92, 98.75, 97.08, 96.79, 98.41, 92.87];

    var nPoints1 = x1.length;
    beginShape();
    for (var i = 0; i < nPoints1; i++) {
        fill(10);
        vertex(x1[i], y1[i]);
    }
    endShape(CLOSE);
}

//function to draw the camp
function drawCamp() {
    var x2 = [248.75, 253.55, 257.24, 258.2, 258.32, 258.21, 259.05, 261.99, 
        264.49, 263.6, 263.47, 264.48, 265.59, 266.17, 266.09, 264.98, 263.59, 
        242.52, 241.6, 240.02, 238.84, 238.46, 238.53, 239.54, 240.74, 240.75, 
        240.76, 242.51, 243.35, 242.69, 242.52, 242.64, 243.96, 246.81, 248.93, 
        250, 249.69]

    var y2 = [420.75, 423.75, 427.8, 430.42, 434.29, 435.15, 433.61, 430.98, 429.8, 
        433.4, 433.09, 438.56, 440.94, 442.74, 446.81, 449.99, 451.9, 451.9, 451.03,
        448.74, 445.82, 442.64, 440.15, 437.17, 435.48, 436.47, 438.45, 441.95, 
        442.74, 440.55, 438.56, 436.58, 433.3, 430.33, 428.12, 425.34, 422.93]

    //tent
    fill('#ffef86');
    triangle(380, 450, 410, 410, 430, 470);
    fill('#ffe641');
    quad(410, 410, 430, 470, 480, 450, 450, 390);
    stroke(0);
    strokeWeight(6);
    line(410, 412, 400, 457);

    //person sleeping inside the tent
    //pants
    stroke('cyan'); 
    strokeWeight(4);
    line(390, 458, 402, 458);
    line(400, 458, 403, 463);
    //feet
    stroke('#d5a88f');
    line(390, 458, 387, 456);
    line(403, 463, 405, 461);

    //fire
    //flames
    stroke('#f7da14');
    strokeWeight(3);
    fill('#ff7901');
    var nPoints2 = x2.length;
    beginShape();
    for (var i = 0; i < nPoints2; i++) {
        var px = x2[i] + random(-1, 1);
        var py = y2[i] + random(-1, 1);
        vertex(px, py);
    }
    endShape(CLOSE);
    //wood logs
    noStroke();
    fill('#a36d4e');
    rect(235, 451.9, 35, 6);
    fill('#845640');
    rect(235, 457.9, 35, 6);
}

//function for drawing the text
function drawText() {
    textFont('Comic Sans MS');
    textStyle(BOLD);
    textSize(20);
    fill('#5c94bd');
    text('Z', 415, 450);
    textSize(30);
    text('Z', 430, 440);
    textSize(40);
    text('Z', 455, 420);
}

//function to draw the gradient for the background sky
function setGradient(c1, c2) {
    noFill();
    for (var y = 0; y < height * 0.7; y++) {
        var inter = map(y, 0, height * 0.7, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

function mousePressed() {
    //if the mouse position is within the wolf,
    //then the wolf howl will play
    if (mouseX < 384 & mouseX > 349 && mouseY < 157 && mouseY > 90) {
        sfxWolf.play();
    }
    
    //if the mouse position is within the fire,
    //then the fire crackling will play
    if (mouseX < 267 & mouseX > 238 && mouseY < 452 && mouseY > 420) {
        sfxFire.play();
    }

    //if the mouse position is within the tent,
    //then the snoring will play
    if (mouseX < 450 & mouseX > 380 && mouseY < 470 && mouseY > 410) {
        sfxSnore.play();
    }
}

I have 4 sounds in my sketch: the background/ambient noise is nightlife/crickets, if you click the wolf it will howl, if you click the fire there is a wood crackling/fire sound, and if you click the tent with the person inside there is a snoring sound. I had a lot of fun creating this interactive piece because I wanted to challenge myself and do something a little intricate.