Moebot


Eric Moe’s Portfolio

Eric Moe’s Social


Moebot lets people design with machine intelligence on the web. Its algorithm models thinking, perception, and action to make designs. This proof-of-concept generates modernist layouts, typography, and geometry on the web. Designed by Eric Moe

Controls

Process

Project Speculation

Six years ago, I began thinking about Moebot thanks to a computer’s suggestion. The computer ran a website that directed me to OpenProcessing.org, and introduced me to the world of creative coding. This site boasted something few others could—developers and artists working together on code to create art. OpenProcessing opened my eyes to the possibilities of creating art with code.

The obvious next question was—can you use code to make design?

As the years went by, this question burned in the back of my mind. Every time I found something interesting on artificial intelligence, generative art, or algorithmic design I bookmarked it. I took every opportunity to design projects around generative code. The result of these ruminations were the beginnings of my capstone.

Moebot

By the time summer of 2018 came to a close, I had plenty of material to work with but no focus. I knew I wanted to create something for the web, and I knew I wanted it to be on generative design, but I had no idea what the problem was.


Research

When the evidence suggests that no one else is doing the work you are trying to do, is that a good or bad sign? That is the conundrum of AI-driven design—either you have functional machine intelligence or visually pleasing art experiments—rarely both. Regardless, I found a few examples:

Meanwhile, my classes on artificial intelligence presented new obstacles and opportunity. AI is a discipline that comes with baggage that ranges from the virtual assistant in your pocket to the chrome skeletons time traveling to terminate your existence. It was vital for me to have a handy definition of AI that anyone could understand. I got halfway there through Dr. Henry Patrick Winston—Director of the MIT Artificial Intelligence Laboratory from 1972 to 1997:

“[Artificial Intelligence is] about algorithms enabled by constraints exposed by representations that model targeted thinking, perception, and action.” —Dr. Henry Patrick Winston—Director of the MIT Artificial Intelligence Laboratory from 1972 to 1997

As you can imagine, everyone instantly understood that quote and even my Grandmother calls me to ask about neural networks. Or not. However, if you juxtapose that quote against famous designers describing design:

“The difference between good design and great design is intelligence.” —Tibor Kalman, Founder of M & Co. and Colors magazine “Design is the method of putting form and content together.” —Paul Rand, Corporate Design Strategist, and Yale Professor

With that in mind, this is my simplified definition of Artificial intelligence:

Artificial Intelligence models thinking, perception, and action to make.


Rapid Prototyping

I found myself stuck in a rut toward the end of my research. The research was fine, but the focus was not—I still did not know what the problem was I wanted to solve. My solution was to rapidly prototype a couple of websites to show off the potentials of artificial intelligence and design.

Youtube AI Mockup

Here is a simple visual interpretation of machine intelligence. Youtube already calculates how likely you are to click on a video, so you can make the thumbnails larger or smaller based on that data. Arranging them in a Fibonacci spiral is just a plus when you have all that computational power at your disposal.

Wikipedia AI Mockup

What if Wikipedia needed a redesign? The last time they did it was difficult and controversial. To add a two column layout on a site as large as Wikipedia, you could use AI to comp through the site and figure out all the use-cases ahead of time, or to render it on the fly.

Healthcare AI Mockup

Finally, we have Healthcare.gov. With all the potential users and user needs, perhaps AI could craft a custom experience for every user. Even if they misspell something, people have a right to access and take advantage of healthcare.

Here’s why this is important. The invention of the computer—at minimum a low-level machine intelligence—changed every aspect of our lives. We have realized that to get the most out of the computer, we have to shift our thinking to adapt and compliment this artificial intelligence.

We sacrifice potential design advancement when our digital design experiences simply mirror physical design processes. If we instead design in tandem with artificial intelligence, the possibilities increase exponentially.

The experiments above show off how this shift in thinking can impact web design. These experiments do not crystallize the AI-driven design experience. Someone could look at them and think “well I’m not building YouTube, so who cares.” Here is where my problem finally came into focus.

The Problem—AI Driven Design needs a prototypical poster-child that other designers can build on.

My charge is to make something that a designer can use to create design. The components are elemental—type, shape, and layout. The styling is black and white as not to distract. Finally, the project should be open source so others can iterate upon it. With that, I was ready to build.


Pre-Alpha Development

Moebot

In the beginning, there was just a bunch of circles. For a while I had to configure nonvisual things like placement, grid, and interactivity, so circles were the star of the show.

Moebot

Then I added editable text boxes. As you can see here, I made a quick poster for my friend Max about his habit of solitaire during class. I included this to show some organic experimentation with the tool.

Moebot

The aliens are coming! There is something peaceful about this composition.

Moebot

Here you can see the grid, something you can activate with the tab key. In the beginning, I had difficulties with text aligning to the far right and overlapping out of the grid system—but I fixed it.

Moebot

At this point, I had some new shapes and Unicode symbols randomly arranging themselves on the grid.

Moebot

Now fonts variably change when refreshed.

Moebot

I happened to think this was an interesting composition. As you can see, text no longer overlaps with the shapes.

Conclusion

At all times I had an idea for an alpha which I wanted to show for critique. An inflection point where this project can progress in any direction. I feel that I have hit this alpha, and I want to discuss my work warts and all. There have been many gratifying moments in this process. A certain paternal feeling occurs when you name your artificial intelligence after yourself. I was there for Moebot’s first steps, its first words, and I am here to guide it through adolescence. Like any proud parent, I am grateful that so many have been curious about this project—that so many people have offered their suggestions and enthusiasm. When I see the wheels start turning in people’s minds, that is when I know Moebot is doing its job



Getting Started

Use these instructions to get a copy of the project up and running on your local machine for experimentation and extension.

Prerequisites

Moe-Bot is developed and tested on Google Chrome (Version 70). Cross-browser testing is in the works! Please submit a pull request if you encounter any weirdness!

Installation

Moe-Bot is super easy to install. Just download a copy of this repository and open the index.html file directly in your browser.

  1. Download the latest version of Moe-Bot from github.com/geomoetric/moe-bot/releases.
  2. Unzip the folder.
  3. Open the index.html file in Google Chrome to view it—cmd + o to open from Chrome directly.

Built With

Authors

License

Moe-Bot falls under the Apache License - see the LICENSE.md file for details

Acknowledgments