P5JS-RotaryKnob

// Rotary Knob

let knobAngle = 0; let knobIsDragging = false; let knobX, knobY, knobRadius; let knobLastMouseDist;

function setup() {

 createCanvas(400, 400);
 knobX = width / 2;
 knobY = height / 2;
 knobRadius = 50;

}

function draw() {

 background(220);

 translate(knobX, knobY);
 stroke(0);
 fill(200);
 ellipse(0, 0, knobRadius * 2, knobRadius * 2);
 
 push();
 rotate(knobAngle);
 stroke(0);
 line(0, 0, knobRadius, 0);
 pop();

 // When the mouse is dragged, update the angle based on the distance change
 if (knobIsDragging) {
   
   let currentMouseDistX = mouseX - knobX;
   let currentMouseDistY = knobY - mouseY;
   
   let currentMouseDist = currentMouseDistX - currentMouseDistY;

   // Change the angle proportional to the difference in distances
   let distChange = currentMouseDist - knobLastMouseDist;

   // Update the angle based on the change
   knobAngle += distChange * 0.01; // Adjust sensitivity

   // Save the current distance for the next frame
   knobLastMouseDist = currentMouseDist;
 }

}

function mousePressed() {

 // Check whether the mouse is inside the control dial
 let d = dist(mouseX, mouseY, knobX, knobY);
 if (d < knobRadius) {
   knobIsDragging = true;
   knobLastMouseDist = dist(mouseX, mouseY, knobX, knobY); // Save start distance
 }

}

function mouseReleased() {

 knobIsDragging = false;

} </pre>