javascript canvas intersection between two path2D - javascript

I'm looking for a way to check if two path2D are intersecting but can't find a way...
Exemple :
// My circle
let circlePath = new Path2D();
circlePath.ellipse(x, y, radiusX, radiusY, 0, 0, Math.PI*2, false);
// My rectangle
let rectPath = new Path2D();
rectPath.rect(x, y, width, height);
// Intersect boolean
let intersect = circlePath.intersect(rectPath); // Does not exists
Is there a function to do that ?
I found isPointInPath(path2D, x, y) (that I use with my paths to check intersect with mouse) but can't use it between two paths.
Or maybe a way to get an array of all points in a Path2D to use isPointInPath with all points ?
Edit:
FYI, I want this for a game development, I want to be able to check collision between my entities (an entity is defined by some data and a Path2D). My entities can be squares, circles or more complex shapes.

There currently is nothing in the API to do this.
The Path2D interface is still just an opaque object, from which we can't even extract the path-data. I actually did start working on a future proposal to expose this path-data and add a few more methods to the Path2D object, like a getPointAtLength(), or an export to SVG path commands, which would help doing what you want, but I wouldn't hold my breath until it's part of the API, and I must admit I didn't even consider including such a path-intersect method...
However as part of this effort I did build a prototype of that API that currently exposes only a few of the expected methods: https://github.com/Kaiido/path2D-inspection/
Among these methods there is a toSVGString() that can be used with this project (that I didn't extensively test).
So we could build a Path2D#intersects() by merging both libraries. However note that at least mine (path2d-inspection) hasn't been extensively tested yet and I don't recommend using it in production just yet.
Anyway, here is a very quickly made hack as a proof-of-concept:
const circlePath = new Path2D();
circlePath.ellipse(rand(100, 20), rand(100, 20), rand(80, 10), rand(80, 10), rand(Math.PI*2), 0, Math.PI*2, false);
// My rectangle
const rectPath = new Path2D();
rectPath.rect(rand(150), rand(100), rand(200), rand(200));
// Intersect boolean
const intersect = rectPath.intersects(circlePath);
console.log("intersect:", intersect);
// List of intersection points
const intersections = rectPath.getIntersections(circlePath);
console.log(intersections);
// Render on a canvas to verify
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.stroke(circlePath);
ctx.strokeStyle = "red";
ctx.stroke(rectPath);
function rand(max=1, min=0) {
return Math.random() * (max - min) + min;
}
.as-console-wrapper { max-height: 50px !important }
<script src="https://cdn.jsdelivr.net/gh/Kaiido/path2D-inspection#master/build/path2D-inspection.min.js"></script>
<script>
// a really quick hack to grasp 'intersect' from their esm
globalThis.module = {};
</script>
<script src="https://cdn.jsdelivr.net/gh/bpmn-io/path-intersection#master/intersect.js"></script>
<script>
// part 2 of the hack to grasp 'intersect', let's make it a Path2D method :P
{
const intersect = module.exports;
delete globalThis.module;
Path2D.prototype.getIntersections = function(path2) {
return intersect(this.toSVGString(), path2.toSVGString());
};
Path2D.prototype.intersects = function(path2) {
return this.getIntersections(path2).length > 0;
};
}
</script>
<canvas></canvas>

Related

Javascript chaining the same animation function with different parameters

I am trying to animate a line two lines along a path, one then the other. Basically it will look like one line being drawn, stopping at a point, then another line being drawn somewhere else. So far I have come across promises and callbacks to achieve this, but being a javascript newbie this is confusing
Current animate function:
/*
* Animation function draws a line between every point
*/
var animate = function(p){
return new Promise(function(resolve) {
t = 1;
var runAnimation = function(){
if(t<p.length-1){
context.beginPath();
context.moveTo(p[t-1].x,p[t-1].y);
context.lineTo(p[t].x,p[t].y);
context.stroke();
t++;
requestAnimationFrame(function(){runAnimation()});
} else {
resolve()
}
};
runAnimation();
});
}
Current call to animate function:
animate(points).then(animate(secondary_points));
The points are similar to:
var points = [{x:100, y:200}];
And the paths the lines need to follow are just the multiple coordinates inside points and secondary_points
Ive tried many solutions on SO that were similar, but small differences cause me to either mess up or not understand the solution. The biggest issue I seem to have is calling the SAME animate function, with that animate function needing to be run on different parameters.
Without this solution, using
animate(points);
animate(secondary_points);
the lines are drawn somewhat at the same time, but the result is actually just randomly placed dots along the path instead of smooth lines, I assume because both are running at the same time.
How would I go about fixing this so that one line is drawn along path1 and then the second line is drawn along path2?
It is probably a simple solution, but Ive worked with JS for 3 days and my head is still spinning from getting used to some of the syntax of the old code Ive had to fix
Thank you
EDIT:
The full flow of the animation is as follows:
I have a php file that contains 2 canvases, each containing an image of a map. The php file has a couple <script/> tags, one of which calls the js script I am writing the animation on via drawPath(source,destination,true) or drawPath(source,destination,false)
The drawPath function uses the boolean to determine which canvas to get the context for, and then draw on the path from point A to point B via finding the path and creating the points mentioned above, then drawing using animate(). There are a couple breaks in the maps that require separate lines, which prompted my original question. I was able to fix that thanks to suggestions, but now I am having a larger issue.
If I need to go from point A on map A to point B on map B, ie
drawPath(source, end_point_of_map_A, true); is called then
drawPath(start_point_of_map_B, destination, false);, the lines are drawn only on one map, and they are similar to before where they are 1. random and 2. incomplete/only dots
I am assuming this is due to the animation again, because it worked when just drawing the lines statically, and each animation works when going from point A to B on a single map
Any help is appreciated!
Edit:
DrawPath()
function drawPath(source, desti, flag) {
/*
* Define context
*/
//lower
if(!flag){
var c = document.getElementById("myCanvas");
context = c.getContext("2d");
//upper
} else {
var cUpr = document.getElementById("myCanvasUpr");
context = cUpr.getContext("2d");
}
/*
* Clear the variables
*/
points = [];
secondary_points = [];
vertices = [];
secondary_vertices = [];
t = 1;
done = false;
//check for invalid locations
if (source != "" && desti != "") {
context.lineCap = 'round';
context.beginPath();
/*
* Get the coordinates from source and destination strings
*/
var src = dict[source];
var dst = dict[desti];
/*
* Get the point number of the point on the path that the source and destination connect to
*/
var begin = point_num[source];
var finish = point_num[desti];
/*
* Draw the green and red starting/ending circles (green is start, red is end)
*/
context.beginPath();
context.arc(src[0], src[1], 8, 0, 2 * Math.PI);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.arc(dst[0], dst[1], 6, 0, 2 * Math.PI);
context.fillStyle = 'red';
context.fill();
/*
* Call the function that draws the entire path
*/
draw_segments(begin, finish, src, dst, flag);
//window.alert(JSON.stringify(vertices, null, 4))
/*
* Edit what the line looks like
*/
context.lineWidth = 5;
context.strokeStyle = "#ff0000";
context.stroke();
}
}
A nice way to handle this is to put your lines into a an array where each element is a set of points of the line. Then you can call reduce() on that triggering each promise in turn. reduce() takes a little getting used to if you're new to javascript, but it basically takes each element of the array c in this case, does something and that something becomes the next a. You start the whole thing off with a resolve promise which will be the initial a. The promise chain will be returned by reduce to you can tack on a final then to know when the whole thing is finished.
For example:
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d');
var animate = function(p){
return new Promise(function(resolve) {
t = 1;
var runAnimation = function(){
if(t<p.length-1){
context.beginPath();
context.moveTo(p[t-1].x,p[t-1].y);
context.lineTo(p[t].x,p[t].y);
context.stroke();
t++;
requestAnimationFrame(function(){runAnimation()});
} else {
resolve()
}
};
runAnimation();
});
}
// make some points:
let points = Array.from({length: 200}, (_,i) => ({x:i+1, y:i+2}))
let points2 = Array.from({length: 200}, (_,i) => ({x:300-i, y:i+2}))
let points3 = Array.from({length: 200}, (_,i) => ({x:i*2, y:100+100*Math.sin(i/10)}))
// create an array holding each set
let sets = [points, points2, points3]
// use reduce to call each in sequence returning the promise each time
sets.reduce((a, c) => a.then(() => animate(c)), Promise.resolve())
.then(() => console.log("done"))
<canvas id="canvas" height="300" width="500"></canvas>

Javascript canvas draw line strange behavior using algorithm

There are plenty of examples on how to draw lines on canvas, in js.
But for only educational purposes i want to draw line using algorithm. basically method gets two Vector2 points, from them it finds middle point, then it continues like that recursively until minimum distance of 2 pixels is reached.
I have DrawPoint method to basically draw 1 point on canvas, and DrawLine method that does all the job.
For now I have 2 problems:
1: points are not colored red, as they should be.
2:
It doesnt look like a line.
For Vector2 i used "Victor.js" plugin, and it seems to be working well.
this is code i have:
JS:
var point2 = new Victor(100, 100);
var point3 = new Victor(150, 150);
DrawLine(point2, point3);
function DrawLine(vec0, vec1)
{
var point0 = new Victor(vec0.x, vec0.y);
var point1 = new Victor(vec1.x, vec1.y);
var dist = point1.distance(point0);
if (dist < 2)
return;
//this is how it should look like in c# var middlePoint = point0 + (point1 - point0)/2; But looks like i cant just divide by 2 using victor js because i can only divide vector by vector.
var middlePoint = point0.add(point1.subtract(point0).divide(new Victor(2,2)));
DrawPoint(middlePoint);
DrawLine(point0, middlePoint);
DrawLine(middlePoint, point1);
}
function DrawPoint(point){
var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.fillStyle = "FF0000";
ctx.fillRect(point.x, point.y, 3,1);
}
I really appreciate any help you can provide.
The victor.js documentation shows that most functions of Victors do not return new Victors, but operate on the current instance. In a way, v1.add(v2) is semantically more like v1 += v2 and not v1 + v2.
The problem is with calculating the midpoint. You could use the mix() method, which blends two vectors with a weight. You must clone() the Victor first, otherwise point0will be midofied:
var middlePoint = point0.clone().mix(point1, 0.5);
If you don't change the original Vectors, you don't need to create new instances of Victors from the arguments, you can use the arguments directly:
function DrawLine(point0, point1)
{
var dist = point1.distance(point0);
if (dist < 2) return;
var middlePoint = point0.clone().mix(point1, 0.5);
DrawPoint(middlePoint);
DrawLine(point0, middlePoint);
DrawLine(middlePoint, point1);
}
Finally, as Sven the Surfer has already said in a comment, "FF0000" isn't a valid colour. Use "#FF0000", note the hash mark, or one of the named web colours such as "crimson".

Repair normals on possibly bad .stl files

I am new to Three.js and have been assigned the task of trying to repair the normals on files that have been coming in occasionally that appear to be bad. We do not know if they are bad scans or possibly bad uploads. We are looking into the upload function, but also would like to try and repair them if possible. Can anyone provide any ideas or tips to repair the file or find the correct normals?
Below is the code where we grab the normals and how we grab them. NOTE: this code works fine generally, it is only a problem when the normals are bad. I am also attaching one of the files so you can see the types of normals and "bad file" I am dealing with. Get File here
We are also using VTK on the backend with C++, so a solution or idea using either of these is helpful.
my.geometry = geometry;
var front = new THREE.MeshPhongMaterial(
{color: 0xe2e4dc, shininess: 50, side: THREE.DoubleSide});
var mesh = [new THREE.Mesh(geometry, front)];
my.scene.add(mesh[0]);
my.objects.push(mesh[0]);
var rc = new THREE.Raycaster();
var modelData = {'objects': [mesh[0].id], 'id': mesh[0].id};
var normalFound = false;
for (var dy = 80; dy >= -80; dy = dy - 10) {
console.log('finding a normal on', 0, dy, -200);
rc.set(new THREE.Vector3(0, dy, -200), new THREE.Vector3(0, 0, 1));
var hit = rc.intersectObjects([mesh[0]]);
if (hit.length) {
my.normal = hit[0].face.normal.normalize();
console.log('normal', my.normal.z);
modelData['normal'] = my.normal;
if ((my.normal.z > 0.9 && my.normal.z < 1.1)) {
my.requireOrienteering = true;
modelData['arch'] = 'lower';
normalFound = true;
console.log('we have a lower arch');
} else if ((my.normal.z < -0.9 && my.normal.z > -1.1)) {
modelData['arch'] = 'upper';
normalFound = true;
console.log('we have an upper arch');
}
break;
}
}
Calculating the normals is an easy step. If you calculate the cross product of two vectors (geometrical one), you will get a vector, that is orthogonal to the two, you input. All you have to do now is normalize it, since normals should be normalised to not mess up lightning calculations.
For smooth surfaces, you have to calculate all normals on the point and average them. For flat surfaces each vertex has multiple normales (one for each surface).
In pseudo code it will look like this for quads:
foreach quad : mesh
foreach vertex : quad
vector1 = neighborVertex.pos - vertex.pos;
vector2 = otherNeighborVertex.pos - vertex.pos;
vertex.normal = normalize(cross(vector1, vector2));
end foreach;
end foreach;
VTK has a filter named vtkPolyDataNormals that you can run on your file to compute normals. You probably want to call ConsistencyOn(), NonManifoldTraversalOn(), and AutoOrientNormalsOn() before running it.
If you want point-normals (instead of per-cell normals) and your shape has sharp corners, you probably want to provide a feature angle with SetFeatureAngle() and call SplittingOn().

Use of isPointInPath() to reference Path2D objects?

So I've gotten pretty excited about the introduction of Canvas Paths as standard objects in contemporary browsers, and have been trying to see how much mileage I can get out of this new-ish feature. However, my understanding of how these objects interact with the isPointInPath() method (and possibly other path-based methods) is apparently somewhat flawed.
As demonstrated in the first two test functions below, I can get the drawn paths to be recognized by the isPointInPath() method. However, when I define the paths as an object, the method ceases to work (even though the path objects can be recognized for other purposes such as filling).
function startGame(){ //Initiating Environment Variables
gamemap = document.getElementById("GameMap")
ctx = gamemap.getContext("2d")
testCircleBounds()
testVarCircleBounds()
testObjCircleBounds()
testMultiObjCircleBounds()
}
function testCircleBounds() { //Minimalist Test of Path Methods
ctx.beginPath()
ctx.arc(250,250,25,0,2*Math.PI)
console.log(ctx.isPointInPath(250,250)) //point in path detected
ctx.closePath()
console.log(ctx.isPointInPath(250,250)) //point in path still detected
ctx.stroke()
ctx.fillStyle = "yellow"
ctx.fill() //fills great
}
function testVarCircleBounds() { //Test of Path Methods with Variables
x_cen = 250; y_cen = 250; rad = 15
ctx.beginPath()
ctx.arc(x_cen,y_cen,rad,0,2*Math.PI)
ctx.closePath()
console.log(ctx.isPointInPath(x_cen,y_cen)) //true yet again
ctx.stroke()
ctx.fillStyle = "orange"
ctx.fill() //also fills great
}
function testObjCircleBounds() { //Test of Path Methods with Single Stored Path Object
x_cen = 250; y_cen = 250; rad = 10
ctx.beginPath()
lonely_node = new Path2D()
lonely_node.arc(x_cen,y_cen,10,0,2*Math.PI)
ctx.closePath()
console.log(ctx.isPointInPath(x_cen,y_cen)) //point in path not found!
ctx.stroke(lonely_node)
ctx.fillStyle = "red"
ctx.fill(lonely_node) //but ctx.fill notices the path just fine
}
function testMultiObjCircleBounds(){ //Test of Paths Methods with Multi-Object Referencing
nodes = [] //initializes set of nodes as array
for (i=0; i<25; i++) { //generates 25 nodes
nodes[i] = new Path2D() //defines each node as Path object in the array
node = nodes[i]
//Places Nodes along the 'horizon' of the map
x_cen = 20*i + 10
y_cen = 100
ctx.beginPath(node) //"node" argument probably not helping?
node.arc(x_cen,y_cen,8,0,2*Math.PI)
console.log(ctx.isPointInPath(x_cen,y_cen)) //still returns false!
ctx.closePath(node)
ctx.stroke(node)
console.log(ctx.isPointInPath(x_cen,y_cen)) //arrgh!!
}
// Fill can also be selectively applied to referenced path objects
for (i=0; i<25; i=i+2) {
ctx.fill(nodes[i])
}
}
<!DOCTYPE html>
<html>
<head>
<title>Wrap Around Beta</title>
<script src="Circuity_PathObjectTest.js"></script>
</head>
<body onload='startGame()'>
<canvas id="GameMap" width="500" height="500" style="border:1px solid #000000"></canvas>
</body>
</html>
Is this fundamentally the wrong way to think about Path2D objects and to record 'hit' areas on a canvas? If so, is there another technique (saving the canvas context for each path drawn or something along that vein) that would produce the desired effect?
You must send a reference to the Path2D being tested into isPointInPath:
ctx.isPointInPath( lonely_node, x_cen, y_cen )

Raphael-JS: Rect with one round corner

paper.rect(0, 0, settings.width, settings.height, settings.radius);
Creates a nice rectangle with rounded corners. Is it possible to create a rectangle with just one round corner?
If you use Raphael JS:
Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){
var array = [];
array = array.concat(["M",x,r1+y, "Q",x,y, x+r1,y]); //A
array = array.concat(["L",x+w-r2,y, "Q",x+w,y, x+w,y+r2]); //B
array = array.concat(["L",x+w,y+h-r3, "Q",x+w,y+h, x+w-r3,y+h]); //C
array = array.concat(["L",x+r4,y+h, "Q",x,y+h, x,y+h-r4, "Z"]); //D
return this.path(array);
};
To have a rectangle with only the upper-right corner rounded
var paper = Raphael("canvas", 840, 480);
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0);
Source and online example: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/
The rounded corners feature maps directly on to the underlying SVG rx and ry attributes, they apply to whole rectangles and so there's no possibility of just setting it on a single corner.
This blog post discusses an approach in SVG of basically covering up the corners you don't want rounded. Although his examples appear to be offline now, the approach should be fairly easy to reverse engineer into SVG.
An alternative approach would be to use a path instead of a rectangle object and draw the whole outline yourself. The syntax is a little obscure but is easy enough once you understand what's going on. Try Jakob Jenkov's SVG Path tutorial for an introduction.
Very old question, here's a better path. I converted it to relative coordinates, which should be better at animations...
Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){
var array = [];
array = array.concat(["M",x+r1,y]);
array = array.concat(['l',w-r1-r2,0]);//T
array = array.concat(["q",r2,0, r2,r2]); //TR
array = array.concat(['l',0,h-r3-r2]);//R
array = array.concat(["q",0,r3, -r3,r3]); //BR
array = array.concat(['l',-w+r4+r3,0]);//B
array = array.concat(["q",-r4,0, -r4,-r4]); //BL
array = array.concat(['l',0,-h+r4+r1]);//L
array = array.concat(["q",0,-r1, r1,-r1]); //TL
array = array.concat(["z"]); //end
return this.path(array);
};

Categories

Resources