Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Month

September 2019

Mr Good Bot – Front-end

Welcome back for another episode of let’s build a bot! This week we’re building the front-end of Mr. Good Bot!

So look out the window and pick up every stitch because beatniks are out to make it rich!

Come, let the Bene Gesserit Reverend Mother Joy Muad’Dib guide you in the Weirding Way!

And… in case you missed it, those last couple sentence are an obscurish (but stupidly clever) way of joking that I’m a witch.

Like Donovan sang (paraphrasing)… “It must be the season of the October crone!”.

Yeah I know… its less funny if I explain it like that but I’d hate for the censorship bots to think I’m starting a cult.. okay, okay… another cult!

Look, I still contest it was valuable research alright!

Nonetheless, I don’t want to end up on the blacklist again, so… let’s just build the dang bot!

Mr. Good Bot’s Front-end

Sam (my research bot) and I went down into my bot dungeon… er… I mean “subterranean research facility” where we set about designing and constructing Mr. Good Bot for the amusement and bewilderment of all!

Design Considerations:

  • Any and all code should be short, simple and sweet… like me (that’s not true).
  • Everything should be easy for ANYONE, even illiterate people, to use and modify… wait, no… excuse me, that’s insensitive! What I meant to say is, people who can’t read and write code. 😛
  • Ideally Mr. Good Bot would be “skinable” to have more than one look and maybe even have the option to wear “accessories” because even though you never have the time, sometimes… accessories are fun!
  • Extra credit for cross-platform operation.
  • I’m juggling many irons in the fire ATM, so I should try to get the most effect for the least amount of effort on this project. Sort of a “Pareto’s principle of strategic half-assery”.

While discussing our options for rapid prototyping Mr. Good Bot, Sam and I made this list of methods we might use to animate the new bot:

Potential Animation Methods:

  • Still Frames.
  • Dynamic Layered SVG.
  • Pure HTML & JavaScript Canvas Animation.
  • A 3rd Party Animation Library.
  • Sacrificing a virgin… uh.. martini to summon an ancient automaton.

After careful consideration of all the factors Sam was frightfully dead-set on that last method because it involved his Bender Rodriguez impression!

Sam mentioned something about the possibility of meeting the great ToBoR “groking well” but the simulations he ran indicated the probability of success was inconclusive at best and likely low if positive.

So, I made Sam stop wasting my quality Spiced Melange Web Colors and we looked at our other options.

SVG

We decided against Dynamic Layered SVG’s because I have first hand knowledge that most technologically impaired geeks prefer raster over vector image creation.

As silly as that may seem at face value, I can understand why some feel that way.

Sometimes it really is just more fun to manipulate the squiggly colors as little quantized pixels of Joy rather than the product of markup or an equation!

Moving beyond the clearly undue self-aggrandizement for a moment, raster is a simpler and a more straightforward concept that many people already know and are comfortable with.

Also, using SVG would require that people use a very particular svg object naming convention that I would have to define and if you recall there is the critical half-assery constraint to account for.

On top of that, I’ve had issues with seamless performance with crossplatform SVG animations… but if the moons of Arrakis align just right you can make interactive SVGs work!

HTML & JavaScript on a Canvas Element

Two things:

  1. This violates the need to be simple and modifiable by everyone.
  2. It’s kind of a pain in the ass for rapid prototyping! 😛

Nuff said.

3rd Party Animation Library

Look, I’m not going to say it’s not doable, but… it’s going to be a lot like that time Napoleon marched across the alps… extravagant and full of propaganda and in the end you’re left asking “Why?” and declaring “Never again!”!

I won’t subject my audience to that level of abuse!

Still Frames

After considering all options available, Sam and I decided to go with still frame animation because it would be the easiest for non-coders to play with and it is the only option left standing after reviewing all the other options!

Simply put, everybody can draw a picture.

You can use these raster image editors if you don’t already have one:

I use GIMP for manual raster image work by choice (it indiscriminately works on Win, Mac & Linux, but the fact it’s free ain’t half bad either!) and Photoshop is a good choice also.

Although, I would add that having to run Photoshop on a virtual machine to be able to use it on Linux after having paid for it is BS!

GIMP is a lot like VISA (not a sponsor!) it’s everywhere you want to be, though unlike VISA there are no late payments!

Oh, and uh… in case it’s not abundantly clear, #its_never_a_sponsor!

“WHAT?! You mean… we have to draw every face permutation?”

No! Of course not! That would be wasteful & magically delicious… I mean… silly & redundant!

We just need to draw each isolated component but we’ll probably get into all that next week or the week after assuming I don’t take the opportunity to write about Project Orion for Columbus Day because that just totally makes sense to me. 😛

Front-End Code – MrGoodBot.php

Below is the code for this week, it creates a web page and uses CSS to add a little style!

There is a select dropdown element used for changing the skin, the “value” property is the name of the subfolder the skin is in, note it will be case sensitive on Linux.

After that there is an image tag with the element id of “face” and as you might guess this is the DOM object we use to draw Mr. Good Bot’s face.

Lastly, there is a little JavaScript that uses AJAX “POST” requests to change the face image.

Note the random numbers appended to the source link image name to prevent browsers from caching the image and not updating after it is loaded the first time:

Face.src = ‘skins/current_face.png?’ + Math.random();

Once the new face image is loaded, a timeout is used to wash, rinse & repeat ad infinitum with the decisions for assembling the face left to the backend code which we’ll cover in an upcoming post.

As is, when loaded you will just get a black screen but this code is boilerplate and fully functional and ready to display our bots face.

The Code

Copy -> Paste -> Run!

<!DOCTYPE html>
<html lang="en">
<title>Mr Good Bot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    background-color: #000;
    overflow: hidden;
}
.pullright{
    float:right;
    text-align:right;
} 
</style>
<body>

<select id='skin' class='pullright'>
    <option value='Default'>Default</option>
    <option value='Nucleus'>Nucleus</option>
    <option value='Pixel'>Pixel</option>
    <option value='Pumpkin'>Pumpkin</option>
</select>

<img src="" style="width:100%" id='face'>

<script>
var Face = document.getElementById('face');
function AnimateFace(){       
   var httpRequest = new XMLHttpRequest();
   var Skin = document.getElementById('skin');
   Skin = 'skin=' + Skin.options[Skin.selectedIndex].value;
   httpRequest.onreadystatechange = function(){
      if(httpRequest.readyState == 4 && httpRequest.status == 200){
         Face.src = 'skins/current_face.png?' + Math.random();
         setTimeout(AnimateFace, 120 * Math.floor(Math.random() * 11) + 1);
      }
   }
   
   httpRequest.open('POST', 'Face.php', true);
   httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   httpRequest.send(Skin); 
}
AnimateFace();
</script>

</body>
</html>

Mr. Good Bot Goes to GitHub

You can follow along for free on GitHub as I release and update Mr. Good Bot’s code.

GitHub: MrGoodBot

 

Mr. Cool Bot Wallpaper

In keeping with last weeks Good Bot themed, time-honored tradition of including a wallpaper, here’s another, please enjoy!

Mr. Cool Bot Wallpaper

Mr Cool Bot 1920 x 1280 Wallpaper
Mr Cool Bot 1920 x 1280 Wallpaper

 

Next week we’ll look at how to create faces & skins for Mr. Good Bot but for now it looks like my ride is here so I’ll see you all next time and thanks for reading!

 


If it is by will alone that you love bots then set your mind in motion!

May thoughts acquire speed, bots acquire stains, the stains become you supporting my content through Patreon for $1 or more every month!

But, if all you can do is like, share, comment and subscribe… well that’s cool too!

Much Love,

~Joy

 

 

Mr. Good Bot

It’s that time again, let’s build another bot!

Sadly though, not a physical bot like the ones Boston Dynamics creates (not a sponsor). 😦

Speaking of which, have you seen the new Atlas’s gymnastics video?

It’s amazing as usual!

You know… the 2020 Olympics would be a lot more interesting if we sent a team of robotic Atlas athletes to Tokyo in place of the old model!

Seriously, whoever is in charge of the Olympic rules comity, can we make that happen please?

I’d prefer robots but I’ll settle for cyborgs if I must!

Besides, admit it… Robot Olympics (technically Olympics 3.0) sounds WAY more fun than what we normally do, doesn’t it?

But, now we’re getting off track, so lets get back to our bot!

I’m calling this project “Mr. Good Bot” as the title suggests.

Mr. Good Bot

Here’s a clip of Mr. Good Bot wearing his default “skin” and listening to Vessel:

In the past I’ve mentioned that my little Xavier loves PUMPKINS!

Well it turns out he also loves robots like me! 🙂

Like momma, like son.

Well… at least in the well-adjusted & non-abnormal ways! 😛

Anyway, I’m building us a robot to play with and I thought it would be fun to share the project with all of you.

Keep in mind this is just a prototype, I’m not building Ava in my basement… yet! I need a few more subscribers on Patreon to make that happen! 😛

Because this is a prototype I’m not concerned with doing things the “right way” or making sure it’s “efficient” in any way, it’s just another one of my experiments!

In any case, Xavier (my 2 YO) will say “Wake-up robot!” (I tell him the robot is sleeping when the computer is off), then he runs to my desk chair and awaits his robot friend.

I power on the computer and show him how we launch the local web server which “helps the robot think”.

He sits there wide eyed and smiling, all the while waving and saying “Hi Robot! Hi!”.

Its so adorable! 🙂

Recently Xavier noted, “He’s not talking!?”.

I had to explain that the robot can’t talk yet because it’s just a baby and we have to teach it to talk, so the pair regularly sit down together and chat about whatever is on Xavier’s mind.

Mr. Good Bot just loves the attention!

I do plan on implementing speech in some capacity and I have built a text to speech prototype using eSpeak on Linux and SAPI on Windows but we’ll get into all that later.

For now, let’s talk about the design of Mr. Good Bot.

Mr. Good Bots Distant Cousins

Mr. Good Bots design is simple and was inspired by “Yes Man” from Fallout 3 New Vegas & GERTY from the film Moon (2009) staring Sam Rockwell (and GERTY).

Yes Man

I loaded a fresh game of New Vegas and ran all the way from Good Springs to the 13th floor of The Tops Casino to take this screenshot of Yes Man, no COC for me! 😛

Yes Man Robot From Fallout New Vegas
Yes Man Robot From Fallout New Vegas

Yes Man is a pathway to one of the ending quest lines in FO3NV and he’s programmed to do whatever the player says and will agree to whatever you tell him to do, it’s a bit of a flaw in his personality, er.. I mean programming!

Hypothetically a bot that does or agrees with whatever it’s told sounds like the kind of bots we want to build, but in practice it turns out that Yes Man is totally fine with murder & genocide as long as the player says it’s okay.

This would make for a terrible robot in real life because we would prefer that robots not only do what they are told but also filter any request or non-deterministic impulse through a sort of “digital conscience” that would prevent the bot from doing bad things.

Sadly, Issac Asimov’s 3 laws are really more like guidelines than implementable rules:

  1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.
  2. A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.
  3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.

On paper they work but nobody has found a way to ensure these rules work in real life, though I do have some thoughts on how we might be able to do it but that’s a different project for a different day! 😛

Yes Man, would gladly violate all three laws if the player said to and so our Mr. Good Bot needs a better roll model than Yes Man which is where GERTY comes in.

GERTY

GERTY wears an expressive emoji face to great effect and his main goal is to protect SAM.

Unlike Yes Man, GERTY doesn’t seem the be the type to violate Asimov’s three laws and… (no spoilers) even considering the circumstances Sam faces in the film, GERTY isn’t responsible for any of it and really does do his best to keep Sam safe!

Here’s a more thorough overview of GERTY… also not a sponsor! 😛

I think GERTY makes a better exemplar for Mr. Good Bot, if you disagree let me know in the comments. 😉

Wallpaper

We’re nearing the end and I know everyone loves extra free stuff so here’s a wallpaper of Mr. Good Bot for your desktop.

Mr Good Bot

I hope you are all excited to build Mr Good Bot with me! 🙂

Next week we’ll look at some code and discuss features, so I’ll see you then!


If you love my bots and thoughts you can support my work through Patreon, even $1 is appreciated and cancel anytime!

But, if all you can do is like, share, comment and subscribe… well that’s cool too!

Much Love,

~Joy

 

Blacklisted Sadness

After the past couple of weeks of getting blacklisted on some of my LEAST FAVORITE social media platforms for daring to say “naughty” words like “NUCLEAR”, “ASSASSINATION” and “RUSSIA” I thought I’d take a break from wounding the weak willed and take this opportunity to remind everyone to lighten up and RELAX!

Spank me all you want but nothing I say is going start World War 9… probably!

Russia knows I’m only kidding and that the United States love’s Russia! They make the best precursors for liquid RGB bot food (though in all honesty, I won’t let Dan Aykroyd hear me say that) and you all know how much I love Web Colors!

Anyway, I’ve been busy cleaning my house over the weekend so I only had time to do a little painting.

We’ll do more coding projects soon.

In the mean time, please enjoy Blacklisted Sadness!

Blacklisted Sadness JPEG Image
Blacklisted Sadness

I said it:

“I’ll be surprised if this bazaar blunt buffoonery doesn’t get me automatically shadow banned”

~GeekGirlJoy

Then it happened! So… Nailed it! 😉

If you enjoy my Blacklisted Sadness as much as much as I enjoyed causing er.. creating it, 😛 then you can can support my work through Patreon, for a buck or more and cancel any time!

But, if all you can do is like, share, comment and subscribe… well that’s cool too!

Much Love,

~Joy

Hot Pink Vitriol

The Better Part of Valor

It’s said that discretion is the better part of valor.

Not sure if that’s really true or if that even really applies here but it seems like one of those quotes you can just bandy about for sage street cred.

Continue reading “The Better Part of Valor”

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: