Deco - Framework for Interactive Procedural Modeling and Animation

Radomír Měch

Adobe Research

Procedural modeling has been successfully used for generating complex structures, such as fractals, trees, plants, ornaments, city streets, buildings, and more. In a procedural model, a complex art can be created by repetitively applying a set of simple rules or procedures to a set of modules, representing parts of the modeled structure.

One reason why artists shy away from procedural or generative models is the lack of interactive control over the growth of the model and the difficulty of understanding how the set of parameters used in the rules affect the overall result. Another problem with procedural models is that they are often specified using specialized languages, tailored for the specific application of the system.


In my project, I have been focusing on two goals:

  1. Creation of a framework for procedural modeling and animation with the following features
    • it is powerful enough to express a variety of procedural models;
    • it makes it easy for an advanced user to specify procedural models – using Java Script;
    • it provides the user with a set of predefined functionalities to aid the modeling – like collision detection;
    • it is general enough that it could easily plug in into many Adobe applications;
  2. Combination of user interaction and procedural modeling

Deco framework

Deco is a powerful framework for procedural design that can generate complex patterns or structures from a small number of input parameters and a small set of procedures. An input procedural model is speci fied in a scriptal, a text file containing a set of JavaScript objects representing parts of the modeled structure. The object’s methods de fine local growth and behavior or the rendering of the structure. A collection of libraries is used to simulate global interactions between the structure and the environment it grows in.

In addition, user’s input can control both the procedural growth and the resulting pattern or structure. The framework has been first developed in a standalone prototype application, supporting full 3D modeling. Then it has been deployed in Adobe’s Flash Pro Authoring application version CS4 and CS5 and most recently in Photoshop CS6.

Deployment of Deco 1.0 in Flash Authoring CS4

Deco framework has been incorporated into Flash Authoring CS4. For the first release of Deco it has been decided to provide four new tools to the user:

  • spray tool – a tool that sprays symbols on the stage
  • flower pattern tool – a tool that fills an area with a flower pattern
  • fill tool – a tool that fills an area with a symbol
  • symmetry tool – a tool that places symbols according to one of four types of symmetries

Each tool is defined by a javascript. There is a way to add new user scripts (see here).

Deco tools in Flash authoring:


Deployment of Deco 1.5 in Flash Authoring CS5

With a help of a very creative art student Daichi Ito, who was my intern in the summer of 2009, we were able to add many new tools to the CS5 release:

  • Grid tool has replaced the fill tool in CS4 – it provides the user with more ways of filling a given area
  • 3D brush – a tool that simulates 3D placement of objects by scaling down objects in the upper part of the screen and placing objects higher up on the screen behind those lower on the screen.
  • Building brush – creates random skyscrapers.
  • Decorated brush – draws decorated strokes.
  • Fire animation – makes simple fire animation
  • Flame Brush – brushes static flames in your scene
  • Flower Brush – creates flower filled strokes
  • Lighting Brush – brushes lighting
  • Particle System – adds simple particle system operating on library symbols
  • Smoke Animation – creates smoke animation
  • Tree Brush – creates various trees

A decorated text created in Flash Pro CS5 using the Flower brush and the Tree brush:


A lightning created using the Lighting brush:


Various trees drawn using the Tree brush:


Deco in Photoshop CS6 – Scipted patterns

Deco framework has been incorporated to Photoshop CS6 and it is used to place patterns into a user selected area. CS6 includes 5 scripts that define the following fills: Brick Fill, Cross Weave, Random Fill, Spiral, and Symmetry Fill. An additional script Boundary Fill has been provided to the pre-release forum.

See this page for more information.