P5JS-RotaryKnob
From Digipool-Wiki
// 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; }