2018

Time again for another "My year on CodePen" blog post. I like to write them because it forces me to think through what I made and realize I have reasons to be proud. So it is mainly for myself but please read on.

I've made 59 public Pens during the year, here I've gathered my favorites. There are three distinct themes/topics: three.js, noise and Codevember.

To ease the burden on your computer I've made some of the heavy Pens to be displayed in preview which means you have to first click Run Pen to see it. You are welcome 😉.

CodePen Sparks 🌟

My blog post "My 2017 on CodePen" made it into CodePen Spark 58, JANUARY 8TH: The Practical, The Magical, and the Most Hearted

My Pen "Repellers" made it into CodePen Spark 61, JANUARY 29TH, Eases, Repellers, and Color

Meetups

Particles

I hosted Örebro CodePen Meetup no 3 when I talked about Particles (yay!).

three.js

I hosted Örebro CodePen Meetup no 4 when I talked about three.js.

Creative Coding

During the music festival Live at Heart there's a smaller, digital conference called Live at Heart Creative. "Live at Heart Creative is a hub for entrepreneurship and tech within the creative industries and a part of the Live at Heart Conference". I organized yet another CodePen meetup based on the theme creative coding.

Themes

three.js

I have been doing 2D canvas stuff on CodePen since March 15, 2015. I've seen lots of cool Pens made with three.js over the years, I've thought "maybe one day, I bet it is difficult". I came to a point where I decided that it was time to make the plunge. I love learning new things, but I dread the starting moment when I don't know what's up or down, the initial frustration. But by setting yourself up for success by having many small goals it gets easy. Make a cube spin (every three.js tutorial starts there it seems!).

Make several cubes spin.

Make several cubes change their height, in sync to create a circular wave shape.

Use noise to make a wave shapes with cubes.

I've done some bouncing animations in 2D in the past, for some reason I enjoy making them and looking at them and they're pretty easy to do, so I decided to make one in 3D. To prepare I first made one bare bones in 2D. Then I made a ping-pong ball simulation in 3D.

I use the web cam and three.js in "Pin Screen". A normal web cam can't detect depth so I am using the brightness to simulate depth: the brighter image that the camera detects, the brighter and longer box is drawn. I made Pixelator as a pre-study to get that blocky look and feel. If you look closely you will see that pixelate() and getAverage() are very similar in both Pens. This is my 2018 favourite Pen!

I've seen several of these spinning rainbow boxes before and wanted to try it myself.

Here's Ana Tudor's Möbius 6hedrons (pure CSS). Amazing!

To celebrate 800 CodePen followers I did "❤️ 800 Followers - a Cube of 800 Web Cam Cubes 📹". I use THREE.VideoTexture to stream video from the web cam onto the faces of the cubes.

After making a whole bunch of 3D Pens it struck me: hey, I know trigonometry and geometry in 2D, I just need to take another dimension into consideration. No big deal. =)

Noise

I love noise! And it just so happens that I am not alone... During Örebro CodePen Meetup no 3, Jonatan asked me if I could mentor him in creative coding for an evening, well Yes off course I can! We decided to work with noise. So we sat down a week later and I helped him get a grasp of simplex noise. Small steps, tight feedback loops is my mantra. So his first step was to create a basic static 1D simplex noise line, then a static monochrome noise image ... After that evening I got inspired to make a few new noise based Pens myself. First I made noise(noise(noise())).

Then I made Noisy Lines. It is somewhat inspired by Anders Hof in that there is a grid with similar patterns.

Then I made "Noisy Circles". I'm happy with the calcPoint() function that seamlessly wraps the noise around a circle.

This is "Make Your Own Noise Image". Using QuickSettings by Keith Peters.

This is "Dancing Noise".

Both Noise and three.js!

Time to apply some noise in 3D, Noisy Sphere. I generate a texture (2D image) with noise and apply some 2D to 3D conversion to get a nice looking bump map. Notice that the surface is flat, but looks bumpy due to the lightning effect applied through the bump map.

In "Infinite Terrain" I use noise to generate real 3D "bumps".

In "Noisy Cube" there are a lot of particles arranged in a cube with 4D noise applied to their position. 3 dimension for x, y and z, 4th dimension for animating it over time.

Web Expo

I attended the Web Expo conference in Prague and made some fan art of their logo. Here's two of them:

Try drag-dropping one of the vertices and see it wobble! This Pen uses spring physics: Hooke's law.

Codevember

I've participated before in Codevember and enjoyed it a lot so I decided to go for it again. This time I got nine days in and then life happened...❤️😘

These are my faves:

Infinity

Web

Green (a green screen). Try putting a green blanket behind you, or just find a green object and hold it to the camera. Notice that you can change the background image.

I made one CodePen project for Codevember: codevember - 5 - Music. I had already made an implementation of a ADSR envelope, and I built a check box drum sequencer back in 2016 in Angular that I could borrow a lot of stuff from. So this is re-using some old code and creating something new with it: a synth sequencer. It is made with Vue.js and Web Audio API. The knobs are Copyright (c) 2018 by Kyle Shanks, his Pen.

Try it, it's fun!

Misc, no special theme

One of the 2018 Pens I like the most: "Repellers". It uses physics principles, gravity is a force proportional to the distance between two bodies, the closer they are the stronger force pulls them together. Instead of the bodies gravitating towards eachother I made them repell eachother. If you look at the code you will see that I use my vector library to do the math.

I was so happy when Repellers ended up on 79:th place on The Most Hearted of 2018. I've been wanting to make it to the list since I first saw it in 2015, this year I did! 😁

Mentions

I saw three of my Pens in a list called Awesome Demos from 2018 | Codrops. The bare title makes me proud, but seeing all the other amazing demos makes me think somebody made a mistake and put my stuff on that list.

Thank you! ❤️

Thank you to the CodePen community for the inspiration and encouragement! ❤️

Thank you to Klara Miffili and Fredrika Norman for proofreading! ❤️