moon = loadImage("moon.png");

}

​

function crescent(x,y,a,r,n) {

  //center of crescent is (x,y)

  //small radius is a (+/-), big radius is r (+/-)

  //n is number of vertices per arc

  let delt = PI/n; //delta t (parameter)

  translate(x,y);

  beginShape();

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

    vertex(a*Math.sin(delt*i),r*Math.cos(delt*i));

  }

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

    vertex(r*Math.sin(PI-delt*i),r*Math.cos(PI-delt*i));

  }

  endShape(CLOSE);

  translate(-x,-y);

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(0,0,100);

  fill(0,0,0,200);

  strokeWeight(0);

  image(moon,0,0);

  crescent(100,100,50,100,30);

  image(moon,200,0);

  crescent(300,100,-50,100,30);

  image(moon,0,200);

  crescent(100,300,50,-100,30);

  image(moon,200,200);

  crescent(300,300,-50,-100,30);

}