FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View WordPress Plugins →

BOTS

on in Generative Design, Featured
Last modified on

Table of Contents

Introduction

This year I have coded and launched a small app (available on Google Play Store and as a PWA), where you can generate an avatar (looking like a square bot), and give it a name, a rarity/probability and a class. The name is BOTS.

BOTS is an avatar project, an ever-growing collection of pixel bots, each one of them up to no good.

How it Started

It started small, mostly in JavaScript and Canvas. Later, a database has been added, but things didn’t go according to plan, and I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system. This is how BOTS 2 came to life – a user-generated Bot app, with no constraints, no microtransactions, no time limit.

I am not looking to keep the Google Play Store app any more, so I will turn this into a website (also PWA-ready), with full membership capabilities, user ranks, badges, points, profiles and more.

The logic behind the main Bot generation is based on random settings, while some of them are linked. There are custom eyes, custom textures, custom colours, random elements and items, random names, random classes and random rarities.

Currently, BOTS v2 is in Beta phase, and it will be live soon. I’m still deciding on a domain name and a theme colour. I’ll probably go with a light theme and get some user feedback.

I’m also looking at implementing a Patreon-style donation system for additional textures and Bot loot. Until then, stay tuned and keep an eye on this blog for more updates.

The Story

It all started one afternoon when I started teaching my 8-year-old son the basics of web development. We started with the basics, HTML, CSS, and a bit of JavaScript. We then sank our teeth in JavaScript even more, because JavaScript is awesome. The goal was to build a small avatar, resembling a robot’s head, using mirrored elements (face, body, eyes, mouth). We did it fairly easy, but then we wanted to add more layers and transparency and various other elements. CSS positioning helped, but the code became massive and unmaintainable long-term.

This is how BOTS started. We moved all the code into a Canvas element and started building everything in there, with zero HTML or CSS. BOTS evolved, and we got around 10 different parameters to play with and randomize their values. As my son wanted to be able to play with these parameters, I exposed them all as HTML checkboxes and <select> dropdowns.

Fast-forward a few weeks, I had a fully working PWA and a native Google Play app on my phone. As the “requirements” evolved, I needed to save the generated Bots in a small database. So, as I was saying in my previous article, I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of Bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system.

Fast-forward this week, I have a fully working website with a membership system and a dynamic Bot generation system. There are badges, texture packs, and upcoming trading and collection features.

One of the features under heavy development is a parameter-based generation system with lots of variables. And I mean lots.

BOTS: Mischievous Pixel Avatars

BOTS

GR

Almost
Cute

BOTS is an avatar project, an ever-growing collection of pixel bots, each one of them up to no good.

They are on a mission to conquer and change everything around them. Some of them are common bots, some of them are pretty rare and some are unique.

Should I tell you about the magical ones?…

Get to
Know Them

Each bot has a story, a legend, a myth, a purpose.

Collect bots, trade bots and discover their secrets.

Related posts