Back to the Roots: Celebrating Processing’s 20th Anniversary with Design by Numbers

21 Aug, 2021

'Now, this is serious...'

Within just five minutes of trying to create an animation with Design by Numbers (DBN), I was overwhelmed by its difficulty.

 

👉 この記事は日本語でも読めます。

Honoring 20 Years of Processing

In August 2021, the Processing Foundation celebrated Processing's 20th anniversary.
To join the celebration, I decided to create an animation using the very precursor to Processing: Design by Numbers.

 

The Roots of Processing: Design by Numbers

Created by John Maeda in the 1990s, Design by Numbers (DBN) was a fundamental influence on what would eventually become Processing.


It has a 100x100 tiny canvas. The interface resembles the Processing IDE.

I found documentation about the language and installation instructions on the MIT website.


I ran it with this command (your setup may vary). I'm using Fedora Linux.

java -cp ./lib/dbn.jar DbnApplication

'./lib/dbn.jar' is the jar file I downloaded from the MIT website.
I used 'java' included in Processing 3.5.3.

From now on, I'll use DBN as shorthand.

 

Processing 20th Anniversary Animation with DBN

Looks simple? Think again—this took considerable effort!

I was trying to convey: "DBN emerges into the world. May Processing be blessed as it turns twenty. Let there be light."

At least, that's what I tried to express.

 

The Struggle is Real

DBN lacks helper functions and system variables like translate() and frameCount.
I've grown too reliant on Processing, so I found this challenging.

There's also no text() function, so I had to draw letters manually using LINE.

But wait—how many lines would that require? Would I have to manually specify coordinates for every single LINE command? Oh no... this was going to be painful.

 

Automating the Past with p5.js

I wasn't about to manually extract coordinates from letters drawn on graph paper.
(I've done that before—never again.)

I discovered that p5.js's font.textToPoints() extracts the outline points of letters.


So I wrote code to generate DBN LINE commands.


console.log("LINE (" + floor(x0) + " * s + x) (" + floor(-y0) + " * s + y) (" + floor(x1) + " * s + x) (" + floor(-y1) + " * s + y)");

'x0, y0, x1, y1' represent the coordinates of points along the letter's outline. DBN's Y-axis runs in the opposite direction from Processing's, so I negate the Y values.
's' means size value. 'x, y' means origin location. I need these to animate the letters.

The generated code to draw 'DBN' is 70 lines.
Talk about brute force!

 

DBN example code.

I've omitted some LINE commands—there are too many to show.


forever
{
   // DBN
   Command drawDBN x y s
   {
      pen 0
      LINE (-15 * s + x) (-7 * s + y) (-19 * s + x) (-7 * s + y)
      // ommit 72 lines
   }

   // P5
   Command drawP5 x y s
   {
      pen 0
      LINE (-7 * s + x) (-3 * s + y) (-10 * s + x) (-3 * s + y)
      // ommit 59 lines
   }

   // 20th
   Command draw20th x y s
   {
      pen 0
      LINE (-10 * s + x) (2 * s + y) (-11 * s + x) (-1 * s + y)
      // ommit 69 lines
   }

   // decorated background
   Command shineBack p
   {
      field 5 0 95 5 ((0 + p * 5) % 30)
      field 95 5 100 95 ((5 + p * 5) % 30)
      field 5 100 95 95 ((10 + p * 5) % 30)
      field 0 95 5 5 ((15 + p * 5) % 30)
   }

   // main
   set sec <time 3>
   set cet <time 4>
   set time ((sec % 4) * 100 + cet) // 0 <= time <= 399

   // DBN location and size
   smaller? time 90
   {
      set dx 50
      set dy 55
      set ds (1 + time / 50)  //sec
   }
   notsmaller? time 90
   {
      set dx 50
      set dy ((time * time) / 150)
      set ds 2
   }

   // P5 location
   smaller? time 100
   {
      set px 50
      set py 200
   }
   notsmaller? time 100
   {
      set px 50
      set py (140 - (time * time) / 350)
      smaller? py 65
      {
         set py 65
      }
   }

   // 20th location
   smaller? time 220
   {
      set tx -50
      set ty 25
   }
   notsmaller? time 220
   {
      set tx ((time * time) / 200 - 200)
      set ty 25
      notsmaller? tx 50
      {
         set tx 50
      }
   }

   // background
   smaller? time 250
   {
      paper 70
   }
   notsmaller? time 250
   {
      paper 100
      shineBack ((time / 30) % 6)
   }

   // draw texts
   drawP5 px py 2
   drawDBN dx dy ds
   draw20th tx ty 2

}

 

Lessons from the Past

My friend Alexandre B A Villares (@villares) showed me a DBN command set for drawing text.


Oh my goodness, gracious, great balls of fire!
I could make something really cool with this!

This is why I love social media! Thank you @villares.

 

Developing New Ideas by Studying the Past

I enjoyed figuring out how to make it work rather than focusing on beautiful results.
DBN feels like doing handicrafts—satisfying in a tactile way.

This renewed my appreciation for how easy and fun Processing is to work with.

Thank you, Processing, for bringing so much joy into my creative practice.
Congratulations on Processing 20th anniversary!

I'll do my best to carry forward the technology and culture our predecessors built, passing it on to the next generation.

 

Design By Numbers Book

'Design By Numbers by John Maeda'

 

Reference

 

deconbatch

deconbatch

To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.

Next Post Previous Post
No Comment
Add Comment
comment url