Jump to content
Search Community

scale/ morph shape in constructor

morphmorph test
Moderator Tag

Recommended Posts

I'm trying to create an infinitely beating heart using p5js and gsap.

I used constructor to make a shape and timeline to animate its size, though it doesn't work.

How can I animate the variable inside the constructor? Or can I morph between 2 shape made with constructor?

 

Thanks in advance.

 

 

 

 

See the Pen jOyXdNd by morphmorph (@morphmorph) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @morphmorph

 

Sure, GSAP can animate literally any property of any object that JavaScript can touch. I'm not at all familiar with P5js, but I glanced at your code and there are quite a few problems I noticed:

  1. Wrong syntax:
    // BAD
    tl.to(this, 1, { r: {r2} });
    
    // GOOD
    tl.to(this, { r: r2, duration: 1 });

    Better yet, if you only have one tween there's no need to even put it into a timeline (although it's fine if you do). You could just gsap.to(...). 

  2. All the code that's creating the point coordinates is just in your constructor, and then you're animating a "this.r" property that has no connection with anything else thereafter. So GSAP animates it correctly, but you're not having your rendering code reflect any of those changes. You'd need to put the code in the show() method that taps into this.r. 
  3. It strikes me as very inefficient to make the heart appear to beat (scale up/down) by animating this.r and then re-calculate every single point over again - doesn't p5js have a way to just set/animate the scale or something? So you'd gsap.to(this, {scale: 1.5, yoyo: true, repeat: -1});

I hope that helps. 

 

If you need to morph shapes in the true sense (not just scaling up/down), you might want to check out MorphSVGPlugin

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...