miscellaneous ramblings

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

New drawing styles made possible thanks to recursive drawing (and the talent of an amazing artist!)

Never had we thought our online mandala maker could generate the following pieces of mandala magic :

Interstellar bird from the confines of the galaxy

Interstellar bird from the confines of the galaxy

Direwolf

Direwolf

Dragon of Light

Dragon of Light

The creator of these designs is Lara Laubert, an amazing artist and regular user of Mandalagaba.

Please check out her work here:

  • Lara’s instagram: https://www.instagram.com/laralaubert

  • Lara’s Pinterest: https://www.pinterest.fr/Lara_Laubert

Lara used one of Mandalagaba’s new features which is recursive drawing to create those awesome effects.

Now that the website has been separated into multiple facets (you can read the blog post Complete Mandalagaba overhaul for more information on this), you can find the recursive drawing features here:

  • https://plant.mandalagaba.com: This is a fun little guided drawing experience we published to let users play around with recursive drawing

  • https://pro.mandalagaba.com : This Pro version of Mandalagaba allows users to generate mandalas with every feature we have to offer. It is with this facet that Lara produces her amazing work.

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.

A word on the upcoming MandalaGaba Zen

“I have no idea what I’m doing, but this feels right”

“I have no idea what I’m doing, but this feels right”

We are currently working on making a simplified version of Mandalagaba.

The idea is to zenify the platform and strip it of all the little complex details and features that only appeal to our power users.

We want to produce an environment that will be ultra zen and that will focus only the essentials.
We are also going to add cool stuff like background images and relaxation music for good measure.

On top of that we will have user account where it will be possible to actually save your mandalas and better network with others.

As to when all of this will come to fruition, only time will tell.

1 Million pen strokes: Check. Aiming now for 1 billion.

As of yesterday, Mandalagaba is now a millionaire.

In pen strokes that is!

1 million pen strokes have been drawn on the platform since Ben published the website back in December 2016.

Awesomeness.

I'll leave you with this marvelous screenshot of one of our session's Session Info box where we monitored the passing of MandalaGaba in the millionaires club.

1 million pen strokes.png

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)

 

Fill tool finally up and running

Fill tool.png

