css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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!

  11. @darrylhuffman I am having issues with this rendering on Iphone X? I made a fork below and haven't been able to solve it. Any tips? https://codepen.io/stevenanthonyrevo/pen/ervaQR

  12. @stevenanthonyrevo sorry for the late reply - have you been able to resolve your issue? It may be the way I'm creating the canvas and applying the shaders. It might be a good idea to recreate this using THREE.js to ensure it works accross browsers.

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

You must be logged in to comment.