let d = 500;

let targetRotation = 0;

let currentRotation = 0;

let rotationProgress = 0;

​

let isOn = false;

let knobOpacity = 0.7;

​

// Rotation animation

let rotationAnimationStart = 0;

const ROTATION_DURATION = 500; // milliseconds for rotation animation

​

​

function setup() {

  // Set canvas size to fill the entire screen

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(20, 25, 35); // Deep dark background

  drawText();

  drawKnob();

}

​

function drawText(){

  textFont('InriaSans-Regular');

  textSize(200);

  textAlign(LEFT, TOP);

  fill(255);

  text('02', 30, 30);

}

​

// Function to draw the knob

function drawKnob() {

  push();

​

  // Knob positioning

  translate(width / 2, height / 2);

  //------------------------------------------------------  Circle

  fill(isOn ? color(255, 100, 100) : color(48, 106, 253));

  ellipse(0, 0, d, d);

  //------------------------------------------------------ Line Indicator

  // Rotation indicator

  push();

  rotate(currentRotation);

  strokeWeight(5);

  stroke(255, 255, 255, knobOpacity * 255);

  strokeCap(ROUND);

  line(0, d/2-40, 0, d/2 -120);

  pop();

​

  pop();

}

​