Pixel Bot

   

February 14, 2019

Flex your retro pixel art and animation skills to the world. A chat-controlled robot that lets viewers create large, 24x24 images and animations during live-streams.

Draw pixel art during live-streams.

PixelBot Editor V5 created by LegendEffects. Repository.

Instructions: Draw, generate, copy code, post in chat.

Pixel Bot Editor V5

PixelBot Editor V6 created by LegendEffects. Repository.

Instructions: Draw, export, copy code, post in chat.

Pixel Bot Editor V6

In Development: Prototype 3

Final Release 60%

Reproduction plans (CC BY-SA) and limited release prototypes will be available after final.

Some products purchased through links may earn me a small commission to help fund further inventing to share with you. Thank you for your support.

OVERVIEW:

The idea was to create a large display that lets viewers draw pictures and animations during live-streams. The low resolution, "retro" design makes it easy for people to create and share artwork regardless of artistic talents. 

It has enough power to display 60fps animations, and styled after one of my favorite bots.

I used a modular approach to make final integration easier and keep wiring clean.

Pixelated fish are the easiest fish to care for. Lab 424 emblem courtesy of AdyAce.

Having a dedicated single-board computer in the bot is much nicer than driving it with a tethered PC.

DESIGN NOTES:

  • Used dedicated Raspberry Pi3 running NodeJS to drive the display at full speed.
  • Built 12x12 led modules that connect together. The modular approach is nice for fast expansion with nothing more than connecting the data line in series and making a code change for the number of pixels.
  • To interface with an IRC other than Twitch, you'll need to replace the tmi module with a module designed to interface with other IRC. You'll also have to write interface functions to map the new module to the bot code.

KEY COMPONENTS:

Notes on controlling PixelBot. Select a tab to learn more. All commands can be pasted directly into the live-stream chat field.

NOTE: These commands are left here for those that may want to implement their own image generators. Otherwise, use the latest editor to automatically generate the code.

Draw to 4 panels (less than 500 chars).

  • !pbd.[RLE code for panel1].[RLE code for panel2​].[RLE code for panel3].[RLE code for panel4​]
  • Note: The new 4-up editor automatically generates this for you. Simply export the picture, copy the !pbd code, and paste into chat.

