I added a new curved droplet shape. The simple droplet that I already had,
you can see in the outer layer of this mandala.
I was determined to add this new composite shape made up of three curved droplets.
It took way longer than it should have to figure out how to get the exact curves
that I wanted and to make sure that resizing it maintains the same joyful shape.
I really didn't want a flat pancake or a tall beanpole.
The result finally feels exactly like the joyful shape that I imagined!
So maybe it was worth it and now I can move on with my life!
I created a new shape that I call a potted plant. It's my second 'composite shape'. It's
made up of 3 droplets and a dot. When you interact with it, it should act like a single
shape. I'm finding that different shapes have different vibes. I added the wave to this one
because the mandala was filled with shapes that were very light. There was a lot of white in it.
The wave filled in with a dark color here is much bolder than the other shapes.
It adds some intensity to the mandala.
This is the first mandala I've made that is using the new 'composite shapes'. Composite
shapes are shapes that are made up of multiple other shapes. If you try out the interactions
on this one - hover or click or swipe on part of it - you'll see that these dotted arcs are
treated as one shape. This will let us create more complex and interesting
shapes without having to recreate each of the parts individually.
Here we create a random mandala each time the page is refreshed.
It uses random combinations of the shapes I've created so far. I'll add more
and better shapes along the way. This is a good step towards using these
as data visualizations since we'll want the mandalas to be a visual representation
of data.
Some of these mandalas will be more aesthetically pleasing than others.
I sometimes find myself wanting to go back to the last one. But it's gone
forever. Which reminds me of sand mandalas! Traditionally the artists
destroy them when they're finished. To remind themselves of the lesson
of impermanence. Nothing lasts forever.
"It is not impermanence that makes us suffer.
What makes us suffer is wanting things to be permanent when they are not."
Thich Nhat Hanh
This mandala was inspired by a mosaic that I saw in Florida. I liked the wave shape, so for
this I added a wave shape to the toolbox. It wasn't easy to get the spirals perfect and keep it as one
solid object. Instead of having each spiral start from the center, I had it start on the left,
spiral in to the center, then spiral out with a wider radius step around and to the right.
Now I have that shape in the toolbox. It can take a size parameter. Maybe I'll add direction later
so that we can specify clockwise or counterclockwise.
I've started adding a javascript driven tooltip here, although it still needs some work.
For the tooltip to work on a curly bracket, the curly bracket
has to be more than just lines, it has to be a filled shape. So I changed the way the
layering works. Until now my code has started with the center circle then added "layers"
from the inside out. But If I want the outer layers to be behind the inner layers, javascript
really wants the outer layers to be added first. So, now I have to change my thinking about how
I write the code for these, the inner layers have to come after the outer layers.
Weird, I know.
For today's mandala I added an arc shape lined with dots. In it's current form
it doesn't translate well to data visualization; I was just going for beauty. My next step is
to add Flask to this site, and I'll also probably pull in D3 at some point. The code
is currently vanilla javascript, but with Flask I'll be able to do some of my favorite language: Python!!
I see beauty and elegance and symmetry in software and data and for me these mandalas are an expression
of that.
I started trying to make a spiral using Bezier curves. Bezier curves use
control points that determine the curves. I could not get a spiral that I was
happy with. They were crooked! They weren't perfect. So I changed the code to
calculate 360 different lines for each turn around the center. The first time
I ran that I knew it was right. It was perfect and looked beautiful. I now have spirals
in my toolbox. They can take a size parameter. I've hardcoded them (for now) to have
two turns around the center because I liked the aesthetics of that. It will be
easy to add a parameter for more turns later if necessary.
For this mandala I added methods to draw layers of circles. To work for
future data visualizations, I wanted the javascript to take a size of and number of items for
the layer and calculate where to place the circle as well as a smaller circle that
is centered between each one in the outer part of the layer. The smaller circles are
aesthetically pleasing and may be useful for our data visualizations, we'll see.
I added a simple tooltip since we will need those for the interactivity of our data visualizations,
so this is the first step towards that.
The outermost layer of this one is made up of some Y shaped objects that I call
palm trees. I added them here because when they were placed next to each other they looked like teeth to me which made me laugh.
At some point the data will somewhat drive which colors and which shapes are chosen. I already get hit with
surprises (like teeth and t-shirt shapes) when I'm experimenting. Finding out what shapes and colors the algorithm suggests for different datasets
will be even more surprising I'm sure.
I will get to creating some sophisticated data visualizations,
but this one made me laugh today, so I had to share it.
I'm creating a collection of shapes that will be used
to represent different kinds of data. I had these elegant
little curves that I called palm trees but when I was
fiddling with the stroke width this one made me laugh because
they look like little t-shirts.
I created a simple mandala using Cubic Bezier curves in SVG.
I'll experiment with different ways to create mandalas with the
goal of creating interactive data visualizations. This one is static
and is created using javascript to create SVG elements. The key to the round
nature of mandalas was the transform rotation attribute in the SVG Path element.
Eric Lander once said
"Things that are beautiful have a communicative power that things that are not beautiful do not".
When I was studying data visualization I was struck by the beauty that could be seen in data
and it's ability to create understanding. I was studying biomedical engineering at the same time so
I often used data visualization to help me understand complex biomedical data.
I've recently become interested in the impact of the gut microbiome on overall human health, so
I hope to share some of that research here and use data visualization to make it more understandable.
I've just taken my previous website (flashbit.com) off of AWS and will probably forward it to this page.
So if you are looking for flashbit and ended up here, that's why. I'm not sure which url I like better.
Maybe some day I'll use them for two different purposes, but for now, this is my focus.
