Shape Grammars in Javascript - CGAjs

2 min read Original article ↗

Read this:

This is a parser, processor and visualiser for CGA Shape Grammars. It currently only implements a very small subset, and is certainly very buggy. It is only really tested in Chrome.

Rotate the 3d view with left-mouse button, pan with the right, zoom with the scroll wheel. Type in the box, see changes in the 3d view. Chose the things from the drop-down menus.

You grammar will be saved in localStorage, so you can come back later!

Go look at the complete CGA reference.

Grab the source from GitHub.

Implemented bits:

  • the grammar eval stack
  • the world/object/pivot coordinate systems/transforms
  • splitting in x/y/z axis (split)
  • splitting faces into components (comp)
  • single level stochastic rules
  • setting color (color("red"))
  • extrude and taper
  • scale, rotate, translate by absolute/relative amountss, t, r
  • stack push/pop operator [ .. ]
  • the rand function
  • inserting primitives

Missing bits I'd like to add

  • aritmetic scope.width/2 / comparisons scope.height>3
  • parameterised rules
  • builtin math functions
  • nested splitting blocks
  • conditional rules
  • nested stochastic/conditional rules
  • rotating in other coordinate systems
  • roof*
  • envelope, offset, setback, ...

Missing bits I have no intention of adding

  • texture support
  • inserting predefined obj files
  • styles
  • imports

Have fun! If you make anything cool I'd love for you to tell me on twitter: @gromgull