Jump to content
denken

Objects, coordinates and paths

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?

Share this post


Link to post
Share on other sites

Could you possibly put together a simple demo for us?

Thanks.

  • Like 2

Share this post


Link to post
Share on other sites

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....

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I'm wondering if @OSUblake or @Sahil will be the first to launch: youmightnotneedsvg.com. 

 

Or maybe it'll be a joint effort: blakeandsahilsayyouwillgetbetterperformancefromcanvas.com

  • Haha 4

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

This uses 3 different canvases. The top canvas is for the circles. The middle canvas if where you draw the lines. When the coordinates change, the middle canvas is drawn on the bottom canvas before being cleared.

 

 

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

 

 

  • Like 6

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.