Category: I.T.

202 Articles
aesthetics, I.T., web development

It’s been a while since I pushed a feature to Mandalagaba worthy of a post.

I just pushed a tool I call “Fibonacci Assist”. It’s meant to help you draw Fibonacci spirals by overlaying the proper framing based on the beginning of your penstroke.

I was reminded of the existence of this sequence and its ties to nature reading the most excellent children book: Swirl by Swirl. The book is simply magnificent and so I thought I’d do my part to help bring into the world more Fibonacci spirals.

I have yet to play with it using a stylus.

3D modeling / printing, aesthetics, I.T., plotters

Well so, I fell into a very deep rabbit hole. The world of pen plotters… A year in, I finally have some good results. After several prototypes of Gondola plotters (V-plotters) and regular tabletop plotters. I’ve homed in on a set of designs, hardware, electronics, and algorithms to think I can make a small difference in that world. I still need to iterate a little but I’m hoping to release each plotter as a DYI projects in 2020. Maybe I’ll even sell my making them for others. Of course there will be integrations with Mandalagaba because that just makes sense.

Now there are several such plotters one can buy or build for a wide range of prices. And they all have a very shitty software stack. This is where I believe I can make the biggest difference.

As with building houses, it’s enormously relieving to finally see into the real world a model you’ve been immersed in, CADing it for a year.

I’ll skip talking about the long series of challenges I ran into building this. It’s really, really nice to see a long plot finished to perfection knowing that finally, nothing is wrong. I’ve learned a lot along the way.

There’s a bazillion pen plotters on Thingiverse, I’ve used some of them as stepping stones until I was ready to finally make my own top to bottom. As I said, software is where I think I can make the biggest difference. I’m a Raspberry Pi aficionado, and this opens the door to a sophisticated software stack (web servers, HTML canvasses, format conversion, penstroke optimization, live link with Mandalagaba). I found not a single plotter using a Pi, in fact I found very few projects of anything using stepper motors with a Pi. I had to do some serious trail blazing to step a motor reliably.

Here is for example a pen stroke optimization algorithm I developed to speed up plotting.

 

The base, drawing penstrokes as they come. “Empty” travel going from one penstroke to the next without the pen drawing: ~36437 (relative pixels).

The next penstrokes is the closest. Empty travel ~15820, 0.43 compression ratio.

The next penstrokes is the closest, but consider its beginning as well as its end, draw the penstroke reversed if it was the end which was closest. Empty travel ~12467, 0.34 compression ratio.

 

Now for the eye candy 🙂

I could watch this for hours, and I did.

Of course the efficacy of this algorithm depends heavily on the model to be drawn. I found that anything coming from Mandalagaba tends to benefit enormously, especially tessellations. And it makes sense, for every penstroke drawn, the repetitions occur throughout the canvas and they show up in that order even if you drew in a very localized area. The example above comes from the most excellent turtletoy.net.

More to come very soon on the great world of plotters…

I.T., web development

Someone ripped an early version of Mandalagaba, removed any mention of it, translated it, and is hosting it as their own.

Feels like I somehow made it as a developer to have my work stolen :). And honestly I don’t really give a crap I don’t have too many qualms about using code myself.

Today’s Mandalagaba would be very hard to reverse engineer, it’s way more complex, has more server components, and the client code is more obfuscated. In my opinion that’s how you retain control over your work, at least as a coder.

 

aesthetics, miscellaneous, web development

This Dragon which found its way into the Mandalagaba digest. I haven’t seen anyone really touch recursion yet, and then this shows up.

This is my absolute favorite thing about adding features to Mandalagaba: seeing them used in ways I didn’t even realize were possible. Here recursion is used to create ethereal traits. Of course mirror symmetry is used for the face too but that I had seen before :). The hours spent hammering out recursion are all of a sudden, absolutely worth it.

The artist is here: https://www.instagram.com/laralaubert

I.T., web development

It’s only available on the “pro” facet of Mandalagaba. Oh yeah, Mandalagaba has been broken down into several facets for the purpose of simplifying and focusing activities. The facet where all the brain hurting stuff goes is the pro one. Pro is where one can draw a “radially symmetrical tessellation recursively”.

