You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.5 KiB
77 lines
1.5 KiB
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);
|
|
} |