0

Hello I am using liquidfun.js to simulate a particle system. I am drawing the system using an html5 canvas. The simulation becomes laggy well below the 34k particles that the google engineers say that they get. Mines becomes a slideshow at around 4k.

Currently I draw the particles using 

context.arc((particles[k] * mToPx) + offsetX, (particles[k+1] * mToPx) + offsetY, 9.5 , 0, 2*Math.PI );

for every particle in the system.

Would something like 

context.drawImage(img,(particles[k] * mToPx) + offsetX, (particles[k+1] * mToPx));

be more efficient?

Is there a way to measure efficiency besides adding particles and looking for lag?

xerotolerant
  • 1,955
  • 4
  • 21
  • 39
  • 1
    chrome profiling is a great way to test functions time use – juvian Jan 25 '16 at 20:40
  • Ah, I used it before. I'll try it again and see. Forgot about that. I stopped using chrome for this project since firefox seems to be a lot more efficient at drawing the particles than chrome. – xerotolerant Jan 25 '16 at 20:42
  • `drawImage` is more efficient than `arc` because drawImage just copies pixel data from source to destination (it's verrry fast) while arc must actually calculate the positions of the pixels before drawing them. – markE Jan 25 '16 at 20:42
  • I figured as much but I wanted a little confirmation before I actually tested it myself. The project is close to complete so I'm trying to avoid wasting time. – xerotolerant Jan 25 '16 at 20:44
  • webgl would work much faster as well. And you can also try adding the other optional parameters to drawImage – juvian Jan 25 '16 at 20:58
  • I am interested in what you say about using webGL. From what I've been reading a canvas is a webGL element. What are you recommending? – xerotolerant Jan 26 '16 at 18:38

0 Answers0