My Creative Coding 2020

Johan Karlsson — Tue, 22 Dec 2020 22:39:10 +0000

Hi, my name is Johan and I’m a creative coder working with JavaScript. I've been doing these retrospectives since 2016, this is my 2020. I like to think back and write about the year because it makes me appreciate all the accomplishments. I've used the CodePen blog previously, but now they've retired that feature.

Most of my experiments are on CodePen. I've embedded the Pens directly into this blog post. If you experience a blank Pen, try clicking the Rerun button in the lower right corner. The default view is the Result tab.

Click Babel or JS tab to view the code, then you can click the result tab to hide it if you want to.
Or even better, click the Edit on CodePen link in the upper right corner to open the Pen in a new tab. From here you can click the Fork button in the lower right to create your own editable copy of my Pen.

I usually make the canvas clickable so that you can easilly generate new patterns, remember to try it out! Some themes for 2020 are: SVG, hexagons, circle packing and patterns, as you will see.

Late 2019 I figured out a delaunay triangulation algorithm which I had a lot of fun with. I also started to generate SVG with JavaScript.

My first Pen of 2020 is "Voronio SVG". A Voronoi diagram can be obtained by first doing delaunay triangulation for a set of points and then connect the circumcenters of all triangles that share an edge.

Last year I figured out the math for making a hexagon tile. This is an animated version: "Hexagon Wave". Normally you can embedd a Pen in status "stopped" which I usually use for animations to not bog the whole page. For some reason I can't here on dev.to so instead you have to click Result and then Babel to see the animation. Sorry about that.

"Rainbow Hexagon Stripes"

"Random Stripes On Isometric Cubes"

In March I was reading up on generative art and found out about the pioneer Vera Molnár. I was inspired to try and re-create some of her works.
"A Tribute to Vera Molnár"

"Another Tribute to Vera Molnár | SCSS"

"A Third Tribute to Vera Molnár"

"Forth Tribute to Vera Molnár"

I wanted to try something else than triangulating randomly positioned points. This is points in a spiral pattern.
"Gray Spiral Delaunay with Texture"

Here is a rainbow version "Rainbow Spiral Delaunay with Texture"

Somewhere around here I got hooked on creating patterns.
"Colorful Circles"

"Colorful Squares"

"Lines in Rectangles"

As so many times before, Daniel Shiffman inspired me with his youtube channel The Coding Train. This time it was a basic circle packing algorithm. First the still version "Circle Packing - Still Image".

Then the animated interactive version: "🧼🧽 Soap Bubble Sweeper". Move the mouse cursor! 😀

I continued my foray in pattern generation with "Random Chevron Pattern"

"Sparre" which is chevron in Swedish 😉

"Jagged Chevron Pattern"

"Circle Stacks" using shadows to create a bit of depth.

"Taraxacum"

Another inspiration from Daniel Shiffman is the mathematical heart curve.

"Burning Love"

The reason why I learned to generate SVG from JavaScript last year was because I planned to by an AxiDraw penplotter. I bought it during the summer and it arrived in September, due to US -> Sweden transport. This is when I started to create a lot more SVG based patterns.

This is "Circle Grid | SVG"

Did you know that there is an SVG renderer for three.js?!?! I wanted to create a lot of cubes that I could print with the AxiDraw but it turned into an animation instead, "Cube World":

The reason why so many of my SVG Pens have dark background is because I love plotting on black paper with a light pen. I have several verieties of Gelly Roll pens: white, Metal and Stardust Glitter!

My workflow is like this:

I have something in mind
I create an SVG based Pen
I export the SVG to a file
I import the SVG file into InkScape
I use the AxiDraw plug-in to plot it on paper

"Spiral Packing | SVG" based on the circle packing algorithm from Daniel Shiffman that I mentioned earlier. This time using spirals instead. I love how it looks printed on black paper with metallic Gelly Roll pen.

This is how it looks plotted:

"Yarn Ball Packing"

"Circle Packing Text"

Plotted and framed:

In "Color Themes From Images" I use circle packing with varying space. The colors are taken from images that I think have pretty color themes. Each circle gets the color of a random pixel in the source image. Click through a few of them and see if you can guess the source photos. Hint: the common theme is nature. The correct answer is written to the JavaScript console.

In "Hole Punch" I use an offscreen canvas and globalCompositeOperation = "xor"

"Stacked Rainbow Rectangles" was inspired by an image on Pinterest.

Another rainbow colored Pen insired by an image on Pinterest, "Color Wheel Squircles":

"Geometric Pattern" is based on a few tiles with basic geometric shapes. Each tile's rotation is random. The color patterns come from coolors. Notice that a few tiles have twice the size as the rest. The grainy texture is created with random pixels with dark but very transparent color.

"Colorful Triangles". The color patterns come from coolors.

Line based patterns work well with the AxiDraw so I decided to try the Maurer Rose. Use the sliders to change parameters or just click the Random button. You can double click the title of the menu to hide it or you can click the Edit on CodePen link to open the Pen in a new tab.

This one looks pretty sweet plotted on paper, "Beziers":

This is the SVG version of a Pen I made 2018, "Noisy Circles":

Another circle packing based experiment: "Big Brother". Move the mouse! Click to generate a new pattern! I'm using the same algorithm to pack the circles as in all previous Pens, but have a look in the Circle.draw() method to see how I get the "eyes" to follow the mouse pointer.

And then the SVG version. All "eyes" look at the same random point, except for a few stubborn radicals that look in the oposite direction. Can you find one?!

This is how it looks plotted:

I figured out this pattern while drawing in my sketch book,
"Striped Squares":

One day I saw a linocut pattern on Instagram that I wanted to re-create myself. By first drawing the shape outline and using context.clip() I then can draw a bunch of concentric circles that are visible only inside the shape (the excess is clipped).

"Circle Pattern II"

"Hand Fan Tessellation"

"Hand Fan Tessellation II"

"Hand Fan Tessellation III"

Last Pen of the year was "Rainbow Triangles". This is the algorithm:

Create a set of points with random positions, let's call it A.
Create another set of points with random positions, let's call it B.
Loop through each point in B and find the three closest point in A.
Draw a triangle using the three points as vertices.
Let hue vary along the x axis.

Conclusion and Reflections

This is what I wrote about the future one year ago:

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

Buying one was a very good decision, I'm so happy! I enjoy creating something physical and ironically the AxiDraw purchase inspired me to draw a lot. Sometimes my drawings inspires me to code something new and sometimes my code inspires me to draw a new pattern. Some things are easier to draw myself, other things are easier to code and plot.

This year I learned that inspiration is very important, I started to save beautiful patterns and images using Pinterest and I also started following a lot of inspiring artists on Instragram. I ended up creating an account for my own creations: donkarlssonsan_art

The Future

I will definitely continue creating SVGs and plotting them with my AxiDraw.

I've thought about doing several layers to be able to use different colored pens.

I've seen people put a whole lot of paint on a paper and then creating a pattern by letting the AxiDraw move a stick through the paint, this is something I'd like to try.

I'm planning to combine manual drawing with plotting.

I dream of having my own art exhibition so I think I will start by creating a small one just for friends and family...

In Closing

Thanks for reading all the way down here, leave a comment or contact me on Twitter!

Twitter, Instagram, CodePen

DEV Community: Johan Karlsson

My Creative Coding 2020

Conclusion and Reflections

The Future

In Closing