Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Month

October 2020

Pathfinder – The Rodízio Contingency

Over the centuries and throughout my travels I’ve come to rely on my compass and a good map to point me in the right direction for my next adventure.

Sometimes my adventure led me to treasures in mysteriously exotic & remote locations, while other times I found myself among friendly and awfully generous cannibals who wanted to invite me to dinner… of course, it’s always best to politely decline such invitations because if anything I certainly live by the rule:

“If I’m on the carte du jour as flambé, I’ll skip the buffet and run away because I’m no entrée!”
~GeekGirlJoy

Hmmm, come to think of it, that might be the best piece advice I’ve ever given on this blog and if you agree consider supporting me through Patreon! 😉

In any case, despite the occasional fears I’ve held over the last few millennia over potentially becoming someones late-night heartburn, I’ve kinda always known that no matter how bad things got while exploring, I’d be okay because beyond a good compass and a fragmented (then taped back together) map with a sweet X scrawled in blood somewhere on it… I possess a secret tool that all the great explorers down through the ages have relied upon and today, I’m going to share it with you!

But… before I do, here’s today’s wallpaper!

The Rodízio Contingency Wallpaper
The Rodízio Contingency Wallpaper

The Pathfinder

From Allan Quatermain to Amerigo Vespucci, Erik the Red to Captain Nemo and even Jill of the Jungle… all notable explorers have relied on an enchanted automaton totem called “Pathfinder Stones”.

The stones are first consecrated with the live blood of a dead turnip and when brought into close proximity of their owner and a target on a map, will glow to show a path from where you are to where your desired destination is.

Which does bring us to the topic of today… I transmuted one of my sets of pathfinder stones into a digital form using the uh… “Quantum FANN Effect” and an ancient shadow daemon called JavaScript.

Schtick Aside

Okay, so what I did was use the JavaScript version of FANN to deploy an implementation of my original Pathfinder on GitHub pages.

The cool/interesting thing about FANN.js is that it uses asm.js to make the compiled FANN library available inside a web browser.

What this means is that a working version of Pathfinder is now online for you to play with (link blow) however…

There are two fairly large downsides to deploying with FANN.js instead of PHP-FANN:

  1. You cannot save the ANN after training.
  2. You cannot load a previously trained ANN.

These limitations mean that Pathfinder must be trained once every time the page loads and this does limit the size and complexity of ANN’s that are deployable using FANN.js.

The thing is it may still be possible to save the ANN by using the supported FANN lib methods/functions like I did when I built the FANN-Neural-Network-Visualizer to manually query the ANN object and then format/export the necessary information as a string/plain text because the FANN ANN.net save file format seemingly isn’t all that different from an .INI file (though I am uncertain if this is universal in all language implementations of FANN) and it’s something I plan on playing around with in the future.

Far be it for me to be the barer of fake news… turns out… it actually helps to read the documentation thoroughly and not just skim it and then do a search for keywords! 😛

FANN.js actually DOES have a save function but it doesn’t follow the FANN Lib reference manual of “save_…” convention and instead implements a JS Object.export().

I understand why they did that… and it does kinda make sense in the mixed up JS world but… it still holds to my “anti-wheel” digression argument that you haven’t read about yet.

Having said that… I promise to ritually self-flagellate by Gothic torch light using the sharp side of a motherboard!

I really should have done a better job of reading the docs! :-/

Why use FANN.js over PHP-FANN

Far be it for me to ever sing the praises of JS over PHP however in order to deply a neural network using PHP you have to have a server and the ability to compile & install PHP extensions and that costs money whereas GitHub Pages is free to me and to you but it doesn’t support the more robust server architecture that PHP requires so using FANN.js allows me to deploy my bots and AI in a way that let’s you actually use them instead of just reading about them.

All things being equal, I would still recommend the PHP version of FANN however the JS version does work and with a little improvement could become a viable deployment option!

Having said that, what I am really interested in with FANN.js is that JavaScript has a direct path between the browser environment via the WebGL API to the GPU whereas with PHP it is technically possible to commune with the GPU, however in practice it’s not generally done and until the PHP dev’s get their head out of their asses and start thinking out side the box (PHP is now mostly a general purposes language so start treating it like one…), PHP+GPU stuffs isn’t going to be the easiest pickle jar to crack using PHP and the existing available options though again, I’m not saying it is impossible either.

