body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #ADD8E6;
}
/*
DRAG SUN TO THE RIGHT TO CHANGE FROM DAY TO NIGHT
CLICK SKY TO CREATE CLOUD
PRESS ANY KEYBOARD KEY TO CREATE TREES
*/


var dragging = false;
// Rectangle variables for slider
var x = 100;
var y = 10;
var w = 60;
var h = 60;
// Start and end of slider
var sliderStart = 100;
var sliderEnd = 500;
// Offset for dragging slider
var offsetX = 0;
var clouds = [];
var trees = [];

function setup() {
	createCanvas(600, 400);
}

function draw() {
	if (dragging) {
		x = mouseX + offsetX;
	}
	x = constrain(x, sliderStart, sliderEnd - w);

	var b = map(x, sliderStart, sliderEnd - w, 0, 255);
	background((b * 0.3) + 80, 180, 205);

	// STARS
	noStroke();
	fill(255, 255, 255, b);
	ellipse(random(600), random(400), random(3, 5), random(3, 5));

	backMountains();

	// MOON/SUN
	noStroke();
	fill(252, 245, 178);
	ellipse(x + 30, y + 40, w, h);
	fill((b * 0.3) + 80, 180, 205, b);
	ellipse(x + 15, y + 45, w / 1.2, h / 1.2);

	for (i = 0; i < clouds.length; i++) {
		var currentCloud = clouds[i];
		cloud(currentCloud.xpos, currentCloud.ypos, currentCloud.size);
	}

	// update
	for (i = 0; i < clouds.length; i++) {
		var currentCloud = clouds[i];
		currentCloud.xpos += 0.3;
		currentCloud.ypos += random(-0.3, 0.3);
		if (clouds[i].xpos > width + 20) {
			clouds.splice(i, 1);
			console.log("POOF");
		}
	}

	foreground();

	for (i = 0; i < trees.length; i++) {
		var currentTree = trees[i];
		tree(currentTree.xpos, currentTree.ypos, currentTree.fat, currentTree.tall);
	}

	// update
	for (i = 0; i < trees.length; i++) {
		var currentTree = trees[i];
	}

	ground();
	tent(-20, 110);
}

function keyPressed() {
	var newTree = {
		xpos: random(width),
		ypos: 280,
		fat: random(30, 50),
		tall: random(50, 80)
	};
	trees.push(newTree);
}

function tree(x, y, fat, tall) {
	fill(95, 84, 64);
	rect(x, y, 4, height - tall);
	push();
	stroke(160, 169, 127);
	strokeWeight(1);
	fill(76, 104, 66);
	arc(x + 2, y - 20, fat, tall, HALF_PI, HALF_PI + PI);
	fill(149, 188, 108);
	arc(x + 2, y - 20, fat, tall, HALF_PI + PI, HALF_PI);
	pop();
}

function mousePressed() {
	// Did I click on slider?
	if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
		dragging = true;
		// If so, keep track of relative location of click to corner of rectangle
		offsetX = x - mouseX;
		console.log(mouseX);
	} else {
		var newCloud = {
			xpos: mouseX,
			ypos: mouseY,
			size: random(0.8, 1.5)
		};
		clouds.push(newCloud);
	}
}

function mouseReleased() {
	dragging = false;
}

function cloud(x, y, size) {
	fill(255, 255, 255);
	noStroke();

	arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);
	arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);
	arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);
	arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);
}

function tent(x, y) {
	push();
	translate(x, y);
	scale(1.3);

	// FRONT ROOF
	noStroke();
	fill(220, 152, 79);
	quad(110, 100, 170, 100, 130, 160, 70, 160);

	// FRONT PANEL
	fill(194, 101, 72);
	quad(75, 160, 130, 160, 140, 180, 85, 180);

	// TENT INSIDE
	fill(66, 54, 44);
	triangle(170, 100, 180, 180, 150, 180);

	// TENT INSIDE SHADOW
	fill(96, 84, 70);
	triangle(200, 180, 140, 180, 150, 170);

	// FIRST DOOR
	fill(228, 163, 97);
	quad(130, 160, 170, 100, 155, 180, 140, 180);

	// SECOND DOOR
	fill(228, 163, 97);
	quad(170, 100, 210, 160, 200, 180, 190, 180);

	// SECOND DOOR SHADOW
	fill(192, 100, 71);
	triangle(170, 100, 190, 180, 180, 180);

	// ROPE
	strokeWeight(3);
	stroke(220, 152, 79);
	line(70, 160, 55, 180);
	line(130, 160, 115, 180);
	line(170, 100, 222, 180);

	pop();
}

function foreground() {
	noStroke();

	// MOUNTAINS
	fill(195, 180, 177);
	triangle(250, 100, 400, 310, 250, 310); // BIG RIGHT
	triangle(360, 150, 500, 310, 360, 310); // SMALL RIGHT

	fill(141, 122, 118);
	triangle(250, 100, 250, 310, 80, 310); // BIG LEFT
	triangle(360, 150, 360, 310, 220, 310); // SMALL LEFT

	fill(209);
	triangle(360, 150, 334, 180, 360, 180);
	triangle(250, 100, 210, 150, 250, 150);

	fill(255);
	triangle(360, 150, 360, 180, 385, 180);
	triangle(250, 100, 250, 150, 285, 150);

	// HILL
	noStroke();
	fill(160, 169, 127);
	arc(300, 350, 600, 200, PI + TWO_PI, TWO_PI);
}

function ground() {

	// GRASS
	fill(169, 186, 117);
	rect(0, 310, 600, 90);

	// RIVER 
	fill(105, 185, 182);
	rect(450, 305, 80, 20, 20);
	rect(460, 315, 50, 20, 20);
	rect(340, 330, 180, 20, 20);
	rect(400, 345, 130, 20, 20);
	rect(320, 360, 230, 20, 20);
	rect(390, 375, 100, 30, 20);

	// BUSHES
	fill(65, 85, 58);
	arc(290, 350, 25, 20, PI + TWO_PI, TWO_PI);
	arc(300, 350, 25, 45, PI + TWO_PI, TWO_PI);
	arc(315, 350, 25, 35, PI + TWO_PI, TWO_PI);
	arc(330, 350, 30, 20, PI + TWO_PI, TWO_PI);
}

function backMountains() {
	fill(19, 90, 84);
	stroke(19, 90, 84);
	strokeWeight(15);
	strokeJoin(ROUND);

	triangle(80, 180, -20, 310, 150, 310);
	triangle(130, 150, 10, 310, 230, 310);
	triangle(200, 100, 40, 310, 340, 310);
	triangle(240, 90, 70, 310, 400, 310);
	triangle(300, 120, 150, 310, 450, 310);
	triangle(350, 130, 210, 310, 510, 310);
	triangle(440, 180, 300, 310, 560, 310);
	triangle(520, 200, 400, 310, 620, 310);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.