Palms/public/data/scripts/sketch.js

let debug = false,
	viewPort = {x: 0, y: 0, v: 0};

let palms = [],
	waveDisposition = 0;

function setup(){
	setFrameRate(60);
	let c = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height());
	c.parent("canvasHolder");
}

function draw(){
	background("#81e0fb");
	
	for (let p of palms) p.update();
	
	//Wasser
	fill("#3434FF");
	noStroke();
	beginShape();
	for (let x = 0; x <= width; x++){
		if (getDesert(x) > getWater(x)) vertex(x, getWater(x));
		else vertex(x, getWater(x, true));
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
	
	//Wellen
	fill("#0000FF");
	noStroke();
	beginShape();
	for (let x = 0; x <= width; x++){
		if (getDesert(x) > getWater(x)) vertex(x, getWater(x));
		else vertex(x, getWater(x, true));
	}
	for (let x = width; x >= 0; x--){
		if (getDesert(x) > getWater(x)) vertex(x, getWater(x) + 5);
		else vertex(x, getWater(x, true));
	}
	endShape();
	
	//Strand
	noStroke();
	fill("#FFFF00");
	beginShape();
	for (let x = 0; x <= width; x++){
		vertex(x, getDesert(x));
	}
	vertex(width, height);
	vertex(0, height);
	vertex(0, getDesert(0));
	endShape();
	
	//Strandoberfläche
	stroke("#FFDD00");
	strokeWeight(10);
	beginShape();
	for (let x = 0; x <= width; x++){
		vertex(x, getDesert(x));
	}
	endShape();
	
	waveDisposition++;
	
	if (debug) debugInformation();
}

function getDesert(x){
	return height - (sin(x * PI / width) * 300 - 50);
}

function getWater(x, linear){
	if (linear) return height - 50;
	return height - (sin((x - waveDisposition) * PI / 10) * 2 + 50);
}