Demos Section
Happy New Year!»
It doesn’t necessarily need a turn of the year to start something new or to have good resolutions and carry them through. You can always start with something new or leave something old. In August I started my website in its current form and published more than 10 posts, yet. It’s nice to look back on it.
And a couple of the posts had visual experiments that I really enjoyed. So now I have decided that I don’t always want to write a whole blog post about it. Instead there is now a new section Demos on my site. And right from the start, nine Svelte Components alias Demos made it to the section.
Dots every»
Some of the demos use HTML Canvas, others use SVG for rendering. When it comes to simple geometric shapes, SVG in combination with Svelte is surprisingly simple. For my first experiments I restricted myself to circles in order to find a creative idea. Perhaps you’ve read my post about Limitations as a Source of Creativity?
It didn’t start out very creatively with just rings of colored dots. But that’s why most of the first demos are now shining in pastel-like rainbow colors.
Color gradients are very easy to implement with the hsl () notation and a little helper function.
const hue2color = (hue, sat = 75, lgt = 75) => 'hsl('+hue+', '+sat+'%, '+lgt+'%)';I do not like the rigid spherical packing much. I had once seen an effect where the dots of the different layers resulted in lines. So why not pack lines with dots in a circle? The lines then connect points on an inner with those on an outer circle.
I stumbled across the row of triangular numbers from Gauss to distribute the circles evenly along a line.
const gsum = (n) => n * (n + 1) / 2;Discoveries from the past»
“Do good things and talk about it.”
— Georg-Volkmar Graf Zedtwitz-Arnim, 1961
And since I’ve only been filling this website with content since August, why not experiments from the time before that, too? I will certainly be porting one or the other earlier experiment and put it aside, following the motto “Do good and talk about it”. After all, one accumulates all sorts of digital gadgets over time, why should they gather dust on the hard drive instead of sharing with you?
On Twitter I came across the Construction of an Ellipse on the basis of dots on circles. The advantage now is that I can change various parameters and discover even more things within my Demo.
The following experiment is in some ways similar to that. Here the points do not move in circles but only along a line each. And yet, when connected, the points describe a regular polygon / circle.
Don’t forget to call up the Tusi Motion Demo and play with the parameters.
Inspired by others»
I have to admit that many of my experiments are not originals of mine,
but that I saw a lot somewhere and simply copied and adapted them.
But I think that’s legitimate, I won’t tell you any magic tricks.
I learn a lot in the process and notice that I now immediately recognize certain patterns in other people’s experiments.
This tunnel effect is also copied. The original was created using Processing, but the HTML Canvas can do it too.
Just lines»
We come to four other Demos, all of which have one thing in common, the shapes and animations are only made up of lines. The special is only created by the superposition or arrangement of the lines. Some of them can also be converted into proper artwork, so-called String Art.
I’m sure I’ll be producing a few more new and old Demos in 2022 and my collection will keep growing. I’m not alone in this, in times of NFTs, the whole idea of Generative Art has gained a lot of popularity. Maybe a topic that I should also deal with? So far, my main motivation has not been to earn money. I rather enjoy the combination of math and creating beautiful things.
Have a happy new year!