My 2019 on CodePen

Intro

I've made just over 70 public Pens and 37 private Pens in 2019. As usual (2018, 2017, 2016) I've made a list of my own favorites of the year.

Themes

As I've said before I love to pick a theme and stick to it for a while and make different variations, to explore it and see where it will take me. First theme is hearts.

Hearts

Once again I got inspiration from the awesome Daniel Shiffman and his Youtube channel Coding Train. In episode Coding Challenge #134: Heart Curve he made a heart shape with a math equation.

First I made the Pen "Love". Several heart curves distorted by Simplex Noise. Trailing motion effect by clearing the canvas with a semi transparent color.

"Noisy Heart Particles", particles traveling along the heart curve and also influenced by Simplex Noise. Trailing motion effect by clearing the canvas with a semi transparent color.

"Fredrika ❤️", the code is almost identical to the previous one with a few minor tweaks to some noise parameters.

"Fredrika ❤️❤️", line segments drawn across the screen from left to right, if a line segment is above the heart, the y position is controlled by Simplex Noise. Some say it reminds them of Joy Division's Unknown Pleasures.

"Fredrika ❤️❤️❤️", particles moving around in random directions, bouncing back if they are about to go outside of the heart shape.

"Heart Lines"

"Fredrika ❤️❤️❤️❤️❤️ - Flowfield Heart". In 2017 I wrote a blog post that explains what a flow field is and what you can do with it.

I keep all my heart Pens in the collection Hearts 💙💚💛💜🧡❤️🖤.

Delaunay Triangulation

I've been wanting to look into Delaunay trianglulation for a while. I love the patterns that you can make. I started reading about it on Wikipedia and found the Bowyer–Watson algorithm with pseudo code that I started implementing in JavaScript. But first i needed to figure out how to calculate a triangle's circumscribed circle, so I made this pen, click Rerun to get a random triangle. Notice how the circle touches all three points in the triangle.

"Circumscribed Circle"

Then I could continue on the algorithm and a few days later I got it working.

"Delaunay Triangulation with Bowyer-Watson"

Naturally I continued exploring Delaunay triangulation, this is a colored one, click to generate a new pattern.

"Delaunay"

"Springy Delaunay". Move the mouse to start the animation. The springyness is achieved with Hooke's law

"Delaunay Love"

When I went to IKEA one day I saw some triangle art on a poster which got me thinking about printing my triangles and putting them up on the wall.

First I made my own interpretation of the pattern: "Delaunay Stripes"

SVG

I started out with some "Simple Shapes"

These "Noisy SVG Lines" would look nice on my wall. Click to generate a new pattern.

"Spinning SVG Circles" uses the stroke-dasharray property which is fed with a list of random length with random values to create the pattern. CSS @keyframes animation is used to rotate the circles in different directions.

"Delaunay SVG". Click to generate a new pattern. Press d to download SVG file. (This is an SVG version of "Delaunay Triangulation with Bowyer-Watson" that you saw above.)

"Delaunay Stripes SVG", this is what I aimed for when I started my SVG exploration. I like how it turned out. Click to generate a new pattern. (This is an SVG version of "Delaunay Stripes" that you saw above.)

No need to stop experimenting with SVG, here's some more.

By changing the indexing of the line drawing code in two places I got the following pattern instead.

"Delaunay Grid SVG"

I was surprised to see that such a small code change resulted in such a big change in the appearance. This is the original stripe pattern:

  for(let i = 0; i < nrOfPoints; i++) {
  let line = document.createElementNS(svgNs, "line");
  line.setAttribute("x1", points1[i].x);
  line.setAttribute("y1", points1[i].y);
  line.setAttribute("x2", points2[i].x);
  line.setAttribute("y2", points2[i].y);
  groupElement.appendChild(line);
}

