Having a Big problem for scaling randomly generated circle using canvas and tweenmax

[rk25028 0 Likes (Newbie)]

i want to make a animation where circle is created randomly using canvas and i want scale all the circle at the same time with their origigin X and Y.

please help me solve this issue .

i have generated the circle but they were not scaling when i scale property it scale the  whole circle as a single object.

please help me

thank you.

 

 

here is a codepan link  

 

please solve this i want every circle should scale.

See the Pen QNObbd by rk25028 (@rk25028) on CodePen

[Oscar Rottink 14 Likes (Newbie)]

Think it's easier to help if you create a codepen example: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[rk25028 0 Likes (Newbie)]

Think it's easier to help if you create a codepen example: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

See the Pen QNObbd by rk25028 (@rk25028) on CodePen

 

check this

[Oscar Rottink 14 Likes (Newbie)]

You now scale the entire canvas with your tween. So what you see makes sense. I don't have much experience with canvas but if all circle elements have the same class like '.randCircle' than that's the thing you have to tween. It then will scale all items with that class.

 

Sitting in a bus right now and not sure if it works that way also in a canvas but you have to think in that direction I think.

[Rodrigo 2,662 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

As OzBoz mentions what you're seeing now is expected behaviour.

 

If want to animate each circle, then things get a bit more complicated, but it shouldn't bee too much though. The good thing is that you have all your circles in an array (randomCircles), so you can access them there and animate their scale.

 

Unfortunately I'm far from being a canvas expert, but you could use one of the canvas plugins GSAP has to offer or use Pixi in order to animate the element's scale (I've seen many cool things done with GSAP and Pixi so it should work).

 

EaslJS plugin

http://greensock.com/docs/#/HTML5/Plugins/EaselPlugin/

 

Kinetic Plugin

http://greensock.com/docs/#/HTML5/Plugins/KineticPlugin/

 

PixiJS

http://www.pixijs.com/

[OSUblake 9,990 Likes (Superhero)]

Just what  said. You're scaling the canvas element when you should be scaling the canvas context.

ctx.save();
ctx.scale(scale.x, scale.y);
// Draw some stuff...
ctx.restore();

I don't have a good a example of canvas scaling to show you. How about a circle that gets bigger?

See the Pen eNrQqV?editors=0010 by osublake (@osublake) on CodePen

 

Working with the canvas can be complicated. I'd take Rodrigo's advice and use a library. I like using PIXI, which will let you scale as many circles as you want.

See the Pen vNwRdO?editors=0010 by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

Blake,

 

I absolutely love the "grow the circle from where you clicked" demo. First time seeing bind() used like that in a callback. 

Learn something new every day.

 

Thanks!

[rk25028 0 Likes (Newbie)]

You now scale the entire canvas with your tween. So what you see makes sense. I don't have much experience with canvas but if all circle elements have the same class like '.randCircle' than that's the thing you have to tween. It then will scale all items with that class.

 

Sitting in a bus right now and not sure if it works that way also in a canvas but you have to think in that direction I think.

 

 

i done with this process to create same class for all element. i have to do with only with  canvas.

[Dipscom 2,815 Likes (Superhero)]

I shall echo what everybody else has said - what you have at the moment is expected behaviour. 

 

However, I wouldn't say Canvas is any more complicated than what some people are doing here. It just has a few different concepts to grasp.

 

The main point is that everything inside the <canvas> is a drawn bitmap. If you are going to animate, you need to move everything to its position and draw again for every frame of the animation.

 

Coincidentally I was doing some tests yesterday following this tutorial, made some minor changes to work with GreenSock's 'tick' but it is still pretty much copy and paste someone else's code.

 

See the Pen pydqOy by dipscom (@dipscom) on CodePen

 

Here are two eBooks you can read to get deep knowledge of <canvas>. It will probably be far too technical for what you are after at the moment but useful in the long run.

 

http://joshondesign.com/p/books/canvasdeepdive/title.html

http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html

[OSUblake 9,990 Likes (Superhero)]

Nice demo! And good point about canvas being a bitmap. That's why you can right-click and save it as an image. So all rk25028's demo is doing is scaling an image.