生成藝術一直是我很想學習的主題,雖然知道大部分的人會使用 processing, paper.js, 或是 zimjs 來製作 Generative art, 但在對於自己的藝術天份很有自知之明的情況下,一直都沒有去嘗試製作,再加上這些工具的學習也是有ㄧ定門檻。
然而,最近在 Youtube 上看到 css-doodle 的作者 - 袁川於 CSSConf CN 2019 的演講,才了解到要"開始"似乎沒有這麼難,只要掌握一些基本觀念與技巧即可,而且他開發的 web component css-doodle 無論是語法或是使用都算易懂好上手。
今天藉由這篇文章分享該演講中我很喜歡的一些重點,並試著介紹與運用 CSS/JS 和 css-doodle 製作一些簡單的生成藝術作品。
先給大家看第一個小 demo,這是參照袁川在演講中提及的一個範例實作,利用純 CSS 與 JS 所製作的簡單生成藝術:
在生成藝術中,Loop
佔了很主要的角色,需要透過迴圈的方式去自動產生圖案。而圖案其實不需要複雜,在第一個範例中的元素就只有直線。
簡單的直線,透過 transform: rotate()
,就能夠有不一樣的變化,而透過組合,將多個擁有不同狀態的直線串接在一起,再加上時間因子作為變數去改變狀態,就可以是一個簡單的生成藝術。
程式碼也很簡短:
先設定一個 5x5 的表格:
div.grid
div
div
// 略 ... 共 25 個 div
現在利用 CSS grid 可以很輕易控制表格的呈現,接著我們可以將之後預期要來拿隨機變化的屬性以 css variable 的方式設定:
:root {
--theme: #FF9800;
--deg: 45deg;
--gride-size: 50px;
}
.grid {
width: calc(var(--gride-size) * 5);
margin: 0 auto;
display: grid;
border: 5px solid var(--theme);
box-shadow: 0 0 18px 1px var(--theme) inset;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: var(--gride-size);
overflow: hidden;
}
.grid div {
border: 1px solid var(--theme);
background-color: var(--theme);
width: 1px;
transition: all 1s ease-in;
transform: skew(var(--deg));
transform-origin: top;
}
JS 的部分就只需要在固定的 time interval 中間賦以隨機產生的數值到 CSS variable 中:
const getRandomBoolean = () => Math.floor(Math.random() * Math.floor(2));
const randomColor = () => {
const color = Math.floor(Math.random()*16777215).toString(16);
return color.length !== 6 ? `f${color}` : color;
}
let sign = '+';
let theme = randomColor();
const root = document.documentElement;
const divs = document.querySelectorAll('.grid > div');
setInterval(() => {
theme = randomColor();
divs.forEach(div => {
sign = (getRandomBoolean() === 1) ? '+' : '-';
div.style.setProperty('transform', `skew(${sign}45deg)`);
root.style.setProperty('--theme', `#${theme}`);
});
}, 2000);
以這樣的基本想法出發,就可以修改成不同的變化,像是加入 clip-path
來進一步操作畫面中的圖案元素:
帶入一點數學,可以產生更多不同的 polygon:
上面這範例中我是隨便用三角函數設定一個公式來跑,但在演講中,袁川有提及 lissajous curves 這個古老的數學公式,他發現非常適合用在 clip-path
上頭,搭配 poylgon
的 fill-rule
屬性,可以做出以下的效果,像是許多特殊的海洋生物一般:
(出處:https://youtu.be/mEpocRIc3q8?t=737)
妥善使用 迴圈、pattern、隨機性這三個要素,就可以有許多的創意組合,除了上面的線條和 clip-path
外,CSS 繪圖常用到的 border-style
, border-image
, gradient
, box-shadow
等等都能拿來嘗試。
附上幾個袁川在 codepen 上的作品:
這只是其作品的冰山一角,有興趣的讀者可以到他的 codepen 上欣賞各種絢麗的畫作。
像是這個用 z-index 堆疊出的城市天際線圖,不得不佩服他的創造力:
另外,在袁川的演講中,讓我特別印象深刻的是他利用 text-shadow
的效果,將一個括號,運用在生成藝術中,你沒看錯,就是 (
這個括號。
我找不到袁川影片中的範例,但自己依照他的介紹用純 css/js 實作了一個版本:
除了 text-shadow
,上面範例中也用上了 filter
, rotation
, font-size
等等的隨機屬性變化,來生成這幅圖案。
上面的範例都是用 pure css/js 完成的,但袁川其實製作了一個 web component,把許多製作 generative art 需要的一些功能幫你包好成多個函式,像是想要產生 grid,不用再到 html 內複製一大堆 div,也不用自己用 JS createElement,只要透過 css-doodle,一句話就能做到:
:doodle {
@grid: 1x10 / 85%;
}
css-doodle 是基於 Shadow DOM v1 和 Custom Elements v1 實作的 web component,基本上目前主流瀏覽器都能支援。
像上面的例子,透過設定 css-doodle web component 的 shadow-dom 屬性,可以讓他幫你產生 grid layout 的 divs。而在 component 內除了能撰寫一般的 CSS 外,也能利用他提供的 utility function 快速達到一些 random、pick one 等等的效果。
我很喜歡作者在官網上很霸氣地一句話:The limit is the limit of CSS itself.
從他的作品集來看,所言不假。
css-doodle 的官網就是一個詳細的使用手冊,每個 function 與屬性的旁邊都有對應的實際範例幫助你理解。提供的函式說多不多,說少也不少,一個一個看完也不一定能馬上記住,還是得要在實作時邊對照查詢。
所以說做中學還是最快的,今天文章最後就來解析一個袁川利用 css-doodle 製作的作品,一方面能臨摹大神的創意,另一方面也能比較深刻的了解這些函式的用法。
挑一個我很喜歡的作品,非常的漂亮!
這個作品分成兩個 component,一個是背後不斷滑落的線條,另一個是類似不斷旋轉的 DNA 螺旋。
我們單就 DNA 螺旋來看,程式碼非常簡短:
:doodle {
@grid: 45x1 / 40vmin;
position: relative;
z-index: 1;
}
:container {
transform: translate(50%, 33vmin)
}
:after, :before {
content: '';
@place-cell: center;
@size: 100%;
background: radial-gradient(
@p(#FFFDE1, #FB3569) @r(70%),
transparent 0
)
@pn(30% 50%, 70% 50%, 50% 60%) /
@r(.1vmin, 5vmin) @lr()
no-repeat;
}
@place-cell: centerr;
@size: 100%;
will-change: transform;
animation: r 4s linear infinite;
animation-delay: calc(-4s / @size() * @i());
--translate: translateY(calc(-66vmin / @size() * @i()));
@keyframes r {
from { transform: var(--translate) rotate(0) }
to { transform: var(--translate) rotateZ(-1turn) }
}
要使用 css-doodle 的話,上面這段 css 是要放在 <css-doodle>
component 內的:
<css-doodle>
<!-- Your css -->
</css-doodle>
:doodle
是針對 <css-doodle>
這個元素本身的 selector,範例中設定了 position
與 z-index
,比較特別的是 @grid
的使用。
@grid
是用來定義 css-doodle 的 grid layout,你也可以直接設定在 <css-doodle grid="5">
上,但是 @grid
的屬性設定會有比較高的優先權。
@grid: 45x1 / 40vmin;
代表的是 doodle size 為 41vmin,且其中有 45 x 1 的 grid。(vmin
代表的是當前 vh
與 vw
中最小的值)
當你設定了 grid
後,css-doodle
的 shadow-dom
會長出類似如下的結構:
會產生一個 <div class="container">
,並且在裡面產生對應你所設定的 grid
數量的 <div cell>
。
其中有個重點是,在 <css-doodle>
元件內設定的 CSS 會套用到每一個 <div cell>
,以 [cell]:nth-of-type(1)
這樣的 css selector 把生成的 css style 個別應用到 DOM 上。
:container
代表的是 :doodle
內 grid layout 的 container,也就是上面說到的 <div class="container">
。範例中設置 transform: translate(50%, 33vmin)
也就只是把其偏移到畫面中間的位置。
接下來的 :after, :before
是整個圖形的重點:
:after, :before {
content: '';
@place-cell: center;
@size: 100%;
background: radial-gradient(
@p(#FFFDE1, #FB3569) @r(70%),
transparent 0
)
@pn(30% 50%, 70% 50%, 50% 60%) /
@r(.1vmin, 5vmin) @lr()
no-repeat;
}
@place-cell
是用來指定 cell 相對於整個 grid layout 中的位置,在此 component 的 :after, :before
都設定 @place-cell: center
,就代表 grid 中 cell 的 :after
與 :before
都置於相對於整個 grid 的中心位置。
很單純就是同時設定 wdith
與 height
的值。
作者利用 grid 內每個 <div cell>
的 :after
與 :before
,使用 background
與 radial-gradient
屬性來製造我們看到的圓點。
主要使用到 background-image
、background-position-x|y
、background-size
、background-repeat
四個屬性。
如果單純取其中一個 cell 來觀察的話,會長這樣:
若再加上 css-doodle
提供的一些 random (@r), pick(@p) 等 utility function,就可以造成每一個 cell div 都各自擁有兩個不同顏色、大小、位置的圓點。
接下來針對 background
屬性所使用到的 utility function 作介紹。
@p
為 @pick
的 alias。它會從給定的 list 中隨機挑選數值出來:
@p(#FFFDE1, #FB3569)
就會從這兩個顏色中隨機挑選一個。
@r
為 @rand
的 alias。接受至少一個參數,作為區間的頭與尾,它會從給定的區間中隨機挑選兩個數值。
因此範例中,background-image
的 radial-gradient
屬性:
radial-gradient( @p(#FFFDE1, #FB3569) @r(70%), transparent 0 )
第一層的設定等同於隨機選取兩個顏色(紅、白),並從 0 ~ 70% 之間選取一個百分比數值作為大小。
@pn
為 @pick-n
的 alias。會從給定的 list 中,一個一個取出,對應到 grid
中的 cell
。
以範例來說,就會依序設置 cell
的 background-position
值為 30% 50%,70% 50% 和 50% 60%。(依照我觀察,似乎不會保證依照列表的順序,但還是會一個一個對應設置到 cell
上)
至於 background-size
,範例使用 @r(.1vmin, 5vmin) @lr()
,其中 @r(.1vmin, 5vmin)
就是從 .1vim 到 5vmin 中取一個值,而 @lr
則代表取得最後一個 random 函式所取得的數值,也就是 @r(.1vmin, 5vmin)
的結果。最終的 background-size
就會是兩個相同的隨機值。
到目前為止,設定出來的圖形會長這樣:
所有的點會集中在一起,因為我們的 grid 是 45x1
,也就是只有一個 column。
範例中,作者用 translateY
的方式來將每個點隨機向 Y 軸移動,並加上 @keyframe
與 rotate
的效果,就完成了螺旋的生成圖案:
animation: r 4s linear infinite;
animation-delay: calc(-4s / @size() * @i());
--translate: translateY(calc(-66vmin / @size() * @i()));
@keyframes r {
from { transform: var(--translate) rotate(0) }
to { transform: var(--translate) rotateZ(-1turn) }
}
唯一用到的 utility function 是 @i
,代表當前套用到該 css 的 cell
的 index。
螺旋的部分到此為止,而另一個滑落效果的 doodle 運用的技巧也差不多,但是效果卻完全不同,有興趣的讀者可以研究 codepen 上的原始碼。
生成藝術除了要有創意外,擁有好的實作工具也很重要,css-doodle
算是給了想嘗試生成藝術的人一個好的開頭,像是文章一開始所製作的簡單生成藝術,也都能夠透過 css-doodle
來實作,程式碼會簡短很多。
而透過 processing 等工具能做出更多效果,甚至能搭配音樂來做出不同變化,今天只是透過 css-doodle
的啟發,練習了一些簡單的生成藝術,體驗了一下,非常有趣,推薦大家一起來試試!
袁川的影片後半段還有很多使用絢麗技巧的生成藝術,非常推薦大家花個四十分鐘把影片看完,相信會有不少收穫,就算不想自己嘗試,欣賞他所創作的作品也是一種享受。