�ݺ�ߣ

Граматики за
генеративно изкуство
● Собствени примитиви / Пътища
● Криви на Безие
● Анимиране на CFDG
● Балансиран random с дърво
● Връзка със SVG
Подготвени от Г.Пенков като част от курса на ФМИ за зимен семестър 2010/2011. Заглавното
изображение е от http://contextfree.lazymoon.org.

Random с двоично дърво
● Използват се двоично дърво, на което върховете са
правилата за извод
● Връзките между върховете са завъртане на даден
градус
● Крайните листа дават възможните ъгли на завъртане
● Дава равномерно разпределен random
● Може да се използва и за други видове параметри

Random с двоично дърво
startshape Begin

background { h 200 sat 1 b 1 }

rule DrawArrow {
SQUARE { x 0.5 size 1 0.075 }
TRIANGLE { x 1 r 30 size 0.2 }
}

rule RandomRotate1 { RandomRotate2 { } }
rule RandomRotate1 { RandomRotate2 { r 180 } }
rule RandomRotate7 { DrawArrow { } }

rule DrawRandomArrows { 30*{ b -0.05 z 1 } RandomRotate1 { }
}

rule Begin { DrawRandomArrows { h 240 sat 1 b 1 } }

Произволни примитиви - пътища
● Позволяват описване на нови примитиви / терминални символи.
● Описват се като списък от операции за описание на векторна графика.
● Винаги има текущо положение на виртуален 'показалец'
● Напомнят на движението на “костенурката” в ЛОГО.
● При движение на показалеца може да се изрусува линия или крива или просто
да се придвижи до нова позиция
● Всяка команда описва “къде да се рисува” и “как да се запълни”
нарисуваното.
● Командите, които са на разположение са такива, че да позволяват изход към
SVG и се придържат към OpenVG стандарта за графични ускорители
работещи с векторна графика.
● Получените пътища са отново контекстно независими, т.е. са разписани
спрямо собствена координатна система с размерност 1.
● Веднъж създаден даден път може да бъде използван след това като всяка
друга примитива или правило – с правила за промяна на текущата
трансформационна матрица и движение в пространството на цветовете.

● За удобство ще приемем, че движим карета по
координатна система.
За удобство ще наречем текущата позиция в
координатната система – позиция на карета.
● Движението е само в
равнината определена
от Oxy. Тук z не участва.
● Има само една
карета, която
“потегля” от
началото на
координатната система.
Произволни примитиви - пътища

Работа с прави
● MOVETO {x X y Y } – придвижва каретата до дадено
място с координати (X, Y) в текущата координатна
система.
● LINETO {x X y Y } – рисува линия от текущата позиция
на каретата до дадено място с координати (X, Y) и
премества каретата там.
● CLOSEPOLY { } – рисува линия от текущата позиция на
каретата до началото на последния описан път.
● STROKE { } – изрисува контур по линииите определени
от горните команди.
● FILL { } – запълва формата определена от горните
команди с определен щрих.

Прост пример
path box {
MOVETO{x 0.5 y 0.5}
LINETO{x -0.5 y 0.5}
LINETO{x -0.5 y -0.5}
LINETO{x 0.5 y -0.5}
CLOSEPOLY{}
STROKE{}
}
● Щрих с дебелина 10%
●

Малко по-сложен пример
startshape octagon
path octagon {
MOVETO { x cos(0) y sin(0) }
LINETO{x cos(45) y sin(45)}
LINETO{x cos(90) y sin(90) }
CLOSEPOLY{}
STROKE{}
}

Използване на цикли
path octagon {
MOVETO { x 1 y 0 }
8 * { r 45 }
LINETO{ x cos(45)
y sin(45)}
CLOSEPOLY{}
STROKE{}
}
● По същия начин както при правилата.
● Реално ще предизвикват използване на
нова трансформационна матрица за
текущото положение на каретата.

Може да има повече от една
форма в даден път
startshape octagon2
path octagon2 {
MOVETO { x 1 y 0 }
8 * { r 45 }
LINETO{ x cos(45)
y sin(45)}
CLOSEPOLY{}
STROKE{}
MOVETO { x (cos(0) * 0.5 )
y ( sin(0) * 0.5 ) }
6 * { r 60 }
LINETO{ x (cos(60) * 0.5 )
y (sin(60) * 0.5 ) }
CLOSEPOLY{}
STROKE{}
}

По-сложни цикли
startshape octagon2
path octagon2 {
MOVETO { x 1 y 0 }
8 * { r 45 }
LINETO{ x cos(45)
y sin(45)}
CLOSEPOLY{}
STROKE{}
2 * { x 2 } {
MOVETO { x (cos(0) * 0.5 ) y ( sin(0) * 0.5 ) }
6 * { r 60 }
LINETO{ x (cos(60) * 0.5 )
y (sin(60) * 0.5 ) }
CLOSEPOLY{}
}
STROKE {} // командата за запълване или щриховане е задължително извън цикъла
}

