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!
Related
Edit: Since I'm just planning my approach to the project, I have no code to show for it. My question is more about how i could approach the problem (arrays, objects or if there are smarter ways to do it) than about the actual code. Since I'm pretty new Im looking for a "way in" how I could tackle the project and look at tutorials.
(Since I'm pretty new to coding I'm trying to solidify the basics of html/css/js by building my own projects. With this project my problem is finding my way in, since I struggle with finding the correct mechanics, so I cant find any tutorials because i dont know where to start)
The project
I'm trying to build a project which pairs 3 images ("background", "base" and "addition"), starting from one which is selected.
For example: I'm selecting in image with the "background" woods and it will pair it with a small river as "base" and foxes as "addition".
If the user doesn't like the pairing, he can click a btn and it will pair the same selected image (in this case the wood) with other two compatible images (for example: a mossy stone and squirrels).
However: it wouldn pair my selected image, which in this case is a wood with a desert floor and dolphins.
The user also could start by selecting a "addition", for example a crab, which will be paired with a beach and smaller pebbles.
The problem
I'm pretty sure that the main focus with this project should be on arrays.
I thought i could do 3 arrays (one for the background, one for the base and one for the addition) and from there just pair random values from the different arrays. However, should i make 3 arrays for every probability or is there a way I could filter the pairs I want and the pairs i dont want?
An other approach i thought of was to let every image in the array be an object, so that i can assign attributes (for example: climate, color, sea level..) to the objects and filter them based on that.
In this case however I'm struggling with the code to first filter the correct pairings and then select a random pairing from those which were selected.
Every bit of help is appreciated,
thank you!
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.
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.
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
I asked another version of this question on the gamedev.SE site earlier today but figured I could get better answers here. Also reformulated the question some. I hope this is okay couldn't find anything prohibiting it in the FAQ
I'm playing around with making a puzzle game, haven't done that much before I run into my first problem.
Question a) Basically, I want to create a certain amount of the same object/function (a ball). But the objects will be created dynamically (since the amount of balls could range from 3 to 25), preferably with a for loop pushing the different balls to an array.
However I'm not experienced enough to figure out a good way to do this.
Also, once I have my array of balls on the canvas, I want to be able to select one of the balls.
Question b) How do I know/determine which ball in the array was clicked?
Is a simple for loop enough and accessing the objects with [i]?
I made a jsFiddle example of what I want with 1 ball (you need to click the orange ball to select, then you can move it around by clicking anywhere on the canvas).
This is what I want to do, but with more balls, and the amount of balls is not specified (deciding the amount part i got covered). How could I solve this in a easy way?
Help appreciated.
Using a for loop is fine for your object generation.
As for detecting when you click an object in the canvas, this tutorial might help. It appears there is no built-in feature for tracking objects in your canvas - you simply do manual hit detection based on the common pixels under your mouse and object
Hope that helps
Paper.js has great DOM model, and out of the box ability to click and select items
http://paperjs.org/tutorials/project-items/transforming-items/
hit testing:
http://paperjs.org/examples/hit-testing/