Celebrate the Processing 20th with the 'Design by Numbers'.

'Now, this is serious...'

After five minutes I tried to make an animation with 'Design by Numbers', I was overwhelmed with the difficulty.

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

For the Processing 20th celebration.

August 2021, they celebrate the 20th anniversary of 'Processing'.
I'll celebrate with some animation work of 'Design by Numbers' the origin of 'Processing'.

The origin of Processing, 'Design by Numbers'.

'Design by Numbers' was created by Mr. John Maeda in the 1990s. And 'Design by Numbers' influenced 'Processing'.

It has a 100x100 tiny canvas. The looks are similar to the Processing IDE.

I got information about the language and how to run it from the MIT website.

• How to run : Design By Numbers | Massachusetts Institute of Technology.
• Language : Design By Numbers :: Vocabulary

I ran it with this command. It's just my case. 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.

I will abbreviate 'Design by Numbers' to DBN.

Processing 20th anniversary animation with DBN.

🎂To celebrate the Processing 20th Anniversary. 🎉
<Developing new ideas based on study of the past>#pcd2021 #processing pic.twitter.com/KyrTI45PXn

— deconbatch (@deconbatch) August 20, 2021

Looks cheap? Oh, no no! It's some work.

I expressed 'DBN has appeared in this world. Be blessed P5 (Processing) has grown twenties years old. Let there be light.'.

I've expressed. I've might expressed... Can I express?

It's so hard for me.

DBN does not have convenience functions and system variables like 'translate()', 'frameCount'.
I've been dependent on 'Processing' too much, so I felt difficulties.

There is no 'text()' function also. Then I decided to draw the alphabet with 'LINE' by myself.

But wait. How many lines? Do I have to write location parameters with each 'LINE'?
Oh... It's so hard for me.

Let 'p5.js' write DBN code.

I would not dare get location from the letter written on the graph paper.
(I did it before. And never again.)

I found p5.js font.textToPoints() gets the points of the outline of the letter.

And I wrote a code that generates DBN 'LINE'.

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

'x0, y0, x1, y1' are the points location of the outline of the letter. The direction of the Y-axis of DBN is opposite to Processing. So I put a minus sign.
's' means size value. 'x, y' means origin location. I need these for animate the letter.

The generated code to draw 'DBN' is 70 lines.
This is bulldozer coding.

DBN example code.

I omitted some 'LINE' parts. These are too much.

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

}

There is a clever way always.

My friend Mr. Alexandre B A Villares (@villares) told me a DBN command set to draw alphabet.

you might like this: https://t.co/bJUMIkVqeu

— Alexandre B A Villares☂🐍🧄 (@villares) August 20, 2021

Oh my goodness, gracious, great balls of fire!
I can make some cool one with it.

It's a real thrill of the SNS. Thank you @villares.

Developing new ideas based on study of the past.

I had fun with developing the code on how to make it works, rather than how to make the drawing result looks beautiful.
DBN gives me fun like handicraft making.

And I appreciate the easiness to code and so much fun on Processing again.

Thank Processing for giving me such fun and a happy time.
Congratulations on Processing 20th anniversary!

I will do my best to inherit this technology and culture that our predecessors have built, and I think I should pass these on to the next 20 years.

Design By Numbers book.

Reference.

• Wikipedia(EN) Design By Numbers
• MIT Design By Numbers
• DBN Vocabulary by Zach Lieberman and Rusty Soo-Tho
• Mr. Alexandre B A Villares DesignByNumbers-alphabet