The Gene

Each shape is constructed from a gene. A gene is simply a sequence of numbers. By combining the gene with a grammar, shapes are generated. Here is an example gene: 92,45,2,45,86,23,45,56,99,122,132,23,33,200

The Grammar

A grammar is a collection of substitution rules. Let's look at one rule: "spread":["repeat","pad","reflect"] This means whenever encountering the symbol #spread#, replace it with a terminal; "repeat" or "pad" or "reflect". The gene decides which one is chosen. There are different ways to select but modulo is a common one. The first gene value, 92, would select "reflect": gene-value (mod) number-of-choices
92 (mod) 3
select index 2
counting from 0 that is "reflect" A grammar rule can also reference other rules: "r255" : ["#r255Start##digit#"] This rule means to go to rule #r255Start# then go to rule #digit# .

Radial Gradient Grammar

The demo generates a radial gradient. Here is an example radial gradient: <radialGradient id='grad1' cx='60%' cy='80%' r='90%' spreadMethod='pad' gradientUnits='objectBoundingBox'>
<stop offset='0' stop-color='hsl(34, 88%, 87%)' />
<stop offset='0.7' stop-color='hsl(114, 88%, 70%)' />
</radialGradient>

Here is a grammar that will generate radial gradients when you start at rule #gradient#. This is tedious to do by hand but something computers excel at. Try the demo to see it in action: largeDigit : ["5","6","7","8","9"],
digit : ["1","2","3","4","5","6","7","8","9","0"],
r255Start : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
r255 : ["#r255Start##digit#"],
spread : ["repeat","pad","reflect"],
svgColor : ["hsl(#r255#, #largeDigit##digit#%, #largeDigit##digit#%)"],
gradient : "<radialGradient id='grad1' cx='#digit#0%' cy='#digit#0%' r='#digit#0%' spreadMethod='#spread#' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='#svgColor#' /><stop offset='0.#largeDigit#' stop-color='#svgColor#' /></radialGradient>" The radial gradient is just a small part of SVG. Genolve models the full SVG spec with a 2000-line weighted EBNF grammar. The above grammar and the demo use Tracery notation. Genolve can splice Tracery and other SVG generators in with its own grammar.

Evolution of the Gene

One component of evolution is mutation. This is simulated by randomly changing one or more numbers in the gene. You can try this in the demo; change one number to a value between 0 and 200, click run, and see what changes. If the mutation is too small nothing will change.

Another key feature of evolution is crossover. Genolve simulates this by splicing the genes from two separate shapes together. Experiment with crossover in this demo or try creating a Valentine's card with shapes that evolve each time you click them.