Запълване
● След “затваряне” на даден път може да се
приложи или FILL или STROKE.
● Може да има повече от една форма, която да
бъде запълнена
● FILL и STROKE могат да се комбинират с
директиви за изрисуване на цвят.
● След всяка FILL директива може да има нова
поредица от движения на каретата, което да
е следвано от запълване.

Запълване
startshape octagon2
path octagon2 {
MOVETO { x 1 y 0 }
8 * { r 45 }
LINETO{ x cos(45)
y sin(45)}
CLOSEPOLY{}
STROKE{}
2 * { x 2 } {
MOVETO { x (cos(0) * 0.5 ) y ( sin(0) * 0.5 ) }
6 * { r 60 }
LINETO{ x (cos(60) * 0.5 )
y (sin(60) * 0.5 ) }
CLOSEPOLY{}
}
FILL { h 20 sat 1 b 0.8 }
}

Видове запълване
● STROKE {shape adjustments width stroke_width param parameters} - Изрисува контур по
последния описан път с дебелина определена от stroke_width (по подразбиране 0.1).
Могат да се подадат и параметри за промяна на цвета и (!) формата
● FILL {shape adjustments param parameters} – запълване на последния път взимайки
предвид параметрите за промяна на формата. Ако формата е самопресичаща се,
тогава има значение и параметъра за запълване, който определя как да бъде
запълнена тя. По подразбиране се ползва non-zero, но може да бъде използвано и
even-odd запълване (по W3 спецификацията) :
● Заб. : и тук има значение дали параметрите са подредени или не .
● Заб. : ако не е подадена явна команда FILL тя се добавя
nonzеrо evenodd

Параметри за запълване
path stars {
MOVETO{x cos(90-144) y sin(90-144)}
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
5* {r 72} {
FILL{y 1.88 b 0.5 p evenodd}
STROKE{y 1.88}
}
}

Параметри за запълване
path stars {
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
5* {r 72} {
STROKE{y 1.88}
}
}
* използва се evenodd запълване
** и при STROKE и FILL случая има
изместване по y

Запълването е повече от просто
директива за цвят
path stars {
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
}
path stars {
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
5* {r 72} {
STROKE{y 1.88}
}
}

Запълването е повече от просто
директива за цвят*
startshape stars
background {sat 1 h 20}
path stars {
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
FILL{b 0.5 hue 50 sat 1
s 1 p evenodd
r 35 s 2.9 }
STROKE { }
}
* ...както и очертаването на контур

Нови примитиви !
startshape S2
background {sat .6 h 40}
rule S2 {
50 * { r (360/50) } SRANDOM { x 20 }
S2 { a -0.1 s 0.9 r 45 h 20 }
}
rule SRANDOM { stars { x rand_static(-3, 3)
a rand_static (-0.5, 0)
y rand_static (-5, 5)
s rand_static (0,1 )
hue rand_static (20, 200) }}
/* … много пъти ... */
rule SRANDOM { stars { x rand_static(-3, 3)
a rand_static (-0.5, 0)
y rand_static (-5, 5)
s rand_static (0,1 )
hue rand_static (20, 200) }}
path stars {
4* {r 144} LINETO {y 1}
CLOSEPOLY{}
FILL{b 0.5 hue 50 sat 1 p evenodd r 35 s 3}
STROKE { }
}

Криви
● ARCTO {x x y y rx x_radius ry y_radius r ellipse_angle param parameters} – движи
“каретата”, така че да опише сегмент от елипса до точката (x, y), като се приема,
че елипсата е с радиус (rx, ry) и е завъртяна на радиус (в градуси)
● ARCTO {x x y y r radius param parameters} – движи “каретата”, така че да опише
сегмент от окръжност с радиус r до точката (x, y)
● CURVETO {x x y y x1 control_x_1 y1 control_y_1} – движи “каретата”, така че да
опише квадратична крива на Безие до точката с координати (x, y) и контролна
точка в (x1, y1)
● CURVETO {x x y y x1 control_x_1 y1 control_y_1 x2 control_x_2 y2 control_y_2} -
движи “каретата”, така че да опише крива на Безие до точката (x, y) с първа
контролна точка в (x1, y1) и втора контролна точка до (x2, y2)
● CURVETO {x x y y} – движи “каретата” така че да опише квадратична крива на
Безие до точката (x, y) с контролна точка, която е 'огледално' разположена
спрямо контролната точка на предишната крива

