createCanvas(400, 400);

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background("#FFDC62");

  fill("#016400");

  noStroke();

  rect(0, 0, width/2, height);

  drawDot(width/4*3, height/2, "#004069", "attached");

  drawDot(width/4, height/2, "#fff", "unattached");

}

​

function drawDot(x, y, colour, label) {

  let pulse = 12 + sin(frameCount*10)*1;

  let rotation = (frameCount*1)%360;

  push();

  translate(x, y);

  fill(colour);

  noStroke();

  text(label, 0, 60);

  ellipse(0, 0, pulse);

  rotate(rotation);

  stroke(colour);

  strokeWeight(1.5);

  noFill();

  drawingContext.setLineDash([5, 5]);

  ellipse(0, 0, 30);

  pop();

}