Follow 1 / 追跡 1

線分がカーソルによって押されたり引かれたりします。Keith Petersのコードに基づいています。

follow cursor physics
Interaction Math

View Source Code

/*
 * @name Follow 1
 * @arialabel Circle connected to a long oval. The user’s mouse is attached to the end of the oval. When the mouse moves, the oval and circle moves with it.
 * @frame 710,400
 * @description A line segment is pushed and pulled by the cursor.
 * Based on code from Keith Peters.
 */
let x = 100,
  y = 100,
  angle1 = 0.0,
  segLength = 50;

function setup() {
  // createCanvas(710, 400);
  createCanvas(windowWidth, windowHeight);
  strokeWeight(20.0);
  stroke(255, 100);
}

function draw() {
  background(0);

  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  segment(x, y, angle1);
  ellipse(x, y, 20, 20);
}

function segment(x, y, a) {
  push();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  pop();
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.