橋本 麦∿Baku Hashimoto

Making-of: Everything Becomes F

I directed and made an ending movie of “Everything becomes F” a Noitamina animation for Fall 2015. The movie is made with a method called “Generative Art” based on one of a main characters in the story Shiki Magata who is a genius programmer.

I uploaded some some codes used in this work but they’re might pretty disordered.

baku89/Subete-ga-F-ni-naru

Here is a quick technical note.

Overview

“Generative Art” is an artistic field to create graphics, musics, or three-dimensional objects with algorithmic method like programing. Among them, Cellular Automaton (CA) a model studied in the field of complex system and computer science is mainly applied to the movie.

The most popular CA is “Conway’s Game of Life” which is often referred as entry-sample of programing. In addition to “Conway’s Game of Life” itself, more generated CA and one with original rules are used.

Motif (GUI framework) is (literally) referred from *nix from late-90s’ considering background of original novel and flashback of a character although the time setting in anime version is changed to 2015. My generation had not gone through the era in original novel so research was required to collect background information. There might be some conflict but hopefully the movie interests some original fans or hackers.

Tools and Workflow

Below is tools used.

  • Golly – a CA simulator contains many samples and supports Python and Perl. Mainly used in “Game of Life.”
  • Vision of Chaos – a simulator for not only CA but field of fractals and chaos. Used for array of building.
  • Processing
  • After Effects
  • Cinema4D

Golly was used with several scripts like here.

Since export did not go well, Visions of Chaos was simulated with VMWare Fusion inside Mac and captured by screenshot…

Compositing Softwares

  • After Effects – to composite footages.
  • Cinema4D – To apply camera angles and 3D expressions.

Life-like Cellular Automaton

It is a CA generated the concept of “Conway’s Game of Life.” Users can control number of active adjacent cells like “Survive when there are this amount of cells and born when there are that amount.” The rule of Conway’s Game of Life” is written as S23/B3 but there are other arranged versions taking idea from ” list of prominent rules.”

Conway’s Game of Life (S23/B3)

It is mainly used in intro and climax. OTCA metapixel which connects some “Game of Life” themselves like electronic circuit is applied. Samples are taken from “Golly’s LifeGame” or HashLife’s category.

  • Golly: HashLife/*, Life/*

Generation Rule (S23/B23)

An original rule used in the birth of objects. Leaving similar pattern as “Conway’s Game of Life,” it spreads less chaotically and simply to increase their areas so they can be seen in many parts of the movie. New rules of life span and maximum birth number are also added to make it more useful as a transition effect. Both active cells stay over their life spans or go though birth-death-cycle more than maximum number of birth are automatically killed and turn out to be nonactive objects changing their colors to text or UI of commands.

Spiral Growth (S15678/B34568)

It is to create UI same as Generation Rule. The shape looks like chainsaw is interesting.

  • Golly: Life-Like/spiral-growth.rle

Mazectric (S1234/B3)

Used for the objects look like maze and skyscraper in mid-part.

Filling Rule(B12345678/S12345678)

It simply adds one active cell in every one generation used for QR code on beginning and tree-structure like neuron in final scene.

Other CAs

There are some other CAs like below. I will cut down details since it is little too complicated to go through.

Diffusion Limited Aggregation (DLA)

It is applied to final neuron scene.
Several dots move randomly and ones stick “branches” are fixed. It took too long to glow enough so DLA is applied with “Filling Rule” to the tree-structure which is grown to certain level in advance.

  • Golly: Margolus/DLA.rle

Cubist

It is applied to bunch of skyscraper-structures in middle part. However, edges were cut and cleaned with photoshop, UI-Conversion (explained later) was added, and arranged their UI pattern by hand so it was not really a generating.

  • Visions of Chaos: 2D Cellular Automata/ preset: cubist

Motif, CDE, Common Lisp, Emacs…

It is little rude to explain too much but I have concerned about Shiki’s development environment. “RedMagic” in the story maybe came from “RedHat” so I mixed things up assuming it is *nix.

[Spoilers] Subete ga F ni Naru: The Perfect Insider – Episode 1 [Discussion]

Boot message is by the way Debian base, Common Lips is rosettacode.org which is customized
to import the first condition of cells from external file.

CA Animation

Not only the result of CA simulation shows as dot drawings, but also each cells themselves are controlled to morph and to act as small parts of UI aggregate.

Morphing of Cells

Moves cells like larvas. It is applied in QR animation in beginning, neuron in the final, forming of Shiki’s outline, and even PV of the animation.

UI Conversion

Turns white part into mass of UI parts like an image above. Applied everywhere in the movie.

Forming Shiki

Structure of little windows forming Shiki in final scene is made of line-drawing material divided into 24 layers with 4 different resolutions. An image above shows 4 resolutions with different colors. Resolution is set not to go too rough to lose Shiki’s shape.

It is a simulation overwrites active cells onto each layers as initial state based on B23/23 with shorter life and fewer maximum birth number. Morphing and UI-conversion are added after the simulation. Cells around Shiki are normal “Conway’s Game of Life.”

Plugins

Below is additional AE plugins I have purchased.

  • Pixel Blender Accelerator: Pixel Blende Accelerator: To use Pixel Blender effect in after-CS6 environment.
  • GPU Resize: To add Nearest-Neighbor into AE standard transform effects.
  • Dither: Allows delicate control to dither like Photoshop’s “Save for Web.”

Pixel Blende Accelerator was needed to built an effect resizes windows keeping edges like CSS3’s image-border for “desktop” scene after beginning part.

Tips

I have built a shell script starts p5 sketch from command line. It is capable of receiving argument on sketch side. “Life Game” of Shiki’s 24 layers are automated by this.

BTW, compositing movie with p5 spreads large amount of sketch per projects but I did not come up with quick way to put common code together so I had to just copied and pasted them. It takes too much effort to put them together into a library. I wish if I had any easy way to include other files with relative-path like I can #include inside Adobe ExtendScript…

References

Here is list of works I have referred consciously and unconsciously.

Conclusion

Other than above, the movie contains many methods like hand-drawing, arrangement using golden ratio, and generative approach.

Although I have been using programming since I was in elementary school, I am a wannabe-hacker who is not even from engineering field so these methods are not so professional but I would love to keep studying. It will be great pleasure to hear your advice!