A p5.js addon that provides interactive, draggable points that can be used to control geometric shapes and objects. Perfect for interactive geometry visualizations, constraint-based drawing, and interactive design tools.
- MovablePoint Class - Create draggable points with a simple, intuitive API
- checkClicked() Function - Easily handle mouse interactions for multiple points
- Collision Detection - Built-in support for detecting overlaps between objects
- Per-sketch Drag State - Proper state management for multiple sketches on the same page
- Lightweight - Minimal footprint, works seamlessly with p5.js
const sketch = (p) => {
let point;
p.setup = function () {
p.createCanvas(400, 400);
point = new p5.MovablePoint(200, 200, 15); // <-- create a new movablepoint
};
p.draw = function () {
p.background(220);
// Handle drag interactions
p.checkClicked([point]); // <-- have interaction amoung multiple points (no need for single point)
// Draw the point
const [x, y] = point.getPosition();
p.circle(x, y, 30);
};
};
new p5(sketch);Creates an interactive point that can be dragged with the mouse.
const point = new p5.MovablePoint(startX, startY, clickableRadius);Parameters:
startX(number) - Initial x position default is 0startY(number) - Initial y position default is 0clickableRadius(number) - Click radius for interaction (default: 10)
Methods:
Returns the current position of the point as [x, y].
const [x, y] = point.getPosition();Programmatically move the point to a new position.
point.changePosition(100, 200);Properties:
x(number) - Current x coordinatey(number) - Current y coordinateclicked(boolean) - Whether the point is currently being draggedclickableR(number) - The radius within which the point can be clicked
Handles mouse interaction for an array of points.
p.checkClicked(pointsArray);Parameters:
pointsArray(Array) - Array of MovablePoint objects to check
This function:
- Detects when the mouse is pressed within a point's clickable radius
- Updates each point's
clickedproperty and position while dragging - Handles multiple points intelligently (only one can be dragged at a time)
Drag the three corner points to reshape the triangle.
const sketch = (p) => {
let points = [];
p.setup = function () {
p.createCanvas(400, 400);
points = [
new p5.MovablePoint(100, 100, 12),
new p5.MovablePoint(300, 100, 12),
new p5.MovablePoint(200, 300, 12),
];
};
p.draw = function () {
p.background(220);
p.checkClicked(points);
const [x1, y1] = points[0].getPosition();
const [x2, y2] = points[1].getPosition();
const [x3, y3] = points[2].getPosition();
p.stroke(0);
p.line(x1, y1, x2, y2);
p.line(x2, y2, x3, y3);
p.line(x3, y3, x1, y1);
p.fill(255);
for (let pt of points) {
const [x, y] = pt.getPosition();
p.circle(x, y, 24);
}
};
};
new p5(sketch);Two boxes that can be dragged and push each other apart on collision.
See examples/example-3/ for a complete implementation with collision detection and resolution.
MIT
Contributions are welcome! Please feel free to submit pull requests or issues.