Newsletter #39 - Generative CodePens, 3D Particle Effects, and GUIs!
Howdy partner! It's time to round up some great CodePens, hit the trail to find an article, and mosey over to a resource or two. We've got a lot of generative pens today, so choose your horse at random.
If you like this newsletter I'd love it if you tweeted about it or shared it with a pal. 💜
I'm digging this animated DNA strand, made with SVG and GSAP. Each section is made of two circles and just one line that has a
stroke-dasharray to create the gap in the center.
George is using his 'packing' technique to make sure every creature has its own space on the screen. With a click they'll move around and find a new spot.
If these little characters were in a video game I'm pretty sure I'd be hooked on it.
A lovely tribute to the cover of Joy Division's classic album art for Unknown Pleasures. Looks like a pixel-perfect recreation, but refresh the page and it'll generate a new version!
My favorite part of this is how the elements animate into the scene. The line drawing is such a nice touch, and I love the idea of adding a paper feel to the vaporwave aesthetic.
This article by our friend Varun Vachhar shows three different ways to make particle effects. Each effect has an interactive demo with sliders and checkboxes so you can get a sense of what's affecting the result.
Varun has one of my favorite blogs, so once you're done with this article, poke around to the others.
Value Editing GUIs
If you've ever found yourself tweaking a few numbers over and over again, trying to get a certain design just right, these tools should help!
Each one is a GUI that allows for easy manipulating of values. They each come with types like booleans, colors, ranges, text fields, etc.
Dat.GUI is the classic, and probably the one you've seen used in CodePens to let you experiment.
I love any resource that makes accessibility guidelines easier to understand or implement. This takes the technical and detailed Web Content Accessibility Guidelines and translates them to short, plain English.
What I've Been Up To
It's been a while since I've made a CodePen just for the heck of it. I brushed off some of what George Francis taught us on stream and started making some generative grids. I'm pretty happy with how it turned out.
I hope to put out a little article detailing some of what I learned, but you can check it out here in the meantime:
Using SVG.js, George's utility library, and ColorLovers palettes.
Some personal news: I got a promotion! I'm now Developer Experience Lead at Prismic, and get to lead a fantastic group of folks. It's pretty exciting and I hope to get the hang of it soon.
So Long, Partner
Thanks for riding with us for another week! As always you can reply to this email to say howdy, or mention what parts you enjoyed and want to see more of.
We'd also love to see you in our super-friendly Discord community.