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

Click canvas to reset.

I'm exploring Brownian Motion. Here I combined it with the concept of particle trails, as explained by David Shiffman on Coding Train. Instead of drawing dots on the trail, I draw lines from the current position to all the points in the trail.

I have a collection with Pens based on Brownian Motion.

My older Pens with particle trails:

Comments

  1. ⚡️

    What is this black magic? Love it!

    The dynamic lines adds so much personality to the behaviour. Mind blown.

    Reminds me of Soot from the Ghibli universe:

    these guys

  2. Thank you @nerdmanship ! However dead simple the code is, the animation turned out quite "alive". =)

  3. This is so cool. I'm so excited to do something similar. You guys are awesome.

  4. Thank you @banna00747 ! Random Walk is so much fun :)

    I wrote a blog post about it: https://codepen.io/DonKarlssonSan/post/random-walk

    Feel free to reach out if you need any help.

  5. After seeing your take on random walk i was so amazed that i searched the whole night about your blog if you had any to know further about it to understand it more in depth and didn't find anything except this coding, mostly heartbroken bcoz i'm not understanding few terms in the code but i know the basic & somewhat advance js stuff. But hey you just saved my enthusiasm to keep pushing. Thanks for your blog link and heads up for reaching out to you if i need help. I'm feeling grateful. Your stuff is top notch. :) I don't know about other but i'm a hobbyist digital painter so these stuff fascinates me more than anything. haha!

  6. @banna00747 I saw that you found Simple Brownian Motion, it's a good starting point. I was able to simplify it even more just now, there were a couple of unnecessary loops that I removed.

  7. That's so great of you.

  8. There is one thing i'm bit confused & stuck for while that when i try to run your code on my pc by setting up html+css+js file and linked them together yet i get nothing on the browser. why is that??? do your code need something else before running offline??

  9. @banna00747

    On CodePen, in the Editor View of the Pen, if you click the cog icon for the JavaScript you will notice that I have added a reference to p5.js, a graphics library that this Pen is using. My guess is that p5.js your missing piece.

    Try the Export button (lower right) and then choose Export .zip

    That way you can download everything and run it locally.

    Download the zip file, unzip it and look in index.html, there you will see three references to other files:

    • style.css
    • p5.min.js (the external library)
    • and index.js (the Pen)

    Hope it helps. =)

  10. Thank you so much. Yeah i can run it now on pc. From seeing on your description i've discovered The Coding Train & I'm enjoying it so far & practicing the stuff. I've also discovered Youtube coding math. Can you please suggest me anything else to understand more like these type of things???? any other good teachers out there to look for?? or blog? would be a great help.

  11. @banna00747

    Good!

    Here is a long list of Creative Coding resources, like blogs, youtube channels, tools and stuff: https://github.com/terkelg/awesome-creative-coding/blob/master/README.md

  12. Omg! that's just a goldmine of information. Thanks for the care. looking forward to see your stuff as well & blog. cheers! :) thanks for the help.

  13. You are welcome! :)

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

You must be logged in to comment.
Loading...
Loading...