xxxxxxxxxx277
let person;let counter;let sky;let moon;let starlist;function setup() { createCanvas(400, 400); person=new Person(); counter = 0; sky=new Sky(); starlist = []; for(let i = 0; i<120;i++){ starlist.push(new Star()); } }function draw() { frameRate(100); sky.display(); sky.timer+=deltaTime/1000; noStroke(); fill("#4CAF50"); rect(0,240,400,50); stroke("black"); fill("#606060"); rect(0,290,400) fill(220); rect(0,380,160,20); rect(210,380,160,20); if(mouseX - person.x > 3 && person.x <= 400){ person.isMoving=true; person.x+=person.speed*deltaTime/15; person.direction=-1; counter++; if(counter==10){ person.frame++; counter=0; } } else if(mouseX - person.x < -3 && person.x >= 0){ person.isMoving=true; person.x-=person.speed*deltaTime/15; person.direction=1; counter++; if(counter==10){ person.frame++; counter=0; } } else{ person.isMoving=false; counter++; if(counter==10){ person.frame++; counter=0; } } person.display();}class Star{ constructor(){ // Random position of stars this.x = random(400); this.y = random(400); this.speed = 1; } display(t){ this.y -= this.speed * deltaTime / 20; // Star movement if(this.y <= 0){ this.y = 400 - this.y % 400; } // Transparency control fill("rgba(255,255,255,"+t+")"); stroke("rgba(255,255,255,"+t+")"); let starBody = rect(this.x,this.y,2,2); }}class CrescentMoon{ constructor(y){ this.phase = 0; this.moonY = y; } display(){ this.phase = this.phase % 16; fill("white"); // Moon shape beginShape(); vertex(200,this.moonY-75); if(this.phase <= 9){ bezierVertex(200-(100-25*(this.phase)),this.moonY-75,200-(100-25*(this.phase)),this.moonY+75,200,this.moonY+75); bezierVertex(200+100,this.moonY+75,200+100,this.moonY-75,200,this.moonY-75); } else{ bezierVertex(200-100,this.moonY-75,200-100,this.moonY+75,200,this.moonY+75); bezierVertex(200+(100-25*(16-this.phase)),this.moonY+75,200+(100-25*(16-this.phase)),this.moonY-75,200,this.moonY-75); } endShape(); }}class Sky{ constructor(){ this.sunY = 400; this.speed = 1; this.moonPhase = 0; this.timer = 0; } display(){//10sec/round // Timer sync this.timer = this.timer % 20; this.sunY = -this.timer * 50 + 400; // Moon phase add if(this.sunY + 500 <= -125){ this.moonPhase++; } // Create colors for gradient let topColor; let botColor; // Transparency control let displayVar; // Frames 0-300 back to sunrise if(this.timer < 3){ topColor = lerpColor(color("rgb(23,23,197)"),color("rgb(135,206,235)"),this.timer/3); botColor = lerpColor(color("rgb(23,23,197)"),color("rgb(255,77,00)"),this.timer/3); displayVar = 1-(this.timer/3); } // Frames 300-1000 else if(this.timer>=3 && this.timer<10){ // Frames 300-650 sunrise if(this.timer<6.5){ botColor=lerpColor(color("rgb(255,77,00)"),color("rgb(135,206,235)"),(this.timer-3)/3.5); } // Frames 650-1000 day else{ botColor = color("rgb(135,206,235)"); } topColor = color("rgb(135,206,235)"); displayVar = 0; // Transparent } // Frames 1000-1300 dawn else if(this.timer>=10 && this.timer<13){ topColor = lerpColor(color("rgb(135,206,235)"),color("rgb(23,23,197)"),(this.timer-10)/3); botColor = lerpColor(color("rgb(135,206,235)"),color("rgb(23,23,197)"),(this.timer-10)/3); displayVar = (this.timer-10)/3; } // Frames 1300-2000 night else if(this.timer>=13 && this.timer<20){ topColor = color("rgb(23,23,197)"); botColor = color("rgb(23,23,197)"); displayVar = 1; // Solid } // For loop used to create gradient for(let y = 0; y<250; y++){ let lineColor = lerpColor(topColor,botColor,y/250); stroke(lineColor); line(0,y,400,y); } // Display stars for(let i = 0; i<120;i++){ starlist[i].display(displayVar); } // Display sun and moon noStroke(); fill("#FFC107"); ellipse(200,this.sunY,150,150); moon=new CrescentMoon(this.sunY+500); moon.phase=this.moonPhase; moon.display(); }}class Person{ constructor(){ this.x = 200; this.frame=3; this.direction=1; this.isMoving=false; this.speed=3; } display(){ fill("#F5E284"); if(this.isMoving){ switch(this.frame%3){ case 0: ellipse(this.x,150-4,40,40); //head line(this.x+10*this.direction,168-4,this.x+50*this.direction,250-4); //body line(this.x+50*this.direction,250-4,this.x+40*this.direction,300-4); //upper front leg line(this.x+40*this.direction,300-4,this.x+50*this.direction,350-4); //down front leg line(this.x+50*this.direction,250-4,this.x+30*this.direction,300-4); //upper back leg line(this.x+30*this.direction,300-4,this.x+70*this.direction,320-4); //down back leg line(this.x+15*this.direction,180-4,this.x+28*this.direction,220-4); //upper front arm line(this.x+28*this.direction,220-4,this.x+20*this.direction,250-4); //down front arm line(this.x+15*this.direction,180-4,this.x+40*this.direction,210-4); //upper back arm line(this.x+40*this.direction,210-4,this.x+45*this.direction,240-4); //down back arm line(this.x+100*this.direction,200,this.x+165*this.direction,200); //mid line line(this.x+107*this.direction,175,this.x+170*this.direction,175); //top line line(this.x+107*this.direction,220,this.x+170*this.direction,220); //bot line break; case 1: ellipse(this.x,150+4,40,40); //head line(this.x+10*this.direction,168+4,this.x+50*this.direction,250+4); //body line(this.x+50*this.direction,250+4,this.x+10*this.direction,270+4); //upper front leg line(this.x+10*this.direction,270+4,this.x+30*this.direction,320+4); //down front leg line(this.x+50*this.direction,250+4,this.x+150*this.direction,350+4); //back leg line(this.x+15*this.direction,180+4,this.x+20*this.direction,220+4); //upper front arm line(this.x+20*this.direction,220+4,this.x-10*this.direction,230+4); //down front arm line(this.x+15*this.direction,180+4,this.x+60*this.direction,200+4); //upper back arm line(this.x+60*this.direction,200+4,this.x+45*this.direction,230+4); //down back arm line(this.x+100*this.direction,200,this.x+165*this.direction,200); //mid line line(this.x+107*this.direction,175,this.x+170*this.direction,175); //top line line(this.x+107*this.direction,220,this.x+170*this.direction,220); //bot line break; case 2: ellipse(this.x,150,40,40); //head line(this.x+10*this.direction,168,this.x+50*this.direction,250); //body line(this.x+50*this.direction,250,this.x+75*this.direction,290); //upper back leg line(this.x+75*this.direction,290,this.x+130*this.direction,270); //down back leg line(this.x+50*this.direction,250,this.x,350); //front leg line(this.x+15*this.direction,180,this.x-20*this.direction,220); //upper front arm line(this.x-20*this.direction,220,this.x-60*this.direction,200); //down front arm line(this.x+15*this.direction,180,this.x+70*this.direction,180); //upper back arm line(this.x+70*this.direction,180,this.x+95*this.direction,210); //down back arm line(this.x+100*this.direction,200,this.x+165*this.direction,200); //mid line line(this.x+107*this.direction,175,this.x+170*this.direction,175); //top line line(this.x+107*this.direction,220,this.x+170*this.direction,220); //bot line break; } } else{ counter=0; this.frame=3; ellipse(this.x,150,40,40); line(this.x,170,this.x,250); line(this.x,250,this.x-40,350); line(this.x,250,this.x+40,350); line(this.x,190,this.x-40,270); line(this.x,190,this.x+40,160); line(this.x+40,160,this.x+50,110); fill("black"); textSize(50) if(this.x>=200){ text("Hi!",this.x-30+60*-1,70,60,60); } else{ text("Hi!",this.x-30+60,70,60,60); } } }}