The fill tool button has been present for a while, but it was greyed out. We teased it in an effort to make our users think that releasing it was just around the corner. The truth is that this was a "hard nut to crack" (one of Ben's favorite expressions used to refrain for becoming extremely vulgar when it comes to not having easy wins against his code).

So essentially, the fill tool fills stuff. In Mandalagaba, we define stuff as being any surface delimited by pen strokes. A user can draw about anything and as long as there are stokes defining areas with closed borders, he or she can fill that area with any color.

Pretty neat.

The story behind Mandalagaba

I just realized no explanations of how Mandalagaba came to be were present on this blog. That's unacceptable so here goes.

MandalaGaba was coded by Ben a cold winter day by a fire in a remote location in Vermont. No expectations, just an eagerness to code an online mandala maker that didn’t suck. An amazing Reddit post later and people are passing by everyday creating mandalas on the website.

User feedback was overwhelming. People found MandalaGaba to be a stress-reliever, a creativity enhancer, a cool mandala creator.

Users are given the possibility to save their mandalas, which in turn gives us the possibility to share those mandalas. You can see most of them on our Instagram (https://www.instagram.com/mandalagaba/) and you can view some of our favorites in our "mandalagaba mandalas" gallery present on this website.

To code Mandalagaba, Ben does math. Real math with numbers and things. Absurd stuff that looks like this:

IMG_01261-e1518842061325-1024x791.jpg

 He also doodles math thingies like this:

IMG_01191-e1518842037588-1024x659.jpg

His 7 year old son Robin even lends a hand:

In Ben's own words " I love that Robin copies what I do no matter the understanding level, we’ve had lots of talks about what is going on.

In Ben's own words "I love that Robin copies what I do no matter the understanding level, we’ve had lots of talks about what is going on.

My name is Robin and am just here to help because I really like what MandalaGaba represents.

We are currently trying to make the website better by redesigning it, adding features and making it more collaborative. We don’t want to overdo it because we are firm believers that simplicity and efficiency beats complexity and overzealous design.

In the previous blog post you can see that we just released a new version of the website.

For people who have any kind of interests in drawing, addictive online thingies, mandalas, digital art, doodling, time wasting and procrastination, please feel free to give MandalaGaba a try.

Don’t forget to let us know what you think.

A new verison of Mandalagaba is live!

For a couple of months now we have been working on various features we really wanted to implement to make mandala making with Mandalagaba more dynamic and interesting.

We added a tessellation engine

Literally, tessellations are an arrangement of shapes closely fitted together, especially of polygons in a repeated pattern without gaps or overlapping. Our reasoning was that it would be super cool to duplicate the mandala creation process multiples times to generate beautiful mosaics. We chose triangles, squares and hexagons as polygons for now.

Here's a little gif showing you what this means:

Gif-test-01.gif

New control panel tools and features

Lots is to be said on these new little gadgets. We are going to start producing tutorials explaining how they all work but in the meantime here is a small breakdown.

Mandalagaba control panel explanation 01.jpg

1. Decrease numbers of axes
2. Axis count
3. Increase number of axes
4. Free form mode (no symmetry)
5. Simple symmetry mode
6. Mirror symmetry mode
7. Mandala mode: allows you to draw mandalas
8. Triangle tessellation mode: The axes are limited by triangle patterns
9. Square tessellation mode: The axes are limited by square patterns
10. Hexagon tessellation mode: The axes are limited by hexagon patterns
11. Pattern size ruler: Modifies the size of the patterns' grid
12. Draw tool
13. Straight lines tool
14. Area fill tool (not available yet)
15. Canvas background tool bucket: allows you to change the color of your canvas
16. Color picker tool: allows you to select a color on your canvas and load it in your colors palette.
17. Undo
18. Zoom out
19. Zoom in
20. Stroked thickness
21. Stroke smoothing tool
22. Scroll tool (only for mobile devices): allows users to scroll around their canvas.
23. Advanced options button: opens up the advanced tools.
24. Adjust centers on/off button: this tools allows users to activate designated shapes within their design
25. All shapes are off: all shapes will be turned off
26. All shapes are on: all shapes will be turned on
27. Display keyboard commands
28. Canvas size
29. Adjust canvas to screen
30. Color palette

New session option menu

We decided to separate the session related data from the control panel. That made sense on various levels. Number one reason was to declutter the controls panel as well as to regroup things coherently.

Session options menu.jpg

1. Save button: Saving opens up a big panel where you see your design displayed and where you also various options to share it
2. Fork button: forking allow you to duplicate your design and give a new session URL
3. New session button: This button allows you to create a new session with a blank canvas and a new session URL
4. Session stats button: This opens a pop-up that displays multiple stats and and numbers about your session
5. About button: This opens up a pop-up that displays various information about Mandalagaba
6. You current session link

Still a work in progress

Mandalagaba still has many more goodies up its sleeves, most of which take a lot of time and effort to conceive, code and implement properly, so please bear with us. We are also quite aware that we released this new version with a couple of bugs and incoherencies here and there. We're doing our best to neutralize the vermin.

Here a couple of things we have planned for the future:

  • Allow users to create accounts, stores their mandalas and better collaborate with one another.
  • Get the Area fill tool to work (much more a pain in the a.. than one thinks)
  • Get Mandalagaba translated in different languages so people living on the other side of the planet don't feel left out.
  • Add shapes and/or structures that delimit the pen strokes (still don't know how to go about this but eventually we'll get to it one day or another).
  • Allow 3D renditions of holographic tessellated mandalas to be sent to the moon and back.

For your information, everything we have planned for the future can be found in the roadmap we publish on this blog. Its link it located in the header menu of this page.

We also added a changelog to this blog. A changelog is basically a place where we will be letting you of every little update worth sharing Mandalagaba is getting. The changelog's link is also part of this website and it located in the header menu of this page.