Can you spot it?! This is the grid pattern:

  for(let i = 0; i < nrOfPoints; i++) {
  let line = document.createElementNS(svgNs, "line");
  line.setAttribute("x1", points1[nrOfPoints-i-1].x);
  line.setAttribute("y1", points1[nrOfPoints-i-1].y);
  line.setAttribute("x2", points2[i].x);
  line.setAttribute("y2", points2[i].y);
  groupElement.appendChild(line);
}

"Sectors SVG"

"Sector Strokes SVG"

#10print

Once again I was inspired by Daniel Shiffman and his awesome Youtube channel Coding Train, this time it was Coding Challenge #76: 10PRINT in p5.js.

10PRINT is an old and easy way to generate a randomized maze like pattern. It randomly picks either forward slash or back slash and prints it to screen. This is the one-line Commodore 64 BASIC program:

  10 PRINT CHR$(205.5+RND(1)); : GOTO 10

Which looks like this when run:

On a modern computer with a bash terminal you can achieve the same thing with (Ctrl+C to exit):

  yes 'c=(╱ ╲);printf ${c[RANDOM%2]}'|bash

I started with making the original random pattern in SVG. Click to generate a new pattern.

"10 PRINT SVG"

Then I followed a path of questions that I often ask myself when I explore a new creative coding concept.

What happens if the pattern is controlled by simplex noise instead of randomness? Line thickness, line spacing and noise zoom level are all randomized. Click to generate a new pattern.

"10 PRINT with simplex noise".

Can I get it to make a pattern based on letters? -Yes!

"10 PRINT TEXT SVG"

Can I get it to make a pattern based on an image? -Yes!

"10 print CodePen Logo SVG"

As we move on here we get further and further from the original concept, let's just say that the rest are 10 print inspired. Instead of having two possible building blocks this one has four:

"10 Print Circle Sectors SVG"

This one also has four, but just the arcs.

"10 Print Arcs SVG"

This one is built of colored circle sectors. Random base hue, random size, random rotation.

"10 Print Waves SVG"

Misc

During 2019 I continued to experiment with three.js. This is "Sphere of Boxes". The color changing and the box rotation is controlled by simplex noise. The glimmering is created by a THREE.PointLight that moves inside the sphere and boxes made of semi transparent THREE.MeshPhongMaterial so that the light shines through.

"Simplex Noise Particles"

"Stacks of Squares - Interactive", move the mouse!

"Right Angles"

"Hexagons", move the mouse! I was fooling around with hexagons and decided to draw a path pattern. I tried to figure out every possible hexagon pattern with pen and paper. @yukulele pointed out in the comments that I missed one, so I added it. Thanks!

dave (@beesandbombs) on twitter makes wonderful gif pattern animations, follow him if you don't already, here I tried to remake one of his animations with CSS: "🐝💣 Remake with SCSS". Original

"Square Swirls" made with <canvas>

"Square Swirl SCSS" made with, you guessed it!, SCSS.

"Noise Pattern", click to generate a new random pattern.

The last Pen of the year I made was "B/W Random Möbius IFS" which is a type of fractal called iterated function system.

The same Pen can generate explosions... ... and images of outer space ... ...and rings

Mentions

"Repellers" made it to spot 79 of Most hearted Pens of 2018. Since the first time I saw the most hearted in 2015 I've dreamed about making it into the list. I am so happy and proud.

My collection Hearts 💙💚💛💜🧡❤️🖤 made it into CodePen Spark 119 Hearts, Hats, and Heroes

"Sphere of Boxes" made it into CodePen Spark 143 Boxes, Birds, and Byrne's Euclid

"Noisy SVG Lines" made it into CodePen Spark 147 Patterns, Pizza, and Pirouette

"Sphere of Boxes" and "Delaunay" made it into Awesome Demos Roundup #8

"Dalaunay Stripes" made it into Awesome Demos Roundup #9

The Future

I'm thinking of bying an AxiDraw in 2020...

I'd like to host a few CodePen meetups.