Updating a path's curve anchors and control points

[Sandro Miccoli]

Well, I'm not used to JavaScript (Processing pupil here) so maybe this is a stupid question, so I'll apologize in advance for any

I created a path with cubic beziers based on the example. Now I want to access those anchor and control points to change that shape dynamically... In this case when the user scrolls the screen.

The values of anchors change but the shape stays still....

--- debugging ---

OK, while I was writing I realized I didn't apply a fill do the shape. So I just added a fill at the end of the onscroll function and everything worked :)

So this is the working code:

window.onscroll = function() {
  if (typeof myPath != "undefined") { // workaround for this error when trying to access the object... don't know if there's an elegant way to do this...
    for (var i = 1; i < myPath.state.anchors.length; i++) { // 0 é "move"
      if (typeof myPath.state.anchors[i].vec2 != "undefined") { // same thing
        var v = new Rune.Vector(Rune.random(-50,50),Rune.random(-50,50));
        myPath.state.anchors[i].vec2.x += v.x;
        myPath.state.anchors[i].vec2.y += v.y;
      }
    }
  myPath.fill(255);
  }
};

But I'm still in doubt... Why is it necessary to have a fill? Don't know if this is a bug or I'm the one doing something wrong...

[Rune Skjoldborg Madsen]

Hi @SandroMiccoli. Thanks for the input!

The reason why the shape is not updating is because you're reaching into the internal state, but the object will not know that the state changed before you call the changed() function on the shape. So your code could look something like this:

window.onscroll = function() {
  if (myPath) {
    for (var i = 1; i < myPath.state.anchors.length; i++) { // 0 é "move"
      if (myPath.state.anchors[i].vec2) {
        var v = new Rune.Vector(Rune.random(-50,50),Rune.random(-50,50));
        myPath.state.anchors[i].vec2.x += v.x;
        myPath.state.anchors[i].vec2.y += v.y;
      }
    }
   myPath.changed();
  }
};

The reason why the .fill() function worked is that any of the shape functions will internally call changed().

Hope this helps.

[Sandro Miccoli]

Oh, great! Now it makes sense.

Thanks for the quick reply @runemadsen ;)