Public
Edited
Jan 13, 2023
1 star
md`# Paper.js hit-testing
Okay so I javascriptified the PaperScript version of the file, why do libraries keep reinventing their own languages? just use javascript. I have tooling for JavaScript not for PaperScript, I have JavaScript debuggers, not PaperScript debuggers, soo annoying.`
canvas = html`<canvas width="${width}" height="600px"></canvas>`
circle = {
paper.setup(canvas);
// Create a circle in the middle of the canvas
var circle = new paper.Path.Circle({
center: paper.project.view.center,
radius: 50
});
circle.fillColor = "red";
// Draw the circle on the canvas
paper.project.view.draw();
return circle;
}
{
circle;
t.createPaths();
paper.project.view.draw();
}
tool = new paper.Tool()
{
tool.onMouseDown = t.onMouseDown;
tool.onMouseDrag = t.onMouseDrag;
tool.onMouseMove = t.onMouseMove;
}
tool.activate()
t = {
var values = {
paths: 50,
minPoints: 5,
maxPoints: 15,
minRadius: 30,
maxRadius: 90
};
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
function createPaths() {
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
var radius = values.minRadius + Math.random() * radiusDelta;
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
var path = createBlob(
paper.view.size.multiply(paper.Point.random()),
radius,
points
);
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
var hue = Math.random() * 360;
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
path.strokeColor = "black";
}
}
function createBlob(center, maxRadius, points) {
var path = new paper.Path();
path.closed = true;
for (var i = 0; i < points; i++) {
var delta = new paper.Point({
length: maxRadius * 0.5 + Math.random() * maxRadius * 0.5,
angle: (360 / points) * i
});
path.add(center.add(delta));
}
path.smooth();
return path;
}
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = paper.project.hitTest(event.point, hitOptions);
if (!hitResult) return;
if (event.modifiers.shift) {
if (hitResult.type == "segment") {
hitResult.segment.remove();
}
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == "segment") {
segment = hitResult.segment;
} else if (hitResult.type == "stroke") {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
movePath = hitResult.type == "fill";
if (movePath) paper.project.activeLayer.addChild(hitResult.item);
}
function onMouseMove(event) {
paper.project.activeLayer.selected = false;
if (event.item) event.item.selected = true;
}
function onMouseDrag(event) {
console.log(2, event.delta);
// Get the current position of the cursor
// var point = new paper.Point(event.clientX, event.clientY);
var delta = event.delta;
if (segment) {
// Update the segment's point and smooth the path
segment.point = segment.point.add(delta);
console.log(3);
path.smooth();
} else if (path) {
// Update the path's position
path.position = path.position.add(delta);
}
}
return {
values,
hitOptions,
segment,
path,
movePath,
createPaths,
createBlob,
onMouseDown,
onMouseMove,
onMouseDrag
};
}
paper = require("paper")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