Криви на Безие
С една контролна точка
Тангентите в P0 и P2
преминават през P1
С две контролни точки
P0
P1
P2
Тангентата в P0 e P0P1,
тангентата в P3 е P2P3
Кривата може да се
самопресече.
P0
P1 P2
P3
P4

Криви на Безие
● С една контролна точка
● Координатната система и
допирателните са
добавени за детайли
path roll{
MOVETO { x 5 y 0 }
CURVETO { x -5 y 0 x1 0 y1 -10 }
STROKE {b 1 width 0.05 }
}

Криви на Безие с контролни точки
path roll{
MOVETO { x 5 y 0 }
CURVETO { x -5 y 0 x1 2.5 y1 5
x2 -2.5 y2 5 }
STROKE {b 1 width 0.05}
}
// от (5,0) до (-5, 0) с контролни точки в
(2.5, 5) и (-2.5, 5) и контур с дебелина 0.05
Контролните точки
са в (2.5, 5) и (-2.5, 5)
Контролните точки
са в (2.5, -5) и (-2.5, 5)
path roll{
MOVETO { x 5 y 0 }
CURVETO { x -5 y 0 x1 2.5 y1 -5
x2 -2.5 y2 5 }
STROKE {b 1 width 0.05}
}

The DAO
startshape dao
background {b -.3}
path roll{
MOVETO{y 1}
ARCTO{y -3}
FILL{b 1}
MOVETO{y -3}
ARCTO{y 1}
FILL{}
MOVETO{y 1}
ARCTO{y -1}
FILL{}
MOVETO{y -1}
ARCTO{y -3 p cw}
FILL{ b 1}
}
rule dao{
roll {}
CIRCLE{b 1 s .7} CIRCLE{y -2 s .7}
}
Тук ARCTO се използва де факто за
рисуване на полуокръжностти

Избор на крива
● Параметър “p cw” на ARCTO директива указва на арката, която е по
посока на часовниковата стрелка.
● С параметър “p large” може да се укаже използване на по-голямата арка от
окръността/елипсата.

ARCTO в действие
http://www.contextfreeart.org/gallery/view.php?id=1613
HEX
By Fedor

От SVG към CFDG и обратно
● Примитивите на SVG са съвместими с тези на CFDG и
може да лесно да се направи преход от SVG тагове към
CFDG пътища.
● Във форума на ContextFree е демонстриран конвертор
за TTF шрифтове (вж. Библиографията).
● На практика лесно може да бъде реализиран конвертор
за по-прости SVG файлове.
● Context Free позволява запазване на генерираната
структура като векторен SVG файл.
● SVG е стандартизиран векторен формат, който може да
бъде отварян от повечето популярни приложения за
работа с векторна графика (като Illustrator, Corel Draw,
InkScape и др.)

Анимиране на CFDG, което има
само детерминистични правила
rule DAISYALL {
DAISYSHAPE { }
6*{r __LARO__ h __LARO__ }
DAISYXPAND {x 1}
6*{r __LARO__ } DAISYSHAPE {x 1}
}
rule DAISYXPAND {
DAISYSHAPE { }
6*{r __LARO__ }DAISYSHAPE {x 1 z-1}
DAISYXPAND{s .5 r __LARO__ }
}
path DAISYSHAPE {
MOVETO{x -1 y 0}
ARCTO {x 1 y 0}
ARCTO {x -1 y 0}
STROKE{width 0.03 b -1}
FILL {b 1 a -.8 sat 1}
}

Анимиране на параметри
1) Създаваме помощен скрипт, който да генерира
последователност от CFDG файлове.
2) Използваме конзолното приложение cfdg за
генериране на всеки от тях:
cfdg cur.cfdg output$SEQ.png -v ARE
3) Използваме mencoder за генериране на
анимация:
mencoder mf://*.png -mf w=500:h=500:fps=25:type=png -ovc copy -oac copy -o output.avi

Grammers for Generative Art - Lectures @ Sofia University #4

Връзки
● http://www.khronos.org/openvg/ - OpenVG стандарт
● http://www.contextfreeart.org/mediawiki/index.php/Paths – Още за
пътища
● http://www.contextfreeart.org/phpbb/viewtopic.php?t=418 –
Механизъм за конвертиране на TTF шрифтове към SVG и после
към CFDG правила
● http://en.wikipedia.org/wiki/B%C3%A9zier_curve – Криви на Безие
● http://www.azarask.in/blog/post/contextfreejs-algorithm-ink-
making-art-with-javascript/ - Context Free with JavaScript
● http://www.mplayerhq.hu/DOCS/HTML/en/menc-feat-enc-
images.html – Кодиране на видео от последователност от
изображения
● http://roberthodgin.com/ - изненада

�ݺ�ߣ

Grammers for Generative Art - Lectures @ Sofia University #4

More Related Content

Grammers for Generative Art - Lectures @ Sofia University #4