Humongous printed Mandalagaba mandalas!

A very cool and insightful person by the name of Amy Walker made some awesome mandalas with Mandalagaba and printed them out on huge sheets of papers for people to colorfy them!

This happened during the annual Renfrew Ravine Moon Festival (http://stillmoon.org/) last week-end.

 Yup. That’s one of our mandalas. Couldn’t find the original in our daily digests.

Yup. That’s one of our mandalas. Couldn’t find the original in our daily digests.

Write here…

 Bird mandala!

Bird mandala!

 Paintified bird mandala

Paintified bird mandala

 Flourescent Bird Mandala

Flourescent Bird Mandala

Coloring our mandalas is something we are working on. We are going to let users decide whether they let other users color the mandalas they create on the platform. This concept will make much more sense when we will be adding user accounts and user galleries.

Another really cool aspect of this initiative is the collaboration side of it. Mandalagaba is built on a hefty network engine allowing collaborations between users, but for various reasons, most of whom are related to us not communicating enough about it, this features is unknown or misunderstood by 90% of our users.

Multiple facets of Mandalagaba either need to go through some fine-tuning or some simplifications to make our network engine more user friendly, and that is also something we are working.

In any case, we really appreciate that Amy did the Renfrew Ravine Moon Festival.

More about Amy Walker and her Make Mobile workshops can be found on the Make Mobile website. Check it out at http://www.makemobile.ca !


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

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)

 

The Power of One Stroke and the Reddit hug

We posted the GIF below on Reddit yesterday and it blew up. Here I have to post it as a video because SquareSpace doesn't accept images bigger than 20 megs, but originally its a GIF.

By blew up I mean it took off. Our stats skyrocketed. Just by posting a simple GIF with a catchy title on a popular website where people share stuff.

This isn't the first time that this happens. Every now and then Mandalagaba finds itself on Reddit and we try to make the most out of the attention. The user feedback is invaluable, we learn a few lessons about server load balancing and new users try their hands and bring new styles we've never seen before.

We noticed that GIFs worked really well for the type of content we publish. They are very popular on most sharing-driven environments. Have a cool simple video that you don't even need to play and you got yourself one nifty dopamine generating machine.

Baby Mandalamania

Exploiting babies for mandala art. Artist Photographer Gabriele Dabasinskaite should be ashamed of herself...

Kiddin' of course. Just yankin' your chain.

This artist came up with an amazing series of babies placed inside of circular symmetrical forms. Works wonders. Beautifully original. Ultimate cuteness is pushed to its climax.

Behold.

We also find it quite amazing that Gabriele Dabasinskaite's website is called JustGaba (MandalaGaba... JustGaba... Get it?)

I picked up this story on My Modern Met's website : Sweet Photos of Newborns at the Center of Handmade Mandalas

Looking for online mandala websites? Look no further friend.

We thought we'd share some websites that do what Mandalagaba attempts to do: let cool people build cool mandalas online, and for the most part do it for free. We all have a different take on how we go about it, and the tech is always different as well.

Most of these services are free just like we are. We even made the iOs app free. We prefer accumulating good karma.

Anyways here's the list of mandala making websites we found browsing through the interwebs. If you happen to know any others, please let us know about them (essentially so we can go steal their ideas, concepts and design 'cause we're the mandala gangstas yo!).

MandalaGaba

If you're reading this article, then you probably know what MandalaGaba is. In case you don't, please let me introduce ourselves. MandalaGaba is single page website that hosts various tools to design and create multi axes symmetrical designs.

We started off by allowing users to simply create mandalas (so symmetrical designs constructed around a single center). With just a simple set of tools, users from all around the world managed to produce jaw-dropping mandalas. Some of our favorite designs can be found in our MandalaGaba Mandala page.

Not long ago, we added a tessellation engine to allow for the creation of multi-centric symmetrical designs (a tessellation = an arrangement of shapes closely fitted together, especially of polygons in a repeated pattern without gaps or overlapping). We also re-designed our controls panel to the dismay of many of our users, but now we're hearing a little less fuss about it so I think they are cool with it.

