'red' : '#E84C0A',

  'pink': '#F4B3D1',

  'purple': '#544495',

  'green': '#54B9A0'

}

​

function setup() {

  createCanvas(800, 800)

}

​

function draw() {

  background('#00020C');

  // BG circles

  noFill()

  stroke('white')

  strokeWeight(3)

  circle( width/2, height/2, 400 )

  circle( width/2 - 10, height/2 + 10, 430 )

  fill( colors.red )

  noStroke()

  // circle( width/2, height/2, 300 )

  translate( width/2, height/2 )

​

  let planetOne = planet( colors.pink, 400, 30 )

  image(planetOne, (mouseX/800-0.5)*40-200, -200);

  let planetTwo = planet( colors.green, 100, 25 )

  image(planetTwo, (mouseX/800-0.5)*20-50, -50);

  /*

  fill( colors.green )

  noStroke()

  circle( width*0.75, height*0.25, 100 )

  */

}

​

function planet( _c, _r, _sw ){

  // create a p5.Graphics containing the image that will be masked

  let strokes = createGraphics(_r,_r);

  // draw some stuff.

  strokes.stroke(255);

  for(var i = 0; i < _r + _sw; i+=_sw){

    strokes.strokeWeight(_sw/2)

    strokes.line(i,0,i,_r);

  }

  let mask = createGraphics(_r,_r);

  mask.fill(_c);

  mask.noStroke()

  mask.ellipse(_r/2,_r/2,_r);

  return maskGraphics(mask,strokes);

}

​

function maskGraphics(_content,_mask){

    //Create the mask as image

  var img = createImage(_mask.width,_mask.height);

  img.copy(_mask, 0, 0, _mask.width, _mask.height, 0, 0, _mask.width, _mask.height);

  //load pixels

  img.loadPixels();

  for (var i = 0; i < img.pixels.length; i += 4) {

    // 0 red, 1 green, 2 blue, 3 alpha

    // Assuming that the mask image is in grayscale,

    // the red channel is used for the alpha mask.

    // the color is set to black (rgb => 0) and the

    // alpha is set according to the pixel brightness.

    var v = img.pixels[i];

    img.pixels[i] = 0;

    img.pixels[i+1] = 0;

    img.pixels[i+2] = 0;

    img.pixels[i+3] = v;

  }

  img.updatePixels();

  //convert _content from pg to image

  var contentImg = createImage(_content.width,_content.height);

  contentImg.copy(_content, 0, 0, _content.width, _content.height, 0, 0, _content.width, _content.height);

  // create the mask

  contentImg.mask(img)

  // return the masked image

  return contentImg;

}

​