cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Hey guys! So I really love this effect, and I really wish I could get it running smoothly in fullscreen! Any ideas on how to fix it up so it works are really appreciated.

Also, I really like the number 8, and it works as a really cool seed for this Perlin noise. But if you'd rather see this with a random seed each time, comment out line 42 and uncomment out 43.


  1. Just wonderful ... 😍

  2. This looks super good! The colors really make it!

    I've explored canvas performance also, and there are 2 changes I can think of that might help.

    • use drawImage instead of putImageData, and provide every argument
    • your source and destination images should be squares and the same size. This can eat up memory but using drawImage when they're different sizes really kills performance, even if you're only copying over a tiny portion

    EDIT: my advice is all rubbish, in my fork it only slowed things down to a crawl. This code is much better than anything I could ever manage and I'm excited to see how it could possibly be topped

  3. so smooth, very nice work

  4. Thanks everyone for your feedback! @clindsey, I've never used drawImage instead of putImageData, I'll have to look into that. But isn't that for if you have an image element and you want to put it on a canvas? I can't find much on per-pixel manipulation for it. Thanks again!

  5. @darrylhuffman Yes, I think you're right, drawImage doesn't seem to be great for pixel manipulation. Most of my experiments have been with generating spritesheet images and cutting out square slices.

  6. @osublake I just updated it and am now using it - hopefully it's implemented properly. It looks like it gave me a little bit of a performance boost, but it's still pretty slow on my work PC. Thanks for all the help! @clindsey ah that must be it, thanks though!

  7. @darrylhuffman @clindsey I tried running it at 30fps, and cached some objects, but it's still pretty slow at full screen. Meh...


    Maybe scaling it a little might help.

  8. @darrylhuffman I love this animation! I optimized the code a little and scaled it - https://codepen.io/nickgzzjr/pen/dNZVZz You can play with res(resolution) to see how it performs. I also created a playground to try out different code and see the fps/performance ms - https://codepen.io/nickgzzjr/pen/KaXGNO (Note some controls only work in certain modes)

  9. @darrylhuffman here's my latest attempt, this time using webgl shaders, and the performance seems to be alright at large screen sizes


    i made it while reading this https://thebookofshaders.com/11/

  10. Dang, I've just been reading that article for a few minutes now and all I want to do is start coding! haha! Awesome!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.