So, in the future I intend to see if I can’t use FANN.js + WebGL shaders to make FANN training faster (no promises) and then hopefully export the ANN.net file so that we can use/deploy the GPU trained ANN in a PHP environment.

Play Stump the Neural Network

So the online version of the Pathfinder network learns/re-trains from scratch every time the page loads and as such it can’t spend unlimited amounts of time training which is normally not a concern because even if your 1000 layer celebrity deep fake porn ANN takes 100 CPU years to train (i.e. 1 CPU = 100 years, 100 CPU = 1 year etc… ) it isn’t a major concern because likely you are buying your compute from Jeff Bezos or Bill Gates and they have plenty of underutilized computers laying around waiting for you to rent a few FLOPS.

In the end, you save the ANN model so you can use it immediately when you want it… but FANN.js says “Nah I’m good! Who needs to do something as convenient as save or reload!” (then again (and mostly off topic) JavaScript tends to seem to like reinventing round wheels as square uh… anti-wheels) but in any case…. the small training time and the inherit random nature/path of gradient decent the final neuronal weights will always be different and when the ANN fails (hence the “stump the ANN”) it won’t always take the same path (between page reloads).

This is easier understood if I just show you.

Given this input

I got this output

Note that diagonal steps are valid so this path is technically valid but the path is far less efficient than the straight line between the two points that a human would draw/walk.

Reload the page (not required unless you are playing with this idea) and try again…

A different Path was found.

Neither was optimal but a path was found and more cells than necessary were visited.

Here’s some additional examples:

Input

Pathfinder ANN Output

Input

Pathfinder ANN Output Back tracking… ugh!

Input

Pathfinder ANN Output

I believe that’s called the sidestep slide!

Input

Pathfinder ANN Output

I mean… it’s not the path I would have chosen but it made it! 😛

If you’d like to try your hand at stumping my Pathfinder you can checkout the live demo here:

Pathfinder Online: geekgirljoy.github.io/Pathfinder_Neural_Network/

You can download all the code (for free) here:

Pathfinder Code on GitHub: https://github.com/geekgirljoy/Pathfinder_Neural_Network

And with that, have a great week everyone.


If you like my coding projects, art, bizarre opinions and writing style… consider supporting me through Patreon.

But if all you can do is Like, Share, Comment and Subscribe… well that’s cool too!

Much Love,

~Joy

Chromatrons Juxtaposition

Well… I’ve more or less finished the Chromatron now so you can all not use it at your latest major inconvenience… yay!

When I published Hue Going My Way, I added the ability for you to play with a single color using rotating 3D cubes, kinda like a bad Johnny Mnemonic knock off and at the end you get a fully customized report like one of these:

Note that I added the background after the fact cuz um…  so perdy!

But now, due to mass underwhelming demand, though still upon a request… 😉 I’ve also added the ability to compare colors by selecting them from images.

Groundbreaking?? Most definitely not!

Still, it kinda works and as prototypes go… that ain’t half bad!

Now, I hear some of you crying:

“But I don’t have a picture to compare with and I don’t even know where to get one!!”

~Some of You

Well don’t worry, because as always I’ve got you covered! 😉

Given the incredibly rare nature of digital images and the extreme difficulty in obtaining them I have created some imitation digital images that you can use with this prototype.

Obviously, if these were a real digital images I’d have to charge you like… a whole bunch but since they’re just imitations I can manufacture them cheap enough that I can just give them away to everyone!

So, here are your complementary genuine imitation digital images, chew carefully because there are sharp points.

Genuine Imitation Digital Image
A Genuine Imitation Digital Image

I was going for a “Cyberpunky” feel and clearly, I half-assed it, but only so I could have the time to half-ass the graphic novel version as well!

Genuine Imitation Digital Graphic Novel Image
A Genuine Imitation Digital Graphic Novel Image

And while I was half-assing those two images above I decided to half-ass a background for the color analysis group image too, really making those two images together two-thirdly-assed and what follows then is one-thirdly-assed… but perhaps now I’m getting too technical.

Anyway, I figured some of you might want the background for the analysis image too so here’s that as well:

A One-Thirdly-Assed Background
A Chromatic One-Thirdly-Assed Background

Consequently and thusly certainly as a result of the aforementioned triadic-assery such that, ergo, under the circumstances that being the inevitable subsequent case on account of all the things whence came before and because of this, you can now see that to be the truth.

Damn!! I must have a floating point error again?!

