Generátor květů

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 %>