draw blockchain with css and svg

Question

I created this:

and when the mouse enter the blockchain area , the area repulse a little.
My problem is that I used setinterval for repulsing that draw svg frequently on new changed position circles therefore we see lag in the browser.
Any idea to make it smoother?

setInterval(function () {
  $('.btn,.a,.a1').each(function(index, el){
      el = $(el);
      position = el.position();
      x0 = position.left;
      y0 = position.top;
      x1 = mouse.x;
      y1 = mouse.y;
      distancex = x1-x0;
      distancey = y1-y0;
      distance = Math.sqrt((distancex * distancex) + (distancey * distancey));
      powerx = x0 - (distancex / distance) * magnet / distance;
      powery = y0 - (distancey / distance) * magnet / distance;
      forcex = (forcex + (el.data('homex') - x0) / 2) / 2.1;
      forcey = (forcey + (el.data('homey') - y0) / 2) / 2.1;
      el.css('left', powerx + forcex);
      el.css('top',  powery + forcey);
      $('svg').remove();
      var elem = document.getElementById('pp');
var params = { width: 350, height: 300 };
var two = new Two(params).appendTo(elem);
var vertices = [];

for(var i=1;i<=10;i++){
    var r=getcenter("#azcir"+i);
    vertices.push(new Two.Anchor(r[0], r[1]));
}
var r=getcenter("#azcir1");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir25");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir14");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir24");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir28");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir17");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir6");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir16");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir15");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir18");
vertices.push(new Two.Anchor(r[0],r[1]));
var r=getcenter("#azcir22");
vertices.push(new Two.Anchor(r[0],r[1]));
.
.
.
var poly = two.makePath(vertices, false, false);

poly.stroke = 'white';
poly.noFill();

two.update();
  });
}, 1000/60);

Dots in code is near 30 other paths that i omitted for this ticket.

My problem not completly rely on image, that just for show you what i did — Abolfazl Mohajeri, Jul 26 '18 at 15:17
but don't you think we nee to see what you did with your real code in order to help you? — Temani Afif, Jul 26 '18 at 15:18
i just change position of circles a little rely on mouse position (repulse) and every 1ms draw svg for their connected paths and this caused a lot of lag i'm looking for a good way — Abolfazl Mohajeri, Jul 26 '18 at 15:29
Your code is very poorly optimized. Avoid DOM manipulations like `$('svg').remove();` and `var two = new Two(params).appendTo(elem);`. Can't those be done outside the `setInterval` and then just referenced and updated rather than nuked and recreated? Even still this code is hard to optimize without a working example. `$('.btn,.a,.a1')` searches the DOM every tick. You should be stuffing that into a variable (e.g. `let $items = $('.btn,.a,.a1')`) and then referencing the variable: `$items.each(...`, but even then you need to move more logic out of your interval tick. — Joseph Marikle, Jul 26 '18 at 15:55
@JosephMarikle thanks, you are right i set variable for items but for other things you said i cant do because paths will be overlap for example when i dont remove svg — Abolfazl Mohajeri, Jul 26 '18 at 16:12
@AbolfazlMohajeri That's probably where a lot of the inefficiency is at though. I get that there would be duplication if you constantly ran the `vertices.push` parts in the animation tick, but you can probably instead run that once and then update your vertices rather than recreate them. You would need to move your vertices array out of `setInterval` and loop over them rather than push them to an array and create the SVG from scratch. The beauty of SVGs is that it's a markup language and can be live updated. However, without a working demo I can't know how exactly this would be done. — Joseph Marikle, Jul 26 '18 at 17:21
Please read [How do I ask a question that is answerable?](http://stackoverflow.com/help/how-to-ask) before attempting to ask more questions so you will be better prepared and able to ask a question that will be well received and more importantly **answerable**. — , Aug 20 '18 at 15:01
[When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. Click this comment to find out how to provide what we need to help you.](https://stackoverflow.com/help/mcve) — , Aug 20 '18 at 15:01

score 0 · Accepted Answer · answered Jul 26 '18 at 15:21

0

I would recommend switching to window.requestAnimationFrame():

This related answer seems to have some helpful information: Why is requestAnimationFrame better than setInterval or setTimeout

answered Jul 26 '18 at 15:21

Joseph Marikle

76,418
17
112
129

Thanks for your answer but i tried this and not improved lag. – Abolfazl Mohajeri Jul 26 '18 at 15:27
@AbolfazlMohajeri Even if this doesn't fully solve the issue, I still recommend using it in your optimization efforts. Optimizing animations is a fairly large task and will take a lot of effort. Unfortunately given how little information you've provided in your question, it's not likely we're going to be able to help. If you provide more of your code, we might be able to help you optimize your animation, but without that, the best we can do is provide general suggestions like the one above. Would you be able to make a demo of your code in a stack snippet (the `<>` icon in the editor)? – Joseph Marikle Jul 26 '18 at 15:40
Please check it – Abolfazl Mohajeri Jul 26 '18 at 15:44

draw blockchain with css and svg

1 Answers1