In the future we plan on allowing users to create accounts. This will allow them to save their designs, share them with the world more easily, collaborate with other users in a more practical way.

One thing we don't communicate enough on is the fact that Mandalagaba hosts a robust network engine. Every time you load a new session, that sessions get an ID associated to it. This ID is present at the level of the session's URL. For instance, if you load the URL http://mandalagaba.com/#oHrDhQ you will load a session I created for the purpose of this article where I wrote "Hello World". Essentially this means that any user having created a session can easily share their session with anyone else just by sharing its URL. Another user that goes onto that session can start drawing on it and all the new pen stokes will be registered. Makes up for a wonderful collaborative environment.

Thanks to our network engine, you can also fork your sessions. Forking will allow a user to take an existing session, copy it (fork it) and start designing from the new forked session without altering the initial session (sorry for the overuse of the word "session" in this paragraph). This allows you to start creating designs form a preexisting design by keeping a copy of the original. Pretty neat.

180311-gif-01-1.gif

The Kaleidoscope Painter

The Kaleidoscope Painter is a pretty cool little website to doodle around with. It has got some neat features like Dynabrush that automatically adjusts pen stroke thickness according to something (have no idea what though), and Autodraw that automatically draws mandalas for you. I like that Autodraw thingy. You can just sit back and watch it do its thing. Another interesting aspect about the The Kaleidoscope Painter is that it chooses your strokes' colors for you and gets really creative about it too. Only taking magic mushrooms can counter the effects of the exuberance going on here. I reckon it chooses a set of colors and gradients and does its thing. Pretty cool results. Here's my piece of art:

Color Mandala

With Color Mandala you don't actually draw mandalas. You design them by incrementally adding figures and shapes and by playing around with various settings. I must say the creative process in which it engages its users is quite peculiar but the person behind this project clearly thought things through.

Screen Shot 2018-03-01 at 20.11.11.png

Mandala Creator

Mandala Creator is quite fun to work with because they added tools such as RegularFill, SmoothFill and PolyFill that do stuff I don't fully comprehend but that generate cool wow-effects. In just a matter of seconds you can create very interesting designs. Behold.

Screen Shot 2018-03-01 at 20.20.08.png

Mandala Maker

Basic and simple. Not much else to add. No fancy features. Just mandalas and other things described below.

Screen Shot 2018-03-10 at 15.39.53.png

MandalaMaker offers other cool little creation tools too:

Screen Shot 2018-03-10 at 15.45.39.png

In their own words, you "choose the mandala you want and then print it and color it , fill it with beautiful colors
be creative and have fun with our Beautiful mandalas coloring pages".

Spiral-1.gif

Makes spirals. Funky

Screen Shot 2018-03-10 at 16.24.39.png

Just lol.

Myoats

Myoats is one crazy piece of work. Very fancy stuff going on here. You have a bunch of different tools to create some pretty amazing designs. One thing that really sticks out from the other mandala sites we've discovered is that you can create an account, save your designs to your gallery and engage with the Myoats community.

Screen Shot 2018-03-10 at 16.31.05.png

WeaveSilk

With WeaveSilk you create symmetrical designs very easily with a psychedelic twist. Very beautiful wow-effect rainbow unicorn pumped-up pen strokes right off the bat.

Screen Shot 2018-03-10 at 16.43.00.png

Drawerings

Drawerings seems pretty basic but it actually hosts tons of little nifty features. For instance its records all your pen stokes gives users the possibility to replay your drawings. It also proposes to animate them by moving your various layers around. User account creation is seamless and its community is quite active.

drawering-gif.gif

That about does it for now. There are certainly other only mandala creators out there. I haven't gone past the 2 first pages of my googles searches.

If you find any others, please let us know.

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.

The social network conundrum

Social networking is a tricky business.

