Project-10-Sonic Story

//Chris Han
//project 10
//section C

// var song;
var groundhog;
var groundhog1;
var groundhog2;
var groundhog3;
var grass;
var cloud;
var dy = 2; 
var y = 270;
var dy1 = 1;
var y1 = 250;
var y2 = 250;
var dy2 = 1;
var y3 = 300;
var dy3 = 2;
var dx = 0; //speed of clouds

function preload(){
	//images
     groundhog = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog1 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog2 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog3 = loadImage("https://i.imgur.com/ghMIFqq.png");
     grass = loadImage("https://i.imgur.com/OQ7giMC.png");
     cloud = loadImage("https://i.imgur.com/ZtLcxL9.png");

     //sound
     song = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
// // }
}

function setup() {
    createCanvas(400,400);
    // useSound();
}

// function soundSetup(){
// 	song.setVolume(0.8);
// }

function draw() {
	noStroke();
	fill(135, 206, 250);
    rect(0,0,400,400);
	fill(210,105,30);
	rect(0,300,400,100);
	groundhog.resize(200,0); //the biggest one
	//movement for the front big groundhog
	if( dy >= 0 & y >= 360){ //the movement for groundhog
		r = random(1, 100);
		if(int(r) == 15){
			dy = -2
		} else {
			dy = 0
		}
	}
	if(dy <= 0 & y <= 270){
		dy = 2
	}
	y += dy;

	//movement for groundhog1 (the middle one)

    if( dy1 >= 0 & y1 >= 300){ //the movement for groundhog1
		r = random(1, 100);
		if(int(r) == 15){
			dy1 = -1
		} else {
			dy1 = 0
		}
	}
	if(dy1 <= 0 & y1 <= 250){
		dy1 = 1
	}
	y1 += dy1;

	//movement for groundhog2 (the back one)
	 if( dy2 >= 0 & y2 >= 300){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy2 = -1
		} else {
			dy2 = 0
		}
	}
	if(dy2 <= 0 & y2 <= 250){
		dy2 = 1
	}
	y2 += dy2;

	//movement for groundhhog3 (the very front one)
     if( dy3 >= 0 & y3 >= 400){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy3 = -1
		} else {
			dy3 = 0
		}
	}
	if(dy3 <= 0 & y3 <= 350){
		dy3 = 1
	}
	y3 += dy3;


    groundhog.resize(200,0); //the biggest one
    image(groundhog2, 160, y2); //furthest back one 
	rect(180,308,90,70);// the rectangle in between back grass and back whacka
	image(grass, 0, 230, 230,100); //furthest back grass

	image(groundhog, 0, y);
	groundhog1.resize(100,0);
    image(groundhog1, 250, y1);//middle groundhog
    rect(260,320,90,50);
    image(grass, 220, 250, 200,100);
	image(grass, -10, 300, 460, 110);
	groundhog2.resize(100,0);
	groundhog3.resize(120,0);
	image(groundhog3, 260, y3); //very front kinda small
	cloud.resize(100,0);

	//clouds moving
	image(cloud, -250 + dx, 40);
	image(cloud, -100 +dx, 100);
	image(cloud, 180 + dx, 40);
	image(cloud, 20 + dx, 30);
	image(cloud, 100 + dx, 100);
	image(cloud, 300 + dx, 100);
	dx += 0.2;

}