讓你的作品集「活」起來:日式互動粒子背景拆解
很多設計系同學在做作品集網頁時,最頭痛的就是「首頁太死板」。想要一點互動感,但看到程式碼就頭大。
其實,要做出像 TeamLab 那種「有靈魂」的視覺效果,不需要成為工程師,你只需要掌握「粒子系統」這個簡單的邏輯。
今天我想分享如何用 p5.js 做出一個具有日式美學(低飽和、流動感、留白)的互動背景。
在動手寫 code 之前,我們先把視覺拆解成設計語言。這篇文章追求的不是「科技感」,而是「禪意」。
不用複雜的工程邏輯,用三個簡單步驟,打造出具有日式美學(低飽和、流動感)的互動粒子背景,適合放在作品集首頁。
讓你的作品集「活」起來:日式互動粒子背景拆解
很多設計系同學在做作品集網頁時,最頭痛的就是「首頁太死板」。想要一點互動感,但看到程式碼就頭大。
其實,要做出像 TeamLab 那種「有靈魂」的視覺效果,不需要成為工程師,你只需要掌握「粒子系統」這個簡單的邏輯。
今天我想分享如何用 p5.js 做出一個具有日式美學(低飽和、流動感、留白)的互動背景。
在動手寫 code 之前,我們先把視覺拆解成設計語言。這篇文章追求的不是「科技感」,而是「禪意」。

【互動藝術 DIY】用 p5.js 做一塊會呼吸的粒子背景 ...

這是做出來會長這樣——看到那些「會呼吸」的漸層了嗎?不是漸變,是雜訊。但看起來像是有生命的流體。 
A few days ago, I wrote about getting bored with flat, static websites and trying to build something...

為什麼那個會「注意你」的展品,反而讓你更想靠近 博物館互動設計的隱形槓桿 東京。 teamLab...

A beginner MediaPipe JavaScript example: build a rainbow drawing app in the browser. No npm, no...

Static portfolios blend together. Every designer's site has the same grid of JPEGs. We wanted...