miscellaneous ramblings

Miscellaneous Ramblings is a place where we will post stuff related to MandalaGaba, mandalas, and other stuff related to that stuff.

Complete Mandalagaba overhaul

Last week we pushed a big update. The idea behind it was to separate various features we had built into Mandalagaba these past two years. We had various reasons to do this, the main one being that the interface was becoming an puzzling mess. Our theory is that 90% of our users were only using 10% of Mandalagaba’s features and tools, and we decided that was somewhat of a pickle if we wanted to increase our user base.

Sure Mg is fun and all (from now on Mg is Mandalagaba) but we have been dealing with the same number of users for the past year although we have implemented tons of new features, redesigned the controls menu, built an online presence, created marketing content, etc. Basically we’re stuck at an average of 500 unique visitors per day. By actively promoting Mg we are gonna get bumps here and there. When we get a wave coming in from Reddit, or from a Facebook post or ad, we can generate enough interest to flow in thousands of people (up to 28 000 visitors last December on our Snowflake Designer Reddit post we did last year) These waves and bumps have a tail of course, but its usually fairly short lived and doesn’t bring in much peeps on the long term.

We have our theories on why this is and most of them have to do with the overdose of icons the old Mg was undergoing leading to users not really knowing what to do with the platform once they fiddled arround with a design or two.

We also know that implementing accounts will help out in terms of having people come back to the platform, and those are on the way.

Anywho, to solve this issue we started thinking about ways to make Mg more user friendly and understandable, and one of the first solutions we found was to divide Mg into its different facets.

Here’s a little breakdown of the awesome entertaining zen mantra-guru-massage-lounge tools and features Mg offers to the world for free (‘cause that’s how we roll):

  • Mandala creator

  • Tessellation builder

  • Snowflake manufactuer

  • Matchmaker

  • Replays

  • A network engine

  • A session fork tool

  • Session statistics

  • A plant designer (this is brand new)

  • Recursive drawing apparatus (also brand new)

So to make things easier, we separated Mg into 5 facets for now.

Behold:

  • The mandala maker:

Is found at: https://mandala.mandalagaba.com

In effect, Mandalagaba allows people to draw mandalas. That much is fairly easy to understand. The etymology of Mandalagaba come from the ancient latin word mandaleum, which means “For where thou art, there is a mandala in thy hearth”.

That was made up.

Anyways, here is what the new Mandala facet of Mandalagaba looks like:

Screenshot 2019-03-06 at 17.32.45.png

In this new version, we took out a lot of stuff to give it a breather. We want people to have a hands on approach to using the interface, and we want to reverse those percentages cited above: we want 90% of the users to master 90% of the tools right off the bat.

This is just the first step of our simplification process, and there’s still lots to improve in terms of design, but we believe this is a good first step in the right direction.

For good measure, here’s a beautiful mandala design by one of our users from Brisbane, Australia in 107 pen strokes.

b0054A_G2YSZC - Brisbane 107.png
  • A tessallation builder!

Can be found at: https://tessellation.mandalagaba.com

To tessallate: To form into a mosaic pattern

In other words tessallation are mandalas that are not only multi-axial, but also multi-centered.

We applied over-simplification to the tessallation facet much like we did for the mandala maker.

These are the controls you are left to play around with:

Screenshot 2019-03-06 at 17.53.50.png
 

Here is superb tessallation created by one of users from Pocos de Caldas in Brasil in 62 pen strokes.

Screenshot 2019-03-04 at 18.37.46.png

This next one is created by the infinitely creative Hava who helps us out a lot at Mandalagaba, who is super nice and who defied the laws of rationality and creativity in regards to how she masters Mandalagaba (I can assure you this is one of the most simpler ones):

Screenshot 2019-03-04 at 18.40.31.png
  • A snowflake manufactuer

Can be found at: https://snowflake.mandalagaba.com

We added a neat little twist to the mandala maker allowing user to design snowflakes in a jiffy. It’s also a pretty efficient tool to create transformer masks.

Screenshot 2019-02-03 at 11.48.42.png
  • A plant grower!

Can be found at: https://plant.mandalagaba.com

Say hello to our new addition: the mandala plant creator!

Ben has been working hard on adding recusrsive drawing to the Mandalagaba engine, and now he’s got something pretty awesome to show for it. Most of the recursive drawing tools and parameters are only present on the “pro” facet of Mandalagaba which we’re gonna talk about in just a sec.

This plant growing facet is a cool variation that guides you into drawing alien like plants to which you can add leaves and flowers of different colors.

Screenshot 2019-03-07 at 23.27.25.png
  • Mandalagaba Pro

Can be found at: https://pro.mandalagaba.com

If you want every single feature Mandalagaba has to offer all in one package, and that your brain is resilient to icon pandimonium, head over to the “pro” facet of Mandalagaba. We call this pro because only our hardcore power users tend to play with mosts the devices and gadgets this facet proposes.

It’s only in the Pro facet that you are going to find numerous paramters, tools and functions such as the recursions paramters, forking, access to match making, etc. Hopefully sooner than later we are goind to be dispatching all those tools more conveniently across Mandalagaba’s other facets.

