h = 600,

    cx = w/2, //center x

    cy = h/2,

    dialDiameterRatio = 0.9;

​

let dialAsset; //global buffer for pre-rendering dial texture

​

function setup() {

  createCanvas(w, h);

  frameRate(4);

  createTexturedDial();

  imageMode(CENTER);

}

​

function draw() {

  background(220);

  image(dialAsset, cx, cy);

}

​

function createConcentricDial() {

  dialAsset = createGraphics(w, h);

  dialAsset.noStroke();

  let dialD = dialDiameterRatio*h;

  let colorA = 0;

  let colorB = 64;

  let stripe = false;

  for (let r=dialD; r>0; r-=3) {

    (stripe ? dialAsset.fill(colorA) : dialAsset.fill(colorB));

    stripe = !stripe;

    //fill(random(255));

    dialAsset.ellipse(cx, cy, r, r);  

  }

}

​

function createTexturedDial() {

  dialAsset = createGraphics(w, h);

  dialAsset.noStroke();

  let dialR = dialDiameterRatio*h / 2;

  let colorA = color(31, 61, 80);

  let colorB = color(55, 86, 104);

  dialAsset.fill(colorA);

  dialAsset.ellipse(cx, cy, dialR*2, dialR*2);

  dialAsset.stroke(colorB);

  dialAsset.strokeWeight(1.2);

  for (let r = 1; r < dialR-1; r++) {

    for (let angle=0; angle<TWO_PI; angle+=0.01) {

      if (random(100) > 50) {

        dialAsset.point(cx+cos(angle) * r, cy+sin(angle) * r);

      }

    }

  }

}