🎃 Halloween Special 🎃
The Halloween season is my favorite time of year so I couldn't resist making the 8th CodePen Chicago meetup that was to take place in late October a Halloween-themed meetup.
On Wednesday, October 26th we gathered at the Backstop Solutions office space on the 39th floor of the Willis (formerly Sears) Tower in downtown Chicago. It was a cold and rainy night, and it was right in the middle of game two of the World Series, so it was kind of a big deal for all of the folks who made it out (thanks!). Once again, I was blown away at how awesome this community is to be around, and how impressive and creative everything they share is.
I challenged all to bring their spookiest pens to share, only expecting one or two people to share my holiday spirit, but man was I wrong. Everyone who shared had something spooky-themed, and there were some real doozies, as always.
Colt Borg was our gracious host at Backstop and kicked the evening off by sharing this event title screen with a killer animated spider that would crawl in and out of view — all done in CSS. Play around with the speed and check out the detail with even the tiny pincers animating! Also, a huge thanks to Colt for dressing up as the Green Arrow so I wasn't the only one who came in costume!
Steven has been coming to CodePen Chicago for a while now so it was really great to see him get up and share something with us all! He got the audio momentum going with this Shepard Tone Generator (forever-rising tone) he created with a canvas visualization — rad!
Matthew kept the spookiness rolling with this animated flying broomstick and resizable CSS pumpkin with some scary consequence (political commentary warning).
CodePen Chicago regular and former host Brian Montana shared a timely canvas rendition of "the upsidedown" from Stranger Things with eerie floating particles and a layered panning scene.
This was Kevin's first time at the meetup, and he really made a fantastic first impression by sharing this elaborate random Jack O' Lantern generator that you can save out as an image!
Andy presented at the very first CodePen Chicago meetup, but it's been a while since we've seen him present, so it was great to have him share this Halloween Photo Booth that utilizes a really neat animated masking technique and the user's webcam to capture a snapshot (in-progress).
Jake outdoes himself every time, I swear. What the hell is next?! This time Jake decided he wanted to try messing around with Firebase to do something that would allow everyone at the meetup to get involved by pulling the pen up on their own device. The result was a musical performance that had Jake at the control board, changing keys and manipulating the drum track, while everyone at the meetup had different tones emanating from their devices at different volumes (controlled by tilting their devices). The experience was incredible to say the least, and I tried to capture what happened on video to give a sense for how it all went down, but due to poor planning on my part I was left to the built-in mic on my camera which doesn't do a terrific job, but here it is anyway:
Jake followed up with a blog post breaking down how he achieved the effect if you're interested in digging into it: http://codepen.io/jakealbaugh/post/firebase-tone-js-and-device-orientation
Repeat-presenter Dan Cortes kept the audio experimentation going with this spooky-themed theremin that uses Tracking.js and Tone.js to track a cyan-colored-object with your webcam and manipulate the tone like you would with an actual theremin! He also shared this bonus spooky-themed pen that uses your microphone to move a skull's jaw as you talk!
Former host Coleman Collins spookified his [Movies Game] pen for this special occasion and demoed the addicting game that has you trying to use as few search keywords as possible to return the Wikipedia or IMDB page for a given movie — try it out!
Philip scared the crap out of all of us by sharing this seemingly innocent pen of a Pac Man animation (wait for it...and turn your volume down a bit!).
Photos From The Evening
See Ya Next Time!
A huge thanks to Backstop Solutions and Colt for offering up their awesome space, and to MediaTemple for generously providing the food and drinks for the evening!
If you want to hear about when the next meetup will be happening sign up to the mailing list at codepenchicago.com.
If you have ideas, questions, comments, or would like to host a future meetup, send me a message: email@example.com