The picture below is an attempt I made at using every single feature Mg has to offer in one single drawing:

I got caught up in colors and reconnected with my five year old self.

I got caught up in colors and reconnected with my five year old self.

Collaborating on mandalas

The basics of Mandalagaba’s network engine

Mandalagaba has a robust networking engine at its core. Essentially this means it is possible to have multiple people drawing on the same session.

A word about Mandalagaba sessions:

Everytime one loads up Mandalagaba, he falls upon a random empty session. This sessions has an ID that can be found in the URL.

It is also displayed directly on top of your canvas:

Session ID.png

This session ID is unique and links back directly to your session exactly as you last left it. This means that whatever you do on your session, everything is saved in real time and stays put indefinitely.

This also means that you can share this session ID with anyone so they can access your session at any time and start drawing on it. All they have to do is copy the ID and paste it right after the URL http://www.mandalagaba.com. (for example: http://www.mandalagaba.com/#uwCEeX).

A great number of people can connect at the same time on the same mandala session and collaborate together on creating amazing designs.

Mandala Matchmaking

We have been wanting to push the network engine aspect of Mandalagaba a bit further for some time. To do so, one feature we implemented recently is some sort mandala matchmaking engine.

The concept is very simple:

You head to http://match.mandalagaba.com and you are brought to a page where you wait for a random person to be matched to.

We added one filter option for now: your gender.

Screenshot 2019-01-05 at 18.04.08.png

Once you are matched with someone, you are both brought to your new empty session and you can both start collaborting on designing wonderful mandalas.

Users can now playback their mandalas, drawings, designs, pieces of art, what have you

Yeah so this is old news actually but better talk about it now than never: you can now draw something on Mandalagaba and replay all the pen strokes of your beautiful magnificent creation.

Here is how it works:

  1. You draw, doodle, scribble.
  2. At any time you click on your Session Info button.
  3. Inside the Session Info pop-up you click on the replay link.

What is the Session Info button you might ask?

Session info button + replay link.png

Here's a Gif showing this in action:

Replay.gif

And to maximize the entertainment factor of this post, here's a nice little replay generated from a mandala drawn from one of our users. I added some relaxing piano on top for good measure:

Explaining the fill function: An HTML5 canvas Flood Fill that doesn’t kill the browser

I took the longest time implementing the fill tool  on Mandalagaba. How hard could it be? Recurse through pixels looking for a color and update them to a new color.

While this method certainly works and is easy to implement, it is also extremely slow. Slow in a way that hangs the browser, yielding infamous messages from the browser.

Screen-Shot-2018-06-22-at-10.01.53-AM.png

Here we’ll take a look at various Javascript flood fill implementations along with their drawbacks. Jump to #4 if you are only interested in the best one.

In all cases, the code is available in the example iframe, look for the function flood_fill.

Screen_Shot_2018-06-23_at_3_07_40_PM.png

1. Simple Recursive

Not much to explain here, we simply recursively call the function on adjacent pixels when they match the color we are trying to fill over.

See example of the recursive technique by clicking on this link.

It’s reasonably fast but the problem with this one is that any fill area slightly large yields too much recursion which breaks subsequent JS. This Canvas box is 200x200px and at 300x300px, Firefox complained about:

Screen-Shot-2018-06-22-at-1.47.31-PM.png

It’s easy to see how this implementation will not satisfy a reasonably featured paint program. Even if your browser let you stack more function on the heap, I would bet it would lead to slowness.

2. Iterative

We simply take the previous idea of looking at adjacent pixels and filling them, and make it iterative instead so the function calls don’t get stacked to a ceiling.

See example of the iterative technique by clicking on this link.

The problem with this is is that is is sloooow. So slow it stalls browser. Most of time is spent having to keep track of pixels_stack. Recursion doesn’t have that need but as we’ve seen, it has other issues.

3. Recursive-Iterative (AKA catch-your-breath iterative)

This is a twist on #2 which every so often, recurses on itself via a setTimeout to let the browser catch it breath a little. It also yields a cool visual effect.

See example of the recursive-iterative technique by clicking on this link.

I really like the visual effect, and it makes the slowness tolerable. But the issue is that Mandalagaba has a network engine and allows for re-rendering of one’s work. So synchronization is a big deal, and you know what makes synchronization easy? Not having to worry about it.

So as long as I can help it, my life is a lot easier if the operations the users can perform are atomic. Operations need to be able to be processed one after the other counting on the fact that the ones that came before have completed.

The first 2 solutions are atomic but suck; this 3rd one, however cool it may be, isn’t.

4. The Holy Grail

 

I’m not sure where this algorithm originated from, but I’ve gotten to know it on this web page which explains it very well (with GIFs!). It is iterative and goes about finding pixels to fill in a much smarter way.

See example of the holy grail by clicking on this link.

That’s it, no drawback here 🙂 I’ve tested it on large canvasses and this is what is implemented on Mandalagaba. Now of course, in a real application there is a ton more complexity dealing with smoothing edges and blending alpha. I only wanted to expose boiled down versions of these algorithms so they are easier to wrap your mind around.

Feel free to ask questions in the comments.

(This text was originally written on Ben's amazing blog)