Paper JS reference has boolean math operations which checks one object against another object.
Problem is I see it's not enough to accomplish what I need which is to detect a closed path whether it be self-intersecting or two or more objects intersecting each other.
As a reference on below image, i cannot find a solution for the first two at the top. The image below which has the green fill works fine since the path is connected to the first mouse-down point.
Related
This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed 2 months ago.
although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I'm not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
It sounds like you're looking for instance mode.
Instance mode lets you do exactly what you're describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you're ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!
The project that I have been working on for the past month has many path objects that are beginning to overlap. My question is, is there a way to layer these objects? I want to be able to choose which object should be on top when it overlaps another object. Thank you for all the help!
I'm working on a flowchart system in JS, that allows the user to click on one element followed by another, and the program inserts an arrow connecting them. For this, I need a line-drawing algorithm which meets the following criteria:
Only straight lines/90deg turns
Guaranteed to take an efficient route, such that...
... it can take into consideration other lines (as it cannot intersect) - e.g, if I insert one line, and then another, it is able to draw the second without having to rearrange the first, or take a wildly inefficient route to get to its destination to avoid the first line.
If you know any algorithms which fit the bill (I've only found ones that match just one or at most two of the criteria), I'd be interested; also, if there's a JS implementation I can steal then please link that too.
Some notes:
Time complexity does not matter, as long as the result is aesthetically pleasant
There can be multiple lines originating from or entering one element. This is to allow for loopbacks/subroutines.
Lines can go on top of each other, just not perpendicularly across one another.
Examples:
image 1
I click on one element...
image 2
... and then on another, which then inserts the arrow between them.
image 3
If I continue this, I expect to get a linear sequence, with the arrows inserted automagically.
image 4
Alternatively, I can make use of multiple inputs/outputs to get a more closed chart, generating a more complex result.
image 5
I should be able to do this in any order to get the same result.
I'm making a drawing tool using Paper JS. Now I want to fill a closed path from two items, say for example two rectangles that intersects.
Looking at the reference there seems to be a function to get the intersections but does not accomplish what I need as it makes another shape out of the intersection.
intersect(item) or subtract(item)
Also in this scenario where it detects if the object is split.
If any of you guys have come across this issue please give some advice.
Thanks and regards.
There is a nice demo of boolean operations in the paper.js examples.
Use Path.unite(), Path.intersect() (and not Path.intersects()), Path.subtract(), Path.exclude() to compute boolean operations.
You can also use Path.getIntersections() or maybe the more appropriate Path.getCrossings() to handle intersections with opened path.
I've asked this question in the Adobe forums, but I haven't gotten an answer yet, I'm afraid. If this is truly impossible, then shame on Adobe for not making it possible.
I need a script that will check and see if a path fits entirely within another path. In my case, I need to see if a GroupItem fits within a circle/ellipse of a specific size. I don't see any methods available for PageItem that will do it for me, so does anyone know of a workaround? (Preferably without having to check every single PathPoint of every single item in the group.) I am using Illustrator CS6 and do my scripting with Javascript.
I am aware of the visibleBounds property of paths, but that only gives you a top, bottom, left, and right maximum boundaries of a path. It's entirely possible for an object's visibleBounds to be within an ellipse's visibleBounds, but still have parts of it sticking outside of the ellipse. I hope this makes sense and that someone out there has an idea on how to overcome this problem.
I'm not overly familiar with Illustrator, but does it have a path to selection function similar to Photoshop? I've used that to achieve similar to this. Essentially:
convert your internal path as a selection
subtract the selection based on the outer path from the selection created in step 1
if you don't have any selection left, the internal path is completely
contained within the outer selection