I tried to keep the menu simple and icon based but it’s still the most complex. Thankfully we have words to describe all that these things do.

Along with recursion, https://plant.mandalagaba.com is out too, using recursion, symmetries and a newly developed center placement to create plants & trees. This one still needs a bit of polish but the main idea is working. I touched a lot of the core engine of Mandagaba to introduce all this, development went pretty well. It was nice to test the flexibility I gave myself during last Winter’s rewrite for a major feature add.

 

I.T., web development

I still have a lot of details to figure out but I almost have recursion nailed. It’s a pretty brutal mental exercise to combine it with the existing radial symmetry & tessellations. As I’ve said before, one of the effects I seek in particular is that of a growing plant. In fact, I plan on dedicating a facet of Mandalagaba to guided drawing for just that. The adjustment of parameters which is very specific for getting a plant will be taken care of, and only the fun parts will remain. A perfect tool for the slacktivists who wants to feel like they’re helping greening up the world while staying glued to their screen.

I sometimes feel bad that so many people find stress, anxiety and even depression relief drawing mandalas on Mandalagaba. I feel like an enabler for giving them such a meaningless escape valve, on a screen at that. As much as I love a plant growing effect, I’m worried people will use it to get their virtual green fix while further removing themselves from nature. Get off your screens, grow an actual plant if you want to grow a virtual one.

I.T., maniacal paranoia

Here’s a method for having several browser windows proxying through several countries concurrently.

Demo

[mejsvideo mp4=”http://ben.akrin.com/videos/omnipresence.mov.mp4″ ogg=”http://ben.akrin.com/videos/omnipresence.mov.ogv” webm=”http://ben.akrin.com/videos/omnipresence.mov.webm” poster=”http://ben.akrin.com/videos/omnipresence.mov.jpg” width=”640″ height=”360″]

Working Principle

Requirements

  • a VPN service supporting OpenVPN as a client (this example uses vpntunnel)
  • Docker
  • Firefox
  • MacOS isn’t a requirement per se but this guide & accompanying scripts are written for it.

Setup Steps

  1. Download this package containing Dockerfile build instructions & some scripts.
  2. Populate the directory “openvpn_config_files/” with the ovpn files from the VPN service you use.
  3. Edit the script called “vpn” and replace <VPN_SERVICE_USERNAME> and <VPN_SERVICE_PASSWORD> with your username and password.
  4. Run with “./omnipresence.sh <name_of_ovpn_file>”
aesthetics, I.T., web development

I’ve been working on implementing recursive drawing into Mandalagaba. There are many, many tunables which can be implemented to facilitate recursive drawing. It’s tricky to pick the ones which make for a fun drawing experience. One of the effects that I seek in particular is that of a growing plant.

all out geekery, I.T.

With Markov chain based random word generation, I essentially have tables of the probabilities for letters sequences. With this I’ve always wanted to know what the most English word was. The word with the highest probability of each letter following its predecessors.

I finally bit the bullet and produced it; well them, because it varies depending on the corpus & depth used. All in all it’s not that impressive, just kind of cool to know. I don’t know what I was expecting, some amazing word that would rock my socks off.

Without further ado, here they are:

Corpus Depth Wordiest Word
basic_english_words 1 st
basic_english_words 2 st
basic_english_words 3 struction
basic_english_words 4 statement
basic_english_words 5 store
unabridged_english_dictionary 1 prerererererererere…
unabridged_english_dictionary 2 press
unabridged_english_dictionary 3 press
unabridged_english_dictionary 4 preconcer
unabridged_english_dictionary 5 preconcertification
I.T.

Download

bucket_upload_1.0.php.gz

Google setup & use

1- Create a storage bucket for the script to upload into

 

Go to the Google Cloud Console, click on “Storage”, “Browser”.

 

“Create Bucket”

 

Give it a name and click “Create”.

 

2- Create a service account for the script

Expand the “IAM & admin” section, click on “Service accounts”.

 

Click “Create Service Account”.

 

Give it a name, check “Furnish a new private key”, JSON, and click “Save”.

 

Save the JSON credentials file which you are prompted to download into a safe location.

3- Grant “Object Creator” permissions on the bucket to the service account

Go back to the storage bucket you created

 

Edit its permissions

 

The JSON credentials file you just downloaded contains the email for the service account you created, copy it.

 

And paste it into the “Add members” field, select the permission to be “Storage Object Creator”. This service account doesn’t need permissions for anything else than dumping files in there. Not even viewing them.

 

Optional: if you want the files uploaded by the script to be publicly viewable, add the permission “Storage Object Viewer” to the user “allUsers”. Accounts are all referred to by email in Google land, but there exist special keywords such as “allUsers”.

Done with the Google setup 🙂

4- Running the script

If you haven’t already, download the script at the top of this page. Decompress it and edit the config at the top.

$credentials_file_path is the full path to the JSON credentials file you got from Google when you created the service account. It should be a secure location.

$destination_bucket_name is the name of the bucket you created

$access_token_cache_file_path is a location where Google’s OAuth tokens are cached, it too should be a secure location.

Run the script with only 1 argument being the file you want to upload. The script can also be included and used outside of CLI, in that case simply call the upload( $filename ) function.

The script returns the URL to the file in the bucket.

Voilà:

I.T., web development

The millionth penstroke on Mandalagaba since the code rewrite last February

There’s more data I’d like to pull out of this. For example the average length of a stroke, average time, how many human lives where spent drawing mandalas, et cetera :).

