What The Tech?

From Design By Numbers to Processing and p5.js

What The Tech?

Let me share a little history behind the technology that sits at the core of the Useful MBA.

Back in the 1990s at the MIT Media Lab, I started a project called Design By Numbers (DBN). My goal was simple: make programming more accessible to artists and designers—people who might not see themselves as “technical,” but who had creative visions that computers could help unlock. DBN was my first attempt at teaching programming through visuals and very, very simple code.

What I didn’t realize at the time was just how fertile that ground would be. Two of my students, Casey Reas and Ben Fry, took what they learned from DBN and, thankfully, ignored my advice that their next project wasn’t needed. They created Processing—a new language and environment that let anyone jump right into animation and interactive graphics. Today, Processing is a standard-bearer for creative coding, and its influence is everywhere, including the browser-based world of p5.js.

Ben Fry wrote about this turning point:

The truth is that I almost stifled the nascent project’s development, because I couldn’t see the need it would fill. Luckily, Ben Fry and Casey Reas absolutely ignored my opinion. And good for them: the teacher, after all, isn’t always right. — Ben Fry, reflecting on Processing’s origins

I’ll always be proud to have played a small part in this lineage—one that values accessibility, play, and openness. Processing and p5.js are evolutionary steps, but the heart of it remains the same: lowering barriers and inviting everyone to explore what’s possible with code.

All of the interactive examples you see here—thanks to p5.js—are a direct continuation of that journey.

Learn more about Design By Numbers on Wikipedia.


Simple Tests

Example 1: Simple Animation

Simple rotating square

Example 2: Interactive Drawing

Click and drag to draw colorful circles

Press spacebar to clear the canvas!

Example 3: Physics Simulation

Bouncing balls with gravity

Click anywhere to add more balls!

Example 4: Graceful Resize Handling

Responsive grid that adapts to canvas size changes

Try resizing your browser window - the grid adapts without losing its state!


So in summary, we’re using a technology that is decades old to try and advance you faster into the future of AI. That makes a lot of sense, given that so much of the Web has been fueled by the juice of Processing. This is the perfect time :-). —JM