My Creative Coding 2020
Tags: creativecoding, penplotter, javascript, svg
Published: 2020-12-22 22:39:10

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.

* [2016](https://codepen.io/DonKarlssonSan/post/my-2016-on-codepen)
* [2017](https://codepen.io/DonKarlssonSan/post/my-2017-on-codepen)
* [2018](https://codepen.io/DonKarlssonSan/post/my-2018-on-codepen)
* [2019](https://codepen.io/DonKarlssonSan/post/my-2019-on-codepen)

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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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. 

{% codepen https://codepen.io/DonKarlssonSan/pen/ExawemK default-tab=result %}

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.
{% codepen https://codepen.io/DonKarlssonSan/pen/povZeNy default-tab=js %}

"Rainbow Hexagon Stripes"
{% codepen https://codepen.io/DonKarlssonSan/pen/Baybxzz default-tab=result %}

"Random Stripes On Isometric Cubes"
{% codepen https://codepen.io/DonKarlssonSan/pen/eYmXjev default-tab=result %}
 
In March I was reading up on generative art and found out about the pioneer [Vera Molnár](https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r). I was inspired to try and re-create some of her works.
"A Tribute to Vera Molnár"
{% codepen https://codepen.io/DonKarlssonSan/pen/rNVYWRg default-tab=result %}

"Another Tribute to Vera Molnár | SCSS"
{% codepen https://codepen.io/DonKarlssonSan/pen/jOPamJp default-tab=result %}

"A Third Tribute to Vera Molnár"
{% codepen https://codepen.io/DonKarlssonSan/pen/ZEGaZZX default-tab=result %}

"Forth Tribute to Vera Molnár"
{% codepen https://codepen.io/DonKarlssonSan/pen/yLNvrBr default-tab=result %}

I wanted to try something else than triangulating randomly positioned points. This is points in a spiral pattern. 
"Gray Spiral Delaunay with Texture"
{% codepen https://codepen.io/DonKarlssonSan/pen/vYOpYVW default-tab=result %}

Here is a rainbow version "Rainbow Spiral Delaunay with Texture"
{% codepen https://codepen.io/DonKarlssonSan/pen/bGdopPx default-tab=result %}

Somewhere around here I got hooked on creating patterns.
"Colorful Circles"
{% codepen https://codepen.io/DonKarlssonSan/pen/poJegJx default-tab=result %}

"Colorful Squares"
{% codepen https://codepen.io/DonKarlssonSan/pen/gOpgQWr default-tab=result %}

"Lines in Rectangles"
{% codepen https://codepen.io/DonKarlssonSan/pen/GRJEgYm default-tab=result %}

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".
{% codepen https://codepen.io/DonKarlssonSan/pen/MWwGvGM default-tab=result %}

Then the animated interactive version: "🧼🧽 Soap Bubble Sweeper". Move the mouse cursor! 😀
{% codepen https://codepen.io/DonKarlssonSan/pen/VwLxXYg default-tab=js %}

I continued my foray in pattern generation with "Random Chevron Pattern"
{% codepen https://codepen.io/DonKarlssonSan/pen/eYNKqjX default-tab=result %}

"Sparre" which is chevron in Swedish 😉
{% codepen https://codepen.io/DonKarlssonSan/pen/dyojPQM default-tab=result %}

"Jagged Chevron Pattern"
{% codepen https://codepen.io/DonKarlssonSan/pen/wvaXRvg default-tab=result %}

"Circle Stacks" using shadows to create a bit of depth.
{% codepen https://codepen.io/DonKarlssonSan/pen/BaNPmzg default-tab=result %}

"Taraxacum"
{% codepen https://codepen.io/DonKarlssonSan/pen/qBdyyWP default-tab=result %}

Another inspiration from Daniel Shiffman is the mathematical [heart curve](https://mathworld.wolfram.com/HeartCurve.html).

"Burning Love"
{% codepen https://codepen.io/DonKarlssonSan/pen/OJVoVPx default-tab=result %}

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"
{% codepen https://codepen.io/DonKarlssonSan/pen/MWyPdVR default-tab=result %}

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":
{% codepen https://codepen.io/DonKarlssonSan/pen/dyMaRJN default-tab=js %}

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.
{% codepen https://codepen.io/DonKarlssonSan/pen/zYqXLPe default-tab=result %}

This is how it looks plotted:
![IMG_4118](https://dev-to-uploads.s3.amazonaws.com/i/gza3kv6mnghmz0tb79mp.jpg)
 
"Yarn Ball Packing"
{% codepen https://codepen.io/DonKarlssonSan/pen/mdPgNWB default-tab=result %}

"Circle Packing Text"
{% codepen https://codepen.io/DonKarlssonSan/pen/xxVvbqN default-tab=result %}

Plotted and framed:
![IMG_4040](https://dev-to-uploads.s3.amazonaws.com/i/qb6jlt8g2r2daz3ah7w4.jpg)
 
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.
{% codepen https://codepen.io/DonKarlssonSan/pen/mdPNvOB default-tab=result %}

In "Hole Punch" I use an offscreen canvas and `globalCompositeOperation = "xor"` 
{% codepen https://codepen.io/DonKarlssonSan/pen/yLYOmrw default-tab=result %}

"Stacked Rainbow Rectangles" was inspired by an image on Pinterest.
{% codepen https://codepen.io/DonKarlssonSan/pen/NWGbvmg default-tab=result %}

Another rainbow colored Pen insired by an image on Pinterest, "Color Wheel Squircles":
{% codepen https://codepen.io/DonKarlssonSan/pen/OJyxvRJ default-tab=result %}

"Geometric Pattern" is based on a few tiles with basic geometric shapes. Each tile's rotation is random. The color patterns come from [coolors](https://coolors.co/). 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.
{% codepen https://codepen.io/DonKarlssonSan/pen/eYpjNVe default-tab=result %}

"Colorful Triangles". The color patterns come from [coolors](https://coolors.co/).
{% codepen https://codepen.io/DonKarlssonSan/pen/ZEbaxdr default-tab=result %}

Line based patterns work well with the AxiDraw so I decided to try the [Maurer Rose](https://en.wikipedia.org/wiki/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.

{% codepen https://codepen.io/DonKarlssonSan/pen/LYZVEWd default-tab=result %} 

This one looks pretty sweet plotted on paper, "Beziers":
{% codepen https://codepen.io/DonKarlssonSan/pen/PoNrvjB default-tab=result %} 

![IMG_4227](https://dev-to-uploads.s3.amazonaws.com/i/eqv10wxpjthtua4l6k1e.jpg)
 
This is the SVG version of a Pen I made 2018, "Noisy Circles":
{% codepen https://codepen.io/DonKarlssonSan/pen/bGpyyoP default-tab=result %} 

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.
{% codepen https://codepen.io/DonKarlssonSan/pen/OJXPwda default-tab=js %}

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?!
{% codepen https://codepen.io/DonKarlssonSan/pen/dyXYodE default-tab=result %}

This is how it looks plotted:
![IMG_4205](https://dev-to-uploads.s3.amazonaws.com/i/m8pjyn5tp4ik5pgj62rm.jpg)
 
I figured out this pattern while drawing in my sketch book,
"Striped Squares":
{% codepen https://codepen.io/DonKarlssonSan/pen/jOrzjPJ default-tab=result %}

One day I saw a [linocut](https://en.wikipedia.org/wiki/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"
{% codepen https://codepen.io/DonKarlssonSan/pen/dyXKZgR default-tab=result %} 

"Hand Fan Tessellation"
{% codepen https://codepen.io/DonKarlssonSan/pen/oNLymjJ default-tab=result %}

"Hand Fan Tessellation II"
{% codepen https://codepen.io/DonKarlssonSan/pen/oNLMwKZ default-tab=result %}

"Hand Fan Tessellation III"
{% codepen https://codepen.io/DonKarlssonSan/pen/qBNyXWR default-tab=result %}

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.
 
{% codepen https://codepen.io/DonKarlssonSan/pen/yLazNwQ default-tab=result %}

#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](https://www.instagram.com/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](https://twitter.com/DonKarlssonSan), [Instagram](https://www.instagram.com/donkarlssonsan_art/), [CodePen](https://codepen.io/DonKarlssonSan)