Difference between revisions of "P5JS-RotaryKnob"

Latest revision as of 23:50, 21 October 2024

// 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;
}