[Objects, coordinates and paths]

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!

[Objects, coordinates and paths]

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?

[Objects, coordinates and paths]

@OSUblake Thank you! Your answer is very important for me!

[Objects, coordinates and paths]

@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?

[Objects, coordinates and paths]

Hi!

 

My canvas-based solution: 

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

Improvements are welcome! ?

 

What is the best way to draw smooth lines on canvas in my situation? 

[Objects, coordinates and paths]

Hello, Sahil!

Slow browser is bothering me! Thank you! 

I know this solution, recently I read this tutorial: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/ but I was afraid that this way will lead me to pan and zoom with rough edges. Ok, I will try it!

[Objects, coordinates and paths]

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

 

[Objects, coordinates and paths]

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?