function setup() {
    var canvas = createCanvas(800, 600);
    canvas.parent('container');
    frameRate(60);
    x = random(1, 184); // [1, 184]
    console.log("x = " + x);
    y = x + 36; // x + 36
    console.log("y = " + y);

    xb = random(x, y-11); // [x, y-11]
    console.log("xb = " + xb);
    yb = xb + 4;
    console.log("yb = " + yb);
}

function draw() {
    background(25);

    angleMode(DEGREES); // using degrees not radian
    translate(400, 300); // origin is the middle of the canvas;
    noFill();
    strokeWeight(4);

    stroke(color("#595959")); // gray
    ellipse(0, 0, 150, 150); // gray ellipse

    strokeWeight(10);
    stroke(color(255, 255, 255)); // white
    arc(0, 0, 150, 150, x, y); // white outline
    stroke(color(0, 0, 0)); // black
    strokeWeight(8);
    arc(0, 0, 150, 150, x, y); // black arc

    strokeWeight(10);
    stroke(color(255, 255, 255)); // white
    arc(0, 0, 150, 150, xb, yb); // white arc

    stroke(color(173, 6, 6)); // red
    strokeWeight(4);
    rotate(frameCount*3);
    line(0, -65, 0, -90); // red dot

}