Generátor květů

Flowers punk composition

Další generovaná grafika vytvořená s použitím Elixiru, LiveView a SVG (a Poisson disc sampling algoritmu).

Jednotlivé květy jsou vykreslené pomocí SVG. Střed květu tvoří kruh (SVG circle element), okvětní lístky jsou tvořené elipsami, pootočenými okolo středu květu. Abych tomu dodala trochu nepravidelnosti, úhel pootočení a rozměry jednotlivých lístků v sobě mají navíc malinko náhodnosti. Každá květina je tedy úplně jiná.

Podle příslušného nastavení se vygeneruje určitý počet květů a jejich parametry (souřadnice, barva, natočení lístků…). Veškeré zobrazení pak zařídí tenhle kousek kódu (kombinace Phoenix LiveView a SVG), do kterého se parametry „vkládají“.

<%= for flower <- @flowers do %>

< g transform="translate(<%= flower.x %>,<%= flower.y %>)">

  < g transform="scale(<%= flower.style.size %>)">

     < circle r="15" fill="<%= flower.style.center_color %>"
        fill-opacity="<%= flower.style.opacity %>" />

     < g mask="url(#petals_center)">
        <%= for {rotation, rx, ry} <- flower.style.petals_rotations do %>
          < ellipse transform="rotate(<%= rotation %>)" cx="15"  
            rx="<%= rx %>" ry="<%= ry %>"
            fill="<%= flower.style.petals_color %>" 
            fill-opacity="<%= flower.style.opacity %>" />
        <% end %>
     < /g>

  < /g>

< /g>

<% end %>

Online

Pokud byste si chtěli vytvořit vlastní květinovou kompozici, moji aplikaci najdete zde: Flowers.

Flowers composition

Flowers pink composition

Flowers composition

SunFlowers composition

Flowers composition

Flowers composition

Flowers composition

Flowers composition

White Flowers composition

Publikováno v rubrice generated art, štítky , , , , .

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *