// I know its a bit all over the place, but any little help would be much appreciated. The background is supposed to fade from cream to black and back while a circle moves up and down the screen, behind the waves at the bottom of the code. I don’t understand why it is not working. I can get the screen to fade and sun to move up and down by itself but when I add the wave code, it doesn’t work. /
< `let ellipseY = 0;
let ySpeed = 0.3;
let amt, startColor, newColor;
let p = ['#DEEEFC','#CBE5FC','#BDDDFA','#ACD7FC','#A0D3FD','#8FCAFA','#68A8DB','#356C97'];
function setup() {
createCanvas(windowWidth, windowHeight);
startColor = color('#FFF5E6');
newColor = color('#00050A');
amt = -14;
background(startColor);
}
function draw() {
//fading background, changes when sun dissapears.
{
background(lerpColor(startColor, newColor,amt));
amt += 0.01;
if(amt >= 20.5){
amt = 0.0;
startColor = newColor;
newColor = color('#00050A');
}
}
if (mouseIsPressed) {
noStroke();
fill(0, 24, 95, 50);
ellipseMode(CENTER);
ellipse(mouseX, mouseY, 400, 400);
}
{
ellipse(400, ellipseY, 200);
noStroke();
fill ('#FFDA0C');
ellipseY = ellipseY + ySpeed;
// bounce off bottom
if(ellipseY > height) {
ySpeed = ySpeed * -1;
}
}
//Calling Wave function
wave();
}
function wave() {
var w = windowWidth*2;
var h = .35*windowHeight;
var m = {
x:-windowWidth/2,
y:random(h/p.length-1, h/p.length)
};
for (var i = 1; i<p.length; i++){
var r = random(i*.75, i*1.5);
strokeWeight(2);
stroke(p[i]);
fill(p[i]);
push(); // left-right down angle
translate(0,0);
rotate(random(.1,.15));
beginShape();
for (var j=0; j<w/3; j++ ){
vertex(j*3, h+m.y*r+random(-1,1));
}
vertex(w, windowHeight*2); // bottom right
vertex(m.x, windowHeight*2); // bottom left
}
endShape(CLOSE);
pop();
var r = random(i*.5, i*1.5);
strokeWeight(2);
stroke(p[i]);
fill(p[i]);
push(); // left-right down angle
translate(windowWidth,0);
scale(-1,1);
rotate(random(.1,.15));
beginShape();
for (var j=0; j<w/3; j++ ){
vertex(j*3, h+m.y*r+random(-1,1));
}
vertex(w, windowHeight*2); // bottom right
vertex(m.x, windowHeight*2); // bottom left
}
endShape(CLOSE);
pop();
}`>
