0

Trying out paper.js for the first time, working on some generative visuals. Trying to figure out the best route to accomplish the following:

  • Each cloud shape is individual, but when they intersect each other, I want them to compound into one larger cloud.
  • Within that larger cloud, I want the individual shape to retain it's properties, so that it can eventually detach and become a single cloud again.

So I am running into a few problems trying to accomplish this. I check for intersections:

//cloudArray refers to an array of path items
Cloud.prototype.checkIntersection = function() {

    //loop through all existing cloud shapes
    for(var i=0;i<cloudArray.length;i++){ 

        //avoid checking for intersections on the same cloud path
        if(this.path !== cloudArray[i].path){

            //if path intersects another, group the two, and
            //sort them in the order of their id
            if(this.path.intersects(cloudArray[i].path)){
                tmpGrp = [this.path,cloudArray[i].path];
                tmpGrp.sort(function(a,b){return a.id - b.id});
                groupClouds(tmpGrp);
            }
        }
    }
}

Now after intersections are checked, I attempt to group the clouds together into arrays:

function groupClouds(tmpGrp){
    if(grps.length > 0){
        for(var i=0;i<grps.length;i++){
            if(tmpGrp !== grps[i]){
                console.log('doesnt match');
                grps.push(tmpGrp);
            }else{
                console.log('matches');
            }
        }
    }else{
        grps[0] = tmpGrp;
    }
    console.log(grps);
}

Now I know that I can't compare arrays this way, so I have tried to use the solution given here, but I didn't want to further clutter this question.

Is this method reasonable? I know that I could create a new compoundPath if I could create arrays for each group. The problem is assuring that each collection of intersecting clouds is correct, and that they are being updated efficiently.

Any advice?

Community
  • 1
  • 1
aceslowman
  • 621
  • 13
  • 28
  • Have you looked into compound paths? You can create temporary compound paths and hide the individual shapes. Once they seperate then delete the compound path. https://github.com/paperjs/paper.js/blob/develop/examples/Scripts/CompoundPath.html – winkerVSbecks Sep 14 '15 at 01:51
  • Yeah, the plan is to use compound paths, but I think the main problem I'm having right now is grouping efficiently. Say if clouds 1,4, and 5 make Group 1, and 2,3, and 6 make Group 2, how can I form those groups? The last snippet of code I included is where I am trying to work in the logic for that. – aceslowman Sep 14 '15 at 02:14
  • 1
    consider: `var clouds = [c1, c2, c3, …]` and another array `var state = { compounds: [], pool: [] }` Loop through them and check for intersections. For example, in the first iteration you are testing the intersection of `c1` with all other clouds. At the end of this iteration – let us say that `c1` intersects with `c4` & `c5` – you state should look like: `state = { compounds: [ [c1, c4, c5] ], pool: [c2, c3, …]}`. In the next iteration you test for `c2` and so on until you go through everything. Then you start again except now you test each compound against each item in the. – winkerVSbecks Sep 14 '15 at 02:29
  • Basically keep repeating until the pool is empty or the leftover items don't intersect. That's one way to do it. I feel like there might be a smarter way to do this. – winkerVSbecks Sep 14 '15 at 02:31
  • I like this idea. The one thing I might get caught up on is making it so that multiple compounded clouds could exist. Any advice on how I might go about doing that? Making state multidimensional array? And yeah, most of the time I have the feeling that there is a simpler route. – aceslowman Sep 14 '15 at 02:32

0 Answers0