let x=40;

let a=1;

let b=0;

let angle=3.2;

let angle2=3.25;

let angle3=2;

let angle4=0;

let angle5=2.2;

let angle6=2;

let angle7=3;

let speed=0.04;

let l1=true;

let l2=false;

let r1=false;

let r2=false;

let r3=false;

let l3=false;

let e=false;

let l4=false;

let k=false;

let l5=false;

let r4=false;

let r5=false;

let A=false;

let l6=false;

let r6=false;

let s=false;

let r7=false;

let r8=false;

let l7=false;

let done=false;

let moonx=0,moonctr=1;

​

function setup() {

  createCanvas(500, 300);

  background(0);

}

​

function draw() {

  fill(0,0,255);

  strokeWeight(0);

  //R

  if(l1==true){

    circle(x,y,10);

    y-=a;

  if(y==100){

     a=0;

     b=1;

      }

    x+=b;

  if(x==90){

    l1=false;

    b=0;

    r1=true;

   }

  }

  if(r1==true){

    x=90+sin(angle)*40;

    y=140+cos(angle)*40;

    circle(x,y,10);

    angle-=speed;

    if(y==180){

      r1=false;

      l2=true;

    }

  }

  if(l2==true){

    b=-1;

    circle(x,y,10)

    x+=b;

    if(x<46){

      l2=false;

      r2=true;

    }

  }

  if(r2==true){

    a=49+sin(angle2)*80;

    b=260+cos(angle2)*80;

    circle(a,b,10);

    angle2-=speed;

  if(b>255){

    r2=false;

    e=true;

    l4=true;

    x=135;

    y=220;

    }

  }

  //e

  if(e==true){

    if(l4==true){

    circle(x,y,10);

    x++;

      if(x==205){

        l4=false;

        r3=true;

      }

    }

    if(r3==true){

      a=170+sin(angle2)*35;

      b=220+cos(angle2)*35;

      circle(a,b,10);

      angle2+=speed;

      if(a>=185&&b>=245){

        r3=false;

        k=true;

        l5=true;

        x=220;

        y=100;

      }

    }

  }

  if(k==true){

    if(l5==true){

      circle(x,y,10);

      y++;

      if(y==255){

        l5=false;

        r4=true;

        r5=true

      }

    }

    if(r4==true){

      a=220+sin(angle3)*55;

      b=290+cos(angle3)*80;

      circle(a,b,10);

      angle3+=speed;

      if(a<225){

        r4=false;

      }

    }

    if(r5==true){

      x=220+sin(angle4)*50;

      y=160+cos(angle4)*50;

      circle(x,y,10);

      angle4+=speed;

      if(y<170){

        r5=false;

        A=true;

        r6=true;

        l6=true;

      }

    }

 }

  if(A==true){

    if(r6==true){

      x=310+sin(angle5)*35;

      y=220+cos(angle5)*35;

      circle(x,y,10);

      angle5+=speed;

      a=340;

      b=195;

      if(x>340&&y>182){

        r6=false;

      }

    }

    if(l6==true){

      circle(a,b,10);

      b++;

      if(b==255){

        l6=false;

        r7=true;

        s=true;

      }

    }

  }

  //s

  if(s==true){

    if(r7==true){

      x=390+sin(angle6)*30;

      y=210+cos(angle6)*20;

      circle(x,y,10);

      angle6+=speed;

      if(x>=390&&y>=225){

        r7=false;

        r8=true;

      }

    }

    if(r8==true){

      x=390+sin(angle7)*30;

      y=250.5+cos(angle7)*20;

      circle(x,y,10);

      angle7-=speed;

      if(x<390&&y>=270.5){

        r8=false;

        l7=true;

        x=390;

        y=270.5;

        a=450;

        b=100;

      }

    }

      if(l7==true){

        circle(x,y,10);

        x--;

        if(x<=40){

          l7=false;

          done=true;

        }

        circle(a,b,10);

        b++;

        if(b>=250){

          b--;

          circle(a,y,10)

        }

      }

    }

  if(done==true){

      createCanvas(400, 400);

     background(10,20,mouseX);

      //creating star movement

    for(let i=0;i<50;i++){

      noStroke();

      circle(random(400),random(400),2);

    }

      fill(255-mouseX);

      //moon

      stroke(0);

      circle(moonx,30,130);

      moonx+=moonctr;

      if(moonx>width){

        moonctr*=-1;

      }

      if(moonx<0){

        moonctr*=-1;

      }

      //body

      rectMode(CENTER);

      fill(0);

      rect(200,350,170,200,50);

      fill(140,65,60);

      arc(200,250,70,80,0,PI);

      fill(255);

      noStroke();

      //neck

      fill(140,65,60);

      rect(200,251,50,50,20);

      stroke(0);

      fill(255);

      //chain

      stroke(0);

      strokeWeight(1.3);

      noFill();

      arc(200,251,50,40,0,PI);

      strokeWeight(2);

      line(200,272,200,280);

      strokeWeight(1);

      fill(255);

      //head

      fill(140,65,60);

      rect(200,195,80,110,40);

      //ears

      arc(239.5,190,22,25,4.7,PI/2);

      arc(160.5,190,22,25,1.57,-PI/2);

      noFill();

      arc(239.5,190,14,12,4.7,PI/2);

      arc(160.5,190,14,12,1.57,-PI/2);

      fill(255);

      //Durag

      strokeWeight(2);

      fill(0,0,255)

      arc(200,176,80,79,PI,0);

      beginShape();

      curveVertex(165, 176);

      curveVertex(160, 176);

      curveVertex(239, 176);

      curveVertex(239, 176);

      endShape();

      beginShape();

      curveVertex(165, 165);

      curveVertex(163, 165);

      curveVertex(237, 165);

      curveVertex(237, 165);

      endShape();

      strokeWeight(1);

      line(200,137,200,150);

      line(200,155,200,165);

      fill(255)

      //eyes

      arc(177,189,19,17,0,PI,CHORD);

      fill(0);

      circle(175+(0.01*mouseX),193+(0.005*mouseY),9);

      arc(177,185,20,5,PI,0,OPEN)

      fill(255);

      arc(223,189,19,17,0,PI,CHORD);

      fill(0);

      circle(220+(0.01*mouseX),193+(0.005*mouseY),9);

      arc(223,185,20,5,PI,0,OPEN)

      fill(255);

      //nose

      beginShape();

      curveVertex(210, 200);

      curveVertex(200, 200);

      curveVertex(192.62, 215);

      curveVertex(192.62, 215);

      endShape();

      noFill();

      arc(199,215,13.6,17,6.7,PI);

      //mouth

      arc(210,230,17,10,6,PI/1.6)

      //shirt text

      fill(0,0,255);

      textSize(20);

      textFont('Georgia');

      text("Rekas",170,320)

      //boarders

      fill(0)

      rect(0,200,20,401);

      rect(400,200,20,401);

      rect(200,0,401,50);

      rect(200,400,401,120);

      fill(255)

  }

}