Jump to content
Search Community

How to scale particles from center using html canvas

Parrot Puppet test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Currently faced with a problem of not being able to find the center of the particles, when I scale I am not sure where the ctx.translate point is.

In the function "pixelOverlay.prototype.draw" this is where the ctx.translate registration point is set but as I animate all the particles come from the far right when I am hoping to scale from the center and still animate x/y value.

 

Thank for your time!!

 

See the Pen xoejPR by John_Joe_Parrott (@John_Joe_Parrott) on CodePen

Link to comment
Share on other sites

See the STARS acronym here.

 

 

 

Your order is wrong, and you should use translate instead of drawing something at an xy coord.  

 

var originX = this.width / 2;
var originY = this.height / 2;

creative.ctx.save();
creative.ctx.translate(this.x + originX, this.y + originY);
creative.ctx.scale(this.scaleX, this.scaleY);
creative.ctx.translate(-originX, -originY);
creative.ctx.fillStyle = this.fill;
creative.ctx.fillRect(0, 0, this.width, this.height);
creative.ctx.restore();

 

 

 

And more particle stuff.

 

 

  • Like 5
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...