No worries though, I’ll correct that later with a strong neodymium magnet to the head but right now I feel like it’s time to talk a little about the Chromatron before I wrap things up here and yell at all you filthy kids to get the hell off my lawn!

Hmmm… yep!! Definitely a floating point error…

The Chromatron

Here’s the link to the Chromatron App which is hosted through Github Pages:

https://geekgirljoy.github.io/Chromatron/

A link to the Chromatron prototype live preview on Chromatron.
Click for a live preview Chromatron on GitHub Pages.

It will remain available going forward / indefinitely unless I managed to piss-off somebody over there due to my expressing some of my opinions about receiving that award they gave me in which case… I guess I’ll be gettin’ canceled soon?

In any case and while supplies last, if you click the second button (the unassuming gray one with red and blue on it) in the main menu you get a screen like this:

Clicking the “Browse” buttons will let you select images to use for the comparison and you can use the imitation digital images I provided above or you can use your own real digital images if you can find them.

If you want to compare two colors in the same image, just load it twice.

Once the images are loaded the cursor will show a reticle over the image allowing you to select a color from each and when you do, the rectangle element above each image that shows the name will change to a gradient to black of the selected color.

Also once both images have a color selected, a green “Continue” button will magically appear out of thin air at the top of the page as if by the power of digital pixies wreaking havoc in your web browser… click it and the Chromatron will analyze the selected colors and generate an image like this:

You can use the “Save Image” to download the image and use the “Copy as Text” to get something similar to the following:

Your Favorite Colors:

First:
RGB: 2, 219, 255
HSL: 188.538, 100.0%, 50.4%
HEX: #02dbff
Analogous Colors: #02ffa5, #025cff
Split Complementary Colors: #02dbff, #ffa402, #ff025c
Triadic Colors: #dbff02, #02dbff, #ff02db
Tetradic Colors: #02dbff, #2602ff, #ff2602

Second:
RGB: 132, 28, 28
HSL: 0.000, 65.0%, 31.4%
HEX: #841c1c
Analogous Colors: #841c50, #84501c
Split Complementary Colors: #841c1c, #1c5084, #1c8450
Triadic Colors: #1c1c84, #841c1c, #1c841c
Tetradic Colors: #841c1c, #84841c, #1c8484


Chromatron: https://geekgirljoy.github.io/Chromatron/
Created By: https://geekgirljoy.wordpress.com/

How It Works

To keep it simple, the way these color values are derived is by converting your selected color as RGB color space values to the HSL color model… which admittedly is kinda like slathering a cube in rainbow paint made from mathematical unicorn puke and then hanging it up to dry so you can use it’s hexagonal shadow and a wand made out of a vector to scry hidden truths about the mysterious nature of color…HSL-HSV hue and chroma What follows is the typical “Oh Freyja we beseech thee…” and a human sacrifice, super boring technical stuff but why this is useful is because once you arrange color like this it’s easy to “rotate” the color using the wand er… vector and get a new but related hue or “compute” different colors that share luminosity or keep the same color and alter the saturation etc… just mix in a little color theory  and when you are done, convert back to RGB and poof your green eggs and ham are now nachos! Mmmm nachos!

Anyway, all fun stuff for sure but I’m not going to bother to explain it any further because if you care about the details, here’s the wiki article on it: https://en.wikipedia.org/wiki/HSL_and_HSV

Here’s some code in PHP & JS that demonstrates how I did it:

https://github.com/geekgirljoy/PHP/blob/master/Loose%20Code/RGB_HSL.php

https://github.com/geekgirljoy/JavaScript/blob/master/Loose%20Code/RGB_HSL.js

And as for the Chromatron, there are three main files involved:

Index.htmlhttps://github.com/geekgirljoy/Chromatron/blob/master/index.html

This file is what is loaded by your web browser first and it starts the whole process that results in a running app.

Style.csshttps://github.com/geekgirljoy/Chromatron/blob/master/assets/css/style.css

This file contains most of the “style” information that makes buttons have a certain size and color etc.

Chromatron.jshttps://github.com/geekgirljoy/Chromatron/blob/master/assets/js/chromatron.js

This file contains most of the real code that makes the Chromatron work.

And with that… please enjoy the Chromatron.


Would you like more free and open source apps like Chromatron? Consider supporting my through Patreon.

I’d like to thank Marcel for his generous and ongoing support!

But if all you can do is Like, Share, Comment and Subscribe… well that’s cool too!

Much Love,

~Joy

Blog at WordPress.com.

Up ↑

%d bloggers like this: