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.
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.
"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.
Another inspiration from Daniel Shiffman is the mathematical heart curve.
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.
"Yarn Ball Packing"
"Circle Packing Text"
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?!
I figured out this pattern while drawing in my sketch book,
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.
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
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...
Thanks for reading all the way down here, leave a comment or contact me on Twitter!