線分がカーソルによって押されたり引かれたりします。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.