Jump to content

  • Log In with Google      Sign In   
  • Create Account


Member Since 16 Feb 2008
Offline Last Active Private

Posts I've Made

In Topic: Draw only portions of the circle visible to the user

26 December 2015 - 11:21 PM

If your circles dont change significantly over time, and/or if you have many circles that look the same, draw the circle to an image and blit that to the screen, which should perform significantly better (you can update the image, even every frame if theres many circles sharing the same image and thus saving calculations).


I'm not sure if this is beneficial, given when zooming in and out because i would be basically drawing a huge circle to an image then drawing the image, i don't see how this will reduce processing time, as i am adding a step and still drawing the circle either way? Also, simply resizing the image will pixelate or make the perimeter line extremely thin when zoomed out far.

In Topic: Draw only portions of the circle visible to the user

23 December 2015 - 12:35 AM

Did you try just not drawing circles bigger than some X? While the image is obviously broken then, it should give you a big boost in performance if you are correct.

That is, you can do simple experiments to check your own conclusions, before going in and properly fix it.



So i decided to skip drawing circles above a certain size to test it, like you suggested, here is the results.


With the removal of large circles above x size:



Without removal of large circles:



Notice stroke() is painfully bad. Suggesting i need to skip drawing portions of circles not visible on screen to reduce the expensive process of stroke function.

This also tells me that if the circle is not visible on the screen, the browser still does a lot of processing for it, so it will probably be better to find a way to skip the function call entirely when the circle is not visible to the viewer's output with a simple math formula, assuming its simple and not going to be any more expensive. 

But a 600ms time for a single function is definitely too high.


I also added a basic JavaScript circle example to my original post.

In Topic: Draw only portions of the circle visible to the user

21 December 2015 - 11:11 PM

Be sure to profile where the time is being spent. Too often, people are "sure" that the problem is in a section of code and it turns out they're wrong.


Also, even if you can't figure out the math, you can try to draw partial circles just to see if it speeds things up. The arc function might turn out to be even slower than the circle function and if so, you'll need to think of a different way to solve it. One possibility is you could have a circle sprite, and draw it scaled appropriately. Again, this may or may not be faster. Time it! smile.png


Maybe you can limit the size of the circles. Why do you need such overly large circles? Maybe we can help come up with a better solution to your problem?


- Eck

 I don't think there is a circle function i believe arc is the one. 

I did do a cpu profile, and 80% of process goes to the "stroke" function which deals with giving the circle its perimeter line. The circles are large because it's a solar system i am trying to make, although not fully to scale, it is rather large none the less ;)

In Topic: Draw only portions of the circle visible to the user

21 December 2015 - 06:42 PM

@Crossbones, i am not 100% sure on how the JavaScript engine works. If i have a clip which is smaller than my circle, does the browser still process the entire circle or just whats relevant to the clip ? There is woeful documentation on techy stuff like that.

Also, i would still have to call the function to draw the circle which surely it would be more efficient if i skipped the call entirely, if for example the circle was bigger than the entire output and so you never saw the perimeter?

In Topic: Draw only portions of the circle visible to the user

21 December 2015 - 01:48 PM

I can draw sectors easily, it was the maths on determining if it should be skipped i was struggling with.