Infinite Mondrian Art｜無限生成的蒙德里安色塊

2022/03/25閱讀時間約 2 分鐘

簡介

2022 年 1 月的一個假日，閒逛於誠品書局，看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和蒙德里安收納包，其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知，身為印象派/幾何抽象畫派先驅的蒙德里安並不是一開始就形成這種使用井然方格搭配明亮色彩的藝術風格，早年的蒙德里安畫過寫實的人物和風景，後來逐漸把樹木的形態簡化成水平線與垂直線的抽象構成。崇拜直線美的他，認為透過直角可以靜觀萬物內部的安寧，於是在 1917 年，蒙德里安開始提倡自創的新造型主義風格，運用線條和色彩區塊實現自己創造普遍現象秩序與均衡美的理論，進而對現代建築、工藝和設計產生深遠的影響。似有共鳴的我將他的藝術風格與程式做聯想，最終作出了自己的第一個生成式藝術 (Generative Art) 創作。

外觀與互動設計

排版採手機優先 (mobile first)，並做到在任何尺寸裝置上，保持一致絕佳比例的響應式設計
封鎖不必要的文字選取、拖拉和右鍵點擊操作
使用偏灰的白色作為背景顏色以減少視覺上的不適感及增加畫面層次
使用廣泛出現在藝術領域的 Open Sans 作為 Loading/歡迎頁面字型
使用淡入、淡出動畫銜接 Loading 頁面與色塊生成展示之間的切換
從 HTML 保留色中採集六種顏色，並依照：紅色 1：黃色 1：藍色 1：灰色 1：白色 10 的比例生成蒙德里安色塊
色塊生成設計上，去除了黑色的邊框以及使用圓角增添親近感，另外也使用外陰影讓視線強化、集中於色塊本身
設計頁面捲動達到總體高度 80% 時，輸出新的 12 個色塊，以此達到順暢的無限生成和捲動

開發紀錄

使用 petite-vue 的模板語法將色塊資料視覺化
使用 CSS Grid 作為色塊內元素的排版方式，並使用亂數達到 2x2 到 4x4 豐富變化的輸出形式
每個色塊行 (row) 與列 (column) 的比例以小數點後 2 位的亂數組合來設定，進一步增強變化的豐富性
使用顏色的排列順序和數量作為判斷重複的標準，達到無限次不重複的蒙德里安色塊生成

為什麼會看到廣告

37會員

31內容數

短篇奇幻作品將不定期更新。

留言0

查看全部

發表第一個留言支持創作者！

Ray C的沙龍的其他內容

HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具

雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...

#設計 #程式設計 #產品設計

Horizontal Scrolling Theater｜互動效果豐富的橫向捲動電影院

以前就想過要做一個展示電影的頁面，這次使用 Vue 3 搭配 GSAP，並結合自己收藏的 46 部藍光電影所做成的 API 做串接，達成能夠橫向捲動的電影購物頁面。實作上，除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能，另外在點...

#設計 #平面設計 #程式設計

Ray Chang Space｜支援 Markdown 內容管理系統的作品集網站

我始終認為，設計與開發是一體兩面，設計本是為開發而存在，開發也是為了完成設計，兩者相輔相成、互相影響。因此在網站首頁中，使用建築圖與對設計和開發的解釋，表現自己在前端學習上，執著於兼顧清晰的設計與流暢的開發；網站設計上，我以報紙風格做為基礎，使用噪點填充背景以實現擬似紙張的質感，加入平滑滾動與...

#程式 #設計 #平面設計

Ghibli Gallery｜重新設計吉卜力工作室作品相簿

2020 下半年在全世界仍受到冠狀病毒肆虐期間，吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照，表示在未觸法的情形之下可自由下載使用，並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好，也未在移動裝置上做排版優化，加上分批公開的作品劇照未整合在一...

#設計 #平面設計 #程式設計

Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單

這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...

#設計 #程式設計 #產品設計

Vanilla Calculator｜立即顯示結果的優雅計算機

我並非這美術設計的原創，不過得益於 Instagram 上 @uixperience 的作品參考，才實現了這優雅計算機的外觀。在互動的部分，我讓按鍵在按下時減少陰影，並加深按鍵背景的顏色，這樣就像是真的被按了下去一樣；另外，在顯示計算結果的部分，透過 JS 增減 CSS class 的方式隨時...

#設計 #平面設計 #產品設計