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.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
