Jump to content
Search Community

Objects, coordinates and paths

denken 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

Hi, guys!

First of all: thank you for your products! It's awesome!

 

What is the right way to deal with my idea:

I have a VUE project with some components (10-100); parent component is an SVG and child components are circles;

<circle :id="name" :fill=color :stroke=stroke stroke-width=3 r=5 :cx="x" :cy="y">

every 1 second each circle get new random coordinates:  [ {x: 0, y: 0}, {x: 1, y: -1}, {x: -2, y: 25}, ... ] (usually [].length === 10) and I want to animate it along the path, but the path of a circle should appear after it, like a tail.

1) How can I do that?

2) Now I animate every circle like that:

newData.forEach(elem => {
  TweenMax.to(this.$data, 2, { x: elem.x, y: elem.y });            
});

But, it moving with breaks: at the beginning of motion there is one speed and at the and it slowing down: end of coordinates array is reached and the circle wait new coordinates. Increasing the time of animation did not help.

 

Any ideas?

Link to comment
Share on other sites

  • 2 weeks later...

Hi!

I came back to my project. This is my demo:

See the Pen VVRBaO?editors=0010 by anon (@anon) on CodePen

Pauses in motion between points are not so important in this demo.

1) I think my solution looks a bit unwieldy, perhaps there is an elegant way to solve it and I`ll be glad for any hint!

2) Circles moves a little faster then paths, may be I missed something?

3) And finally, after a while the browser begins to slow down due to the number of paths....

 

Link to comment
Share on other sites

4 hours ago, denken said:

3) And finally, after a while the browser begins to slow down due to the number of paths.... 

 

What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser.

 

It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.

  • Like 4
Link to comment
Share on other sites

On 12/3/2018 at 3:44 PM, PointC said:

youmightnotneedsvg.com

 

I would love to do that. First lesson. SVG is not magic. Under the hood, the browser renders SVGs using canvas drawing commands. ?

 

Viewing the Layers panel in Chrome's dev tools. It's not same as HTML5 canvas, but the API is really close.

 

stiuWyz.png

 

  • Like 5
Link to comment
Share on other sites

Hi @denken

 

Your lines are jagged because you're drawing over the same parts. You need to change the moveTo coordinates after each update. 

 

You should also be careful when using setTimeout/setInterval with animations. Those functions will continue to fire if the user changes tabs, and can mess your animations up if left running.

 

You can use TweenLite.delayedCall() or a repeating tween instead.

 

// like setInterval
TweenMax.to({}, 1, {
  repeat: -1,
  onRepeat: myCallback
});

// like setTimeout
const timer = TweenLite.delayedCall(1, myCallback);

// you can restart it if you want
timer.restart(true);

 

  • Like 5
Link to comment
Share on other sites

@OSUblake THANK YOU for wasting your time with the new age stuff! It is a miracle like everything else you do with tweens!

Tell me please, if it is not a secret, what should I learn, what books I have to read, what road I have to followed to become a magician like you?

  • Like 1
Link to comment
Share on other sites

15 hours ago, denken said:

@OSUblake THANK YOU for wasting your time with the new age stuff! It is a miracle like everything else you do with tweens!

Tell me please, if it is not a secret, what should I learn, what books I have to read, what road I have to followed to become a magician like you?

 

Thanks ?

 

I started out learning how to make games instead of websites, and I think that has helped the most. Game development takes user interaction, animation, and performance to a whole other level. 

 

I've learned a lot from Keith Peters with his Coding Math videos and HTML5 Animation with JavaScript book.

https://www.youtube.com/user/codingmath

http://lamberta.github.io/html5-animation/

 

And from Daniel Shiffman with his Coding Train videos and Nature of Code book. The Nature of Code uses the Processing language, but it's pretty easy to understand and convert to JavaScript.

https://thecodingtrain.com/

https://www.youtube.com/user/shiffman

https://natureofcode.com/

 

I would also recommend making a bunch of pointless things. It might like sound like a waste of time, but that's where most of my skills come from.

 

I really like the point Steve Gardner makes in this video about making pointless things. If his mission was to create pop.svg before he made all the pointless things, he couldn't do it. It's the journey of making pointless things that got him to pop.svg.

 


 

That got me thinking about all the pointless things I've made on CodePen. I've never checked before, but I sure do have a lot.

 

private-pens.png

 

 

I couldn't find a way to get the number of pens I've made, but 116 is the last page, and there are 25 pens on every page, so around 2900 pens. If I only had 50 pens, I would probably be pretty lame, worrying about stupid stuff like "which framework should I use, and does it have hooks?"

 

So that's the journey of what got me to where I'm at, making games and pointless things.

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hi! I Need one more hint, please: coordinates of the balls are not limited by borders of the canvas, but canvas has constant width and height. So, I need to pan&zoom my canvas. I mean the context of the canvas. It should be like a viewbox of <SVG>.

I have read a lot of topics and have seen a lot of pens, but don`t decided yet what is the right way?

Is it a good idea to use the GSAP draggable plugin for panning inside canvas and PIXI for smooth scaling? Or choose something else?

Link to comment
Share on other sites

On 12/13/2018 at 10:45 AM, denken said:

Hi! I Need one more hint, please: coordinates of the balls are not limited by borders of the canvas, but canvas has constant width and height. 

 

You can draw stuff beyond the canvas width and height. To pan and zoom, you would transform the canvas context. 

 

See the Pen WzbKLQ by osublake (@osublake) on CodePen

 

 

 

See the Pen 1dc6f488ca5ad76192e7d667bc9214fc by osublake (@osublake) on CodePen

 

 

That requires you to clear out what's currently drawn on the canvas, so none of the demos in this thread will work particularly well because they aren't saving the previously drawn lines as path data.

 

 

 

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

Hi, everyone!

Well, I decided not to give up!  I changed @OSUblake  solution:

See the Pen qLBdLE by osublake (@osublake) on CodePen

Add PIXI and tune pan&zoom. Here is the result: 

See the Pen dwKqxe?editors=0010 by anon (@anon) on CodePen

 

Problem: stage.children increases by one for every second.

PIXI docs suggested replace graphics with sprites, but there is something wrong with zooming.

if (changeCoords) {
  //let clone = tails.clone();
  //clone.zIndex = 2;
  //stage.addChild(clone);
  
  let texture = renderer.generateTexture(tails, PIXI.SCALE_MODES.LINEAR, resolution);
  let sprite = new PIXI.Sprite(texture);
  stage.addChild(sprite);
 }

 

I tried to use generateTexture, but lose pan&zoom:

if (changeCoords) {
    heads.clear();

    let texture = renderer.generateTexture(stage, resolution);
    let sprite = new PIXI.Sprite(texture);
   
    stage.removeChildren();
    stage.addChild(sprite);
    stage.addChild(heads);
    stage.addChild(tails);
  }

 

I will appreciate any help in my quest!

Link to comment
Share on other sites

I don't know. Have you tried using a RenderTexture? That might give you a bigger object to pan around. Zooming might not look good because a texture is a bitmap, so it will get pixelated if you scale/zoom in.

 

http://pixijs.download/release/docs/PIXI.RenderTexture.html

https://pixijs.io/examples/#/basics/render-texture.js

https://pixijs.io/examples/#/demos/render-texture-demo.js

 

 

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