nighttimeDownload
var my=270;
var mdy=1;
var windowOpen=true;
var star;
var monster;
var windowSound;
var clock;
var fr=0;
function preload(){
clock=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
star=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/star.wav");
windowSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/window.wav");
monster=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/growl-1.wav");
}
function setup() {
createCanvas(480, 480);
useSound();
frameRate(1);
}
function soundSetup() {
clock.setVolume(0.5);
star.setVolume(0.2);
windowSound.setVolume(0.5);
monster.setVolume(1);
}
function draw() {
background(38, 39, 59);
drawStatic();
//monster
fill(0);
if (fr>7 & fr<=17){
monster.play();
ellipse(260, my, 80, 60);
rect(220, my, 80, 300-my);
fill(255, 0, 0);
triangle(235, my-13, 255, my-10, 245, my-5);
triangle(285, my-13, 265, my-10, 275, my-5);
//claws
for (var i=0; i<3; i++){
fill(0);
quad(175+(i*10), 300, 180+(i*10), 295, 185+(i*10), 300, 180+(i*10), 330);
}
if (fr>8 & fr<=12){
my-=5;
}
if (fr>12 & fr<=16){
my+=5;
}
}
//clock
clock.play();
push();
translate(355, 40);
scale(0.22);
drawClock();
pop();
//star
push();
if (fr<5){
star.play();
}
switch(fr){
case 0: translate(290, 100); scale(0.05); break;
case 1: translate(280, 105); scale(0.2); break;
case 2: translate(260, 110); scale (0.3); break;
case 3: translate(240, 115); scale(0.2); break
case 4: translate(220, 120); scale(0.05); break;
case 5: translate(200, 125); scale(0); break;
default: scale(0); break;
}
noStroke();
fill(255);
drawStar();
pop();
//windowPane
drawWindow();
if (fr>6 & fr<=16){
windowOpen=false;
}
if (fr==7){
windowSound.play();
}
if (fr>16){
windowOpen=true;
}
if (fr==17){
windowSound.play
}
fr++;
if (fr>=22){
fr=0;
}
}
function drawClock(){
//from https://p5js.org/examples/input-clock.html
var cx;
var cy;
var secR;
var minR;
var hrR;
var cD;
var radius=width/2;
secR=radius*0.71;
minR=radius*0.6;
hrR=radius*0.5;
cD=radius*1.7
cx=width/2;
cy=height/2;
noStroke();
fill(15);
ellipse(cx, cy, cD+25, cD+25);
fill(200);
ellipse(cx, cy, cD, cD);
var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;
stroke(0);
strokeWeight(1);
line(cx, cy, cx+cos(s)*secR, cy+sin(s)*secR);
strokeWeight(2);
line(cx, cy, cx+cos(m)*minR, cy+sin(m)*minR);
strokeWeight(4);
line(cx, cy, cx+cos(h)*hrR, cy+sin(h)*hrR);
strokeWeight(2);
beginShape(POINTS);
for(var i=0; i<360; i+=6){
var angle=radians(i);
var x=cx+cos(angle)*secR;
var y=cy+sin(angle)*secR;
vertex(x, y);
}
endShape();
}
function drawStatic(){
//window
noStroke();
fill(64, 65, 90);
square(25, 25, 300);
fill(12, 13, 42);
square(50, 50, 250);
//bed frame and mattress
fill(55, 34, 26);
strokeWeight(3);
stroke(32, 17, 11);
rect(240, 375, 240, 105);
rect(240, 350, 25, 130);
noStroke();
fill(192, 157, 167);
quad(270, 400, 480, 400, 480, 480, 300, 480);
fill(120, 82, 93);
triangle(270, 480, 270, 400, 300, 480);
//moon
fill(248, 216, 8);
ellipse(100, 100, 60, 60);
}
function drawStar(){
//same code as star example from arrays lecture
var starX=[50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var starY=[18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var nPoints=starX.length;
beginShape();
for (var i=0; i<nPoints; i++){
vertex(starX[i], starY[i]);
}
endShape(CLOSE);
}
function drawWindow(){
stroke(64, 65, 90);
strokeWeight(10);
noFill();
if (windowOpen==true){
line(175, 30, 175, 320);
line(30, 175, 320, 175);
}
if (windowOpen==false){
line(175, 30, 175, 320);
line(30, 175, 170, 175);
line(210, 80, 320, 40);
line(210, 80, 210, 360);
line(210, 360, 320, 320);
line(210, 220, 320, 180);
}
}
For this project I wanted to have a scene where someone goes to bed and wakes up in the middle of the night to see a monster for the spooky vibes. I struggled a bit trying to figure out all of the objects I was going to animate so I added a shooting star in the beginning.
I got the clock from the p5.js reference site and I used the same code for the star that we had in our Arrays lecture previously in the semester.