I.T., web development

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.

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.

2018-10-04 – edit – added fill algorithm #5 which proposes an alternate approach to filling pixel by pixel. Depending on your project it may or may not serve your needs better.

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

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.

Click to change color / pop-out 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: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.

Click to change color / pop-out 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.

Click to change color / pop-out 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.

Click to change color / pop-out 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.

5. The Holier Grail?

While #4 is fastest algorithm for filling pixel by pixel, I found myself in the need to have a fill operation in for form of a path which is filled with the native HTML5 canvas capabilities. This algorithm is a bit different from all the other ones in that it doesn’t go through every pixel and fills it. What it does is pathfinding to draw the outline of the shape of be filled, and then simply calls the native canvas fill() function. It does come with certain drawbacks and so I wouldn’t recommend it unless you specifically need this sort of approach.

Click to change color / pop-out link

Feel free to ask questions in the comments.

all out geekery, I.T.

The Nosy Monster has been sitting on my desk idle for a while now, I’ve always wanted to work on it a bit and make it more reactive to web input. Finally, I bit the bullet and it’s now a lot smoother to operate. Instead of clicking for pre-timed commands, the start of a key press actuates and the end stops. With a websocket communication layer and a socket python command server, the commands find their way from keyboard to motors super fast.

To account for wireless imperfections and AP hopping, I also wrote the logic such that there isn’t a “start” and a “stop” command. Instead there is only a “start” command which gets sent every 200ms and if it isn’t heard every 300ms, Nosy Monster stops. This ensures it won’t be locked in a state of actuation which could lead to perilous situations.

I intend on polishing the code & publish a tutorial that hopefully a 7 year old could handle.

The Nosy Monster was deployed at the Dartmouth Thayer School of Engineering’s open house. I didn’t know how robust it was going to be under sustained kid use.

It turned out to be a huge hit, I let the kids drive it around a bit and then I’d throw the Nosy Monster in another room where they would have to find their way around with no visibility other than the camera. It performed flawlessly through the evening.

It’s always an enormous point of satisfaction to see kids get into something you made. Once I sent the RC car “to Mars” (the other room), the kids were really focused.  All but one got stuck and never came home. I should have had a prize for the one, but what’s next, participation trophies?

With a much more usable and reliable toy, I decided to setup the same kind of maze in a house room under construction.

I moved the camera up on a stick for a better angle of vision, the next model will have a fisheye camera.

Without a reverse, it takes a few tries to get through the maze without getting stuck. He had to learn to be careful.

I’m bubbling up with ideas  of cool things to do with the concept and acquired techniques. From a solar powered exterior land rover, to battle bots.

Theme by Bloompixel. Proudly Powered by WordPress