I started our first post on Tumblr because it was engaging. Plus using a platform to write stuff on that already harbors a community also makes sense. But there is too much noise on Tumblr. I find it irritating.

I had been thinking about using Squarespace for the no bs sober design side of it.  Might keep Tumblr active too, just to see if I can leverage it's peeps to get to know more about Mandalagaba.

Diving into social media marketing shenanigans is tougher than I thought. At first we only wanted to concentrate on Instagram just to share the mandalas our users we’re creating and generate some awareness for our project. Then I realized I needed a Facebook page out of being struck by social-media fomo. Fomo means “fear of missing out” just in case (anyone investing in cryptocurrencies knows this acronym well enough). So my fomo syndrome is caused by wanting to reach as many people as possible. Not out of wanting to be popular but rather wanting to leverage our chances to attract eyeballs. Instagramers are not necessarily on Snapchat, nor are Facebook people on Twitter. Back in the day we were all on MySpace. Made things simpler. Communities can cross borders but they like sticking to their guns. In any case, I am feeling slightly overwhelmed by how many social networks we are tackling.

Here’s the current mapping of MandalaGaba’s online presence:

- Instagram: https://www.instagram.com/mandalagaba

- Facebook Page: https://www.facebook.com/mandalagabazen

- Twitter: https://twitter.com/MandalaGaba

- Deviant Art: https://mandalagaba.deviantart.com/

- Imgur: https://imgur.com/user/Mandalagaba/submitted

- Gfycat: https://gfycat.com/@mandalagaba

- Pinterest: https://www.pinterest.fr/mandalagabazen/

- Tumblr : https://mandalagaba.tumblr.com/

- Youtube: https://www.youtube.com/channel/UCsI0ggJHtMeBp0IQFht2eTg

I don’t think this is overdoing it. What this certainly is though is a pain in the ass. I mean maintaining everything in an orderly fashion and on a daily basis. As of today this is still something we have yet to accomplish. I'm not that consistent for various reasons, the main one being that I'm in my mid-thirties, got an active social life, a full-time job and other projects on the side.

In any case, there's a learning curve to maximizing what we get out of each one of these sites, and that too is a pain, but the bottom line is to post regularly to keep things alive. That basically means having a daily routine where you go from profile to profile to post your content. I know platforms out there exist to manage multiple accounts in a single interface. I've tried a couple already in trial mode (like AgoraPulse nd HootSuite). Didn't cut it for me for reasons I won't get into here. I used Iconosquare for 3 months for Instagram postings. Was cool but it only deals with Instagram, which is awesome if that's your main thing. They have got several features that others don't, mostly in on the analytics side. But I needed something that could manage other services so I looked for something else. I stumbled upon this post from Buffer's blog (who are one of the main actors in the social media management game) that actually convinced me to reconsider my position. I'm easily influenced.

This blog post has actually been under construction for about a month and this gave me time to test Buffer these past weeks. It's really cool and I stopped my subscription on Iconosquare. Not much to add on that end. It just works and cross-posting on the various social networks they propose is easy. Too bad they don't integrate with Tumblr, or even Giphy, Gfycat and Imgur. Have a hard time understanding why it's not possible to find one soft that manages every single one of these platforms.

Welcome to the MandalaGaba blog

In this here blog we share whatever crosses our minds regarding mandalas, MandalaGaba, tech, art, stuff related to what we do or are trying to do or, what we're in and what we looking forward to getting into.

Here we also share content such as:

  • Images and videos of awesome mandalas our users created as well as images and video we produced,
  • Our Changelog that we are going to try to keep up to that (essentially a Changelog is a place where you publish all the worthwhile tech updates we bring to the MandalaGaba platform),
  • Our tech Roadmap where we will share what we are working on and what we planned  for the future in terms of features, functionalities and so forth.

We believe in transparency. It's always interesting to see what a project has in store for you. It also forces us to stay focused on what we want to achieve.

In any case, we're gonna try to make this blog interesting in one way or another.