This is a list of my favorite stuff I made on CodePen in 2016. Because looking back's what you do around new years eve and because I've heard that listing your achievements helps overcome Impostor Syndrome. Mostly for myself, read on if you want to.
Still there? Please be welcomed to some navel-gazing!
Advent of Code
I was a bit late to the Advent of Code 2015 party so 2016 began with lots of "Advent of Code"-Pens. It was such a fun and educative experience! Easy at first, getting tougher and tougher. Nerdy humor.
Here's a collection with all the ones I bothered to solve - I'm not a fan of the RPG style puzzles.
I used TDD in all of my solutions. It turns out that Jasmine is pretty easy to use on CodePen. Since then I've used Jasmine in three different projects in my day job.
Some of my favorites:
This year, Santa brought little Bobby Tables a set of wires and bitwise logic gates! Unfortunately, little Bobby is a little under the recommended age range, and he needs help assembling the circuit.
In my sollution I use ES6 classes and inheritance for the first time.
Day 18 - Like a GIF For Your Yard Animated christmas lights Game of Life style!
Which I later visualized because Game Of Life is much more interesting that way:
Since then, I've used Game of Life a couple of times as a group programming exercise in my day job. See "Ping Pong Programming" in the blog section below for more info.
I've found a lot of Game of Life Pens here on CodePen and put them in this collection.
Web Audio API
In February it was time for some Web Audio API. The best of them and my 2016 all time favorite is "The Checkbox Drum Machine ☑️☑️☑️☑️ ☑️☑️☑️☑️". It uses oscillators and random noise to generate drum sounds. No samples (recorded sound clips)!
This arpeggiator is pretty neat too.
I recreated a Charlie Deck gif I saw on Twitter. Scroll down to the blog post section if you would like to read about the math behind it. I call the pen "Triangle With a Twist".
Text Effect Animations
I had seen a lot of cool text effect animations lately that inspired me to try it myself. Here are two of them.
In April I started watching Keith Peter's excellent "Coding Math" Youtube videos. He puts out some very good tutorials! Well explained, well thought out, interesting topics. My favorite topic is Verlet Integration (ep 36-39). You can make a lot of fun stuff with that. Like "⚫️⛓️ Wrecking Ball ⛓️🔊" (enable sound):
Another example is stick figures with physics, "Ragdolls":
Phew! That was a lot of points and sticks, it took a while to get everything right, lots of experimenting.
I was pinged on Twitter, "hey, you might like this animation". I did like it and I remixed it: "Rotating Neon Curves"It's based on Bézier curves as you might guess.
I created surprisingly few fractals 2016, here's one though: a Clifford Attractor. It is a bit complicated to use but I added stuff to it as I needed them, everything is tweakable to be able to generate that perfect image. Two examples:
Here's my Flickr album with more images generated by this Pen: "Attractor"
"Rainbow 6-fold Pentille", note that it follows your mouse. Looks better in fullpage mode.
The year ended with 30 Pens contributed to #CodeVember. This was when I started to learn SCSS and used it to create pattern animations. I have created a collection with all 30. Some of my favorites, first three SCSS based:
"#codevember 18 Checkmate"
"#codevember 26 Bubbling Grid"
"#codevember 29 Flip It, Flip It"
And a canvas one: "#codevember 30 Cash Wave"
I created many 🌈rainbow colored things but for #CodeVember I went all #222 and beige, well mostly. It was pretty intense and I had to skip a few days here and there but then I did two the next day.
My intention was to continue straight to 25 days of Advent of Code hacking but I was exhausted after #CodeVember. I still have not begun as of January 1st, but I will do them later.
Instead I started to learn p5.js. I was inspired by the Daniel Shiffman's Youtube videos where he uses it in his Coding Challanges. I like how it removes all that boilerplate code for setting up the canvas and the RequestAnimationFrame. And that it provides lots of good helper functionality like vector math and perlin noise. I like p5.js a lot! I even created a PR for a small documentation fix (which is now merged - YAY!).
This one uses p5.js: "Hypnotizing Lissajous". I currently use it as my profile header background on CodePen.
In March I organized a "Happy Pi Day" CodePen Creative Challenge (CCC) together with Smokie Lee and Matei Copot. It was featured on the CodePen team blog. I put all the 17 contributions in this collection. Fun fun! And the awesome CodePen team gave us a Team account to ease the administration for us organizers. ❤️
I assisted Smokie Lee a bit when she ran the CCC: Easter/Spring 3/25/2016-4/1/2016
During the year I wrote these blog posts. Two of them not particularly tied to CodePen.
- The making of Triangle with a twist
- Happy Pi Day Challenge
- Using Google Sheets as a Backend
- Ping Pong Programming
- Setup Continuous Integration on Bitbucket with Pipelines
- Drum Loops and Effects with Web Audio API
I've learned a ton of things. Although it's not my main purpose of being on CodePen - it's to have fun. I learn things as a bonus. My main information sources/motivators have been Daniel Shiffman through Coding Rainbow, Keith Peters through Coding Math, Eric Wastl through Advent Of Code. And of course the CodePen community😁, it's amazing to be a part of. Thank you all! 👍❤️
Just by thinking through the last year (on CodePen) and writing this post makes it serve its purpose. If you read all the way to here - impressive.
The Future, 2017
In my crystal ball I see some TypeScript heading my way. That's definitely something I will look into. Maybe together with some Angular2. Doing some application thingy.
And I will continue to explore SCSS, for more artsy experimental animation stuff.
See you in 2017!