denken

Hi, everyone! Well, I decided not to give up! I changed @OSUblake solution: Add PIXI and tune pan&zoom. Here is the result: 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!

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?

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

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

Hi! My canvas-based solution: https://codepen.io/anon/pen/VqZoRN?editors=0010 Improvements are welcome! ? What is the best way to draw smooth lines on canvas in my situation?

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!

Hi! I came back to my project. This is my demo: https://codepen.io/anon/pen/VVRBaO?editors=0010 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....

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?