›

Avoid conflict between p5 sketch and css transition

LuluDLLLuluDLL
edited July 2016 in p5.js

Hi there,

I'm working on my portfolio where I'd like to use a moving background based on a classic flocking algorithm.

For my tests, I create 200 particules, and, because I draw a simple line when dots are close to each other, I'm not using any shape.

I have issues with the css animations, the sketch is most of the time smooth but when I trigger the css animation it's lagggy... (both)

Is there a way to avoid this behavior? Web workers maybe? Activate the GPU? I don't have a clue...

Thank you for your time :)

Tagged:

Answers

  • blindfishblindfish

    Can you post a link? Without seeing what kind of CSS transition you're applying, and to what, it's hard to determine if there's a solution. Note that CSS transitions don't come for free: they can also be processor intensive; so could compete with your sketch for resource... It certainly sounds like that's happening here.

    For some relevant info I'd recommend this article.

    Also see this post re: p5 performance

  • LuluDLLLuluDLL

    I did find your answer to the post re: p5 performance, but in my case it doesn't help (I read all the article about shapes don't worry :p)

    Let me a moment I will create a page with my animation!

  • LuluDLLLuluDLL

    Here is the page

    http://www.romainmascia.fr/app/views/test.html

  • blindfishblindfish

    I see no significant impact on framerate here as a result of the CSS transition; but the timeline does show a warning that may be worth investigating: forced reflow is a likely performance bottleneck (see also this.

    TBH I'd concentrate on optimising the sketch code. There are some obvious first steps:

    • assuming stroke colour and weight are constant apply these in setup
    • In Boid.cohesion() and Boid.link() it looks like createVector(0,0); is holding things up. You could try storing a single instance of a Vector object on the Boid for purposes of calculations and instead reset the value to 0,0 in each of these methods to see if that performs any better (NOTE: I haven't checked for possible interactions between these two methods!). That should hopefully move the delay to Boid instantiation rather than on these frequently repeated calculations.

    It's worth saying again that p5js is nowhere near as fast as Processing... You may need to reduce the number of particles etc. to get reasonable performance.

  • LuluDLLLuluDLL

    I will take a look at this, I tried processing.js too, but same problème, I just wanted to try and check performance with p5 :/

  • LuluDLLLuluDLL

    Tried everything, only solution left is a webworker but I don't have a clue about how to use it with p5.js or processing.js... after you're right it seems Boid.link() is asking a lot of ressources :/

Sign In or Register to comment.