Draw to 4 panels (more than 500 chars).

  • !pbdz.[RLE code for panels 1-4, Gzip+Base64]
  • Steps:
    1. Create your picture and export it from the 4-up editor.
    2. Go to an online gzip+base64 tool (or similar).
    3. Paste in everything after "!pbd." into tool and compress. (That is, do not include '!pbd." in string to encode.)
    4. Copy resulting encoded string as noted above with a "!pbdz." prefix and send.

Animate to 4 panels (less than 500 chars)

  • !pba.[RLE code for panels 1-4, frame1].[RLE code for panels 1-4, frame2].[RLE code for paneld 1-4, frame3]...so on
  • NEW faster and more stable frame animation: Use !pbax in place of above to test it out. No restrictions on speed.
  • That is, you simply stitch the !pbd codes generated by the 4-up editor together with periods.
  • Example (4-frames):
  • Note: This probably only works for very simple animations due to 500 char chat limit.

Animate to 4 panels (more than 500 chars)

  • !pbaz.[RLE code for frames for panels 1-4, Gzip+Base64]
  • Steps:
    1. Create your frames with the 4-up editor and construct them as noted above.
    2. Note: add in timing if you want something other than 500ms (default). EG: 300.4e1a...
    3. Go to an online gzip+base64 tool (or similar).
    4. Paste in everything after "!pbd." into tool and compress. (That is, do not include '!pbd." in string to encode.)
    5. Copy resulting encoded string as noted above with a "!pbaz." prefix and send.
  • That is, you simply stitch the !pbd codes generated by the 4-up editor together with periods.
  • Example (10-frames)

Clear all 4 panels

  • !pbx

Draw random pixels across all panels every 200ms.

  • !pbn.[color][number of random pix to draw:1-576]
  • Example: !pbn.r50 (randomly choose 50 pixels and draw them red every 200ms)

Write and display long drawing/animation on PBOT:

  • !pbw.-[part1] (saves first part of drawing code)
  • !pbw.-[part2] (appends second part of drawing to the first)
  • !pbw.-[part3] So on...
  • !pbs (Show drawing on pixel bot)
  • !pbr (Remove your saved drawing. Use if you mess up appends.)

Drawing Example:

Original Code: !pbd.65e2f9e2f1e2f6e1f3e1f8e1f1e1r1e1f6e1f3e1f8e5f15e.55e2f5e2f1e3f8e1f4e1f4e1f1e2r1e1f8e1f3e2f5e5f28e.51e9f8e1f6e1f1e3r2e2r8e1f6e9f36e.48e8f8e1f7e1r2e3r1e1f8e1f7e8f40e

Write out in two parts then display:

  • !pbw.-!pbd.65e2f9e2f1e2f6e1f3e1f8e1f1e1r1e1f6e1f3e1f8e5f15e.55e2f5e2f1e3f8e1f4e1f4e1f1e2r1e1f8e1f3e2f5e5f28e.51
  • !pbw.-e9f8e1f6e1f1e3r2e2r8e1f6e9f36e.48e8f8e1f7e1r2e3r1e1f8e1f7e8f40e
  • !pbs

Animation Example:

Original Code:

!pbaz.H4sIAAAAAAAAA5WQMQ5DMQhDbxQFCHxyHAY4wL//UH/aSu3QVh08xHp2LHTOYZpcGyLIkkoghyjphF48LdIcegW0A9LgeggFHfAOXIwWOwKUu01rSE4GeH/vEsuxPL2BA18ygGfLAX/N/Lox/t0YHzd2V+jbUtygXWvXi0P0x2IM4GDJGykJ/0teAQAA

Write out in two parts then display:

  • !pbw.-!pbaz.H4sIAAAAAAAAA5WQMQ5DMQhDbxQFCHxyHAY4wL//UH/aSu3QVh08xHp2LHTOYZpcGyLIkkoghyjphF48LdIcegW0A9
  • !pbw.-LgeggFHfAOXIwWOwKUu01rSE4GeH/vEsuxPL2BA18ygGfLAX/N/Lox/t0YHzd2V+jbUtygXWvXi0P0x2IM4GDJGykJ/0teAQAA
  • !pbs

 

Custom Color Maps (Drawings only)

  • !pbdh.[color map].[drawing code]
  • !pbdhz.[Gzip+Base64] (zipped and compressed, Online tool)
  • color map : [char1][#hex1],[char2][#hex2],[char3][#hex3]... (EG: d#df00ee,t#2eff2c,&#ffee00)

Examples:

!pbdh.a#ffffff,b#800080,c#ffff00.13a10e2a10e2a10e2a10e2a10e2a10e2a10e2a10e2a10e2a10e13a.13b10e2b10e2b10e2b10e2b10e2b10e2b10e2b10e2b10e2b10e13b.13c10e2c10e2c10e2c10e2c10e2c10e2c10e2c10e2c10e2c10e13c.13s10e2s10e2s10e2s10e2s10e2s10e2s10e2s10e2s10e2s10e13s

!pbdhz.H4sIAAAAAAAA/0tUTgMDnSRlCwMDAwsDnWRlIG2QlqZnaJxoaJBqRAoB1ALUlgTikkIAtQC1JYO4pBBALUBtxSAuKQRQCwDz/GzQ9gAAAA==

 

Custom Color Maps (Drawings with Custom Alpha)

  • Allows a drawing to layer on top of current drawing on PixelBot with transparent regions.
  • !pbdth.[color map].[drawing code]
  • !pbdthz.[Gzip+Base64] (zipped and compressed, Online tool)
  • Color map : [char1][#hex1],[char2][#hex2],[char3][#hex3]... (EG: d#df00ee,t#2eff2c,&#ffee00)
  • Use "alpha" keyword to specify a color as transparent: !pbdth.b#alpha,y#ff0000... (color b will be transparent).
  • Position of alpha color in color map doesn't matter.
  • If alpha unspecified, black will be used as transparent.

NOTE: These pixel commands may be obsolete for the PixelBot Proto2+. Use the Pixel Bot Editor to control pixels.

!pb1.[color][pix:1-144]

  • Example: !pb1.r50 (make pixel number 50 red)
  • You may "stack" multiple pixel commands. EG: !pb1.r35.b16.w75.y130.p90...

Color codes:

  • Red: r
  • Green: g
  • Blue: b
  • White: w
  • Black/Off: x
  • Yellow: y
  • Maroon: m
  • Purple: p
  • Twitch purple: tp
  • Navy: n
  • Dark Green: dg
  • Teal: te
  • Orange: or
  • Pink: pi
  • Golden Rod: gr
  • Gold: go
  • Khaki: k
  • Cyan: cy
  • Dark Orange: do
  • Orange Red: or

Blinky Pixels: Make pixels blink every half-second:

  • !pb1b.[color][pix:1-144]
  • Example: !pb1b.r50. (make pixel 50 red and blink every second)
  • You may "stack" blink commands to synchronize pixels to blink together. Example: !pb1b.r12.g13.b14...

Timed Pixels: Make pixels draw in sequence every 1/2 second.

  • !pb1t.[color][pix:1-144]
  • Example: !pb1t.r50.b50 (make pixel 50 red, then after 1/2 second make it blue)
  • Example: !pb1t.r50.g51 (make pixel 50 red, then after 1/2 second make pixel 51 green)
  • You may "stack" multiple pixel commands. For Example: !pb1t.r35.b16.w75.y130.p90...

Random Pixels: Draw random pixels every 200ms.

  • !pb1n.[color][number of random pix to draw:1-144]
  • Example: !pb1n.r50 (randomly choose 50 pixels and draw them red every 200ms)

Display any color in the center 4 pixels:

  • !pb1ec.[rgb hex value]
  • Example: !pb1ec.9400D3 (clear board and display dark-violet in the center 4 pixels)
  • Note: Arbitrary RGB support is untested. Results may vary, but we'll learn stuff.

Test the speed of a moving pixel:

  • !pb1es.[fps]
  • Example: !pb1es.12 (clear board and move a pixel from 0 to 144 at 12 fps.)
  • Use !pb1x command to stop.

Traverse pixels through all colors:

  • !pb1ew.[fps]
  • Example: !pb1ew.12 (clear board and transition colors through all RGB values.)
  • Use !pb1x command to stop.

Clear panel pixels:

  • !pb1x

Set panel color:

  • !pb1p.[color]
  • Example: !pb1p.r (make entire panel 1 red)

Set row color:

  • !pb1r.[color][row:1-12]
  • Example: !pb1r.w3 (make row 3 white on panel 1)
  • You may "stack" multiple row commands. Example: !pb1r.w3.r4.b10...

Set column color:

  • !pb1c.[color][row:1-12]
  • Example: !pb1c.w3 (make col 3 white on panel 1)
  • You may "stack" multiple column commands. Example: !pb1c.w3.r6.y11...

Design notes on each version of PixelBot. Select a tab to learn more.

Last Updated: October, 2022

TO DO LIST:

  1. Build a GIF converter tool. This would be popular. Viewers can find fun GIFs and throw them on the bot.
  2. Need to clean up the editor to export in blocks if larger than 500 chars.
  3. Design stable, streamer-firendly version
    1. Move to alternate single-board computer?
    2. Modules lock together and are strong
    3. Ditch laser cut grid for modular pixel concept?
    4. Custom PCBs vs LED strips?
  4. Finish PixelBot game POCs (TTT, PTX, PIX) and super-simple-pbot-gaming api. This would open up people writing simple games for the bot and make interaction even more fun.

 

 

I swapped out the 4x Arduinos for a Raspberry Pi3 that ran it's own NodeJS server and a module designed to drive neoPixels. I rewrote the code to work with the new library and and was able to push the display to over 60 fps. 

Viewers were constantly pushing the size of drawings and animations, so I wrote code to allow sending blocks of pixel code to the bot and then asking it to display. The bot would assemble the blocks and run the image/animation. Good stuff.

Getting ready to swap in the RPi.

Finished out the facia for the bot and mounted it into the backdrop.

DESIGN NOTES:

  • Excellent solution so far. Only issue is the RPi's are in short supply. If I cannot get these I'll have to find a new processor solution (yet again).
  • Heavy and awkward. Has to mount on wall. Consumer version will need to address this.

 

I decided to build 4x modules to give a 24x24 pixel display. Since i needed a frame to hold the modules in place I opted to build a single, large 24x24 grid. It was painted white to maximize light output.

Tabs on the frame use 3D printed toggles to lock the panels in place.

It was heavy, so opted to use steel upright angle iron with wood cross-beams to stabilize.

Started building the facia for the bot.

Working on a prototype for a maze game idea.

DESIGN NOTES:

  • Laser cut grid made with 1/4" birch plywood.
  • Difficult to time 4x arduinos to animations. They are underpowered. Could only do about 10 fps and would destabilize depending on the images. Need to look into something else to power the bot.
  • 24x24 pixel editor V3-6 designed by LegendEffects.

 

Initial concept was built from laser cut cardboard. After calculating/experimenting with the LED dispersion angle the pixel size was determined and the final grid created. I sourced and experimented with several diffusers. The best was black LED acrylic from Tap Plastics.

Most of the effort was spent coding the best way to transport images from Twitch chat to the bot. I ended up using run length encoding to compress the image size down and remain compatible with the IRC.

After the code was working, I built the final 12x12 module from MDF.

Yes, that is a pixel chicken on the left

DESIGN NOTES:

  • Used Arduino Uno + Johnny-Five IO + Node-Pixel with my node server.
  • 12x12 Modules were designed to lock into a supporting frame. Would be better if designed to lock together instead.
  • 12x12 editor V1 designed by CaptainPDA.
  • 12x12 editor V2 designed by Maximal.

More Goodies

ping pong shooting robot controlled by live-stream viewers

Follow Bot

Robots

Emoji Bot

Robots


Copyright © 2024 LABORATORY 424 LLC | All Rights Reserved