createCanvas(600, 400);

  colorMode(HSB);

}

​

x=100

y=100

outline=55

inline=50

​

​

function draw() {

  let h=255

  let s=100

  let b=100

  background(h,s,b);

  // new moon

  stroke(255);

  fill(h,s,b);

  ellipse(x,y,outline,outline);

  ellipse(x,y,inline,inline);

​

 // waxing Crescent

  fill(255);

  ellipse(x+100,y,inline,inline);

  fill(h,s,b);

  noStroke();

  rect(175,75,outline/2,outline)

  stroke(255);

  noFill();

  ellipse(x+100,y,outline,outline);

  fill(h,s,b);

  noStroke();

  ellipse(x+100,y,inline/2,inline);

  // First Quarter

  fill(255);

  ellipse(x+200,y,inline,inline);

  fill(h,s,b);

  noStroke();

  rect(270,72,outline/2,outline)

  stroke(255);

  noFill();

  ellipse(x+200,y,outline,outline);

  // Waxing Gibbous

  noStroke();

  fill(255);

  ellipse(x+300,y,inline,inline);

  fill(h,s,b);

  noStroke();

  fill(h,s,b)

 rect(370,72,outline/2,outline)

  stroke(255);

  noFill();//Outline

  ellipse(x+300,y,outline,outline);

  fill(255)

  arc(x+300, y, inline/2, inline, PI/2, -PI/2 );

  // full Moon

  noFill();

  stroke(255);

  ellipse(x,y+200,outline,outline);

  fill(255);

  ellipse(x,y+200,inline,inline);

  // Waning Gibbous

  fill(255);

  ellipse(x+100,y+200,inline,inline);

  fill(h,s,b);

  noStroke();

  fill(h,s,b)

  rect(200,275,outline/2,outline)

  stroke(255);

  noFill();

  ellipse(x+100,y+200,outline,outline);

  fill(255)

arc(x+100, y+200, inline/2, inline, -PI/2, PI/2 );

  // Last Quarter

  fill(255);

  ellipse(x+200,y+200,inline,inline);

  fill(h,s,b);

  noStroke();

  fill(h,s,b)

  rect(x+200,275,outline/2,outline)

  stroke(255);

  noFill();

  ellipse(x+200,y+200,outline,outline);

   // Waning crescent

  fill(255);

  ellipse(x+300,y+200,inline,inline);

  fill(h,s,b);

  noStroke();

  rect(x+300,272,outline/2,outline)

  stroke(255);

  noFill();

  ellipse(x+300,y+200,outline,outline);

  fill(h,s,b);

  noStroke();

  ellipse(x+300,x+300,inline/2,inline);

}