Infinite Mondrian Art｜無限生成的蒙德里安色塊
更新於 發佈於 閱讀時間約 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 位的亂數組合來設定，進一步增強變化的豐富性
- 使用顏色的排列順序和數量作為判斷重複的標準，達到無限次不重複的蒙德里安色塊生成
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
扁平式繪畫風格（Flat Design）
是一種極簡主義的藝術風格，強調使用簡單的幾何形狀和鮮明的色塊來創造圖像。這種風格通常避免使用陰影、漸變和其他三維效果，使畫面看起來平坦而清晰。
特點：
簡單的幾何形狀：使用圓形、方形、三角形等基本形狀來構建圖像。
鮮明的色塊：色彩大膽且飽和，通
裝置藝術是一種獨特創作形式，追溯到法國藝術家杜尚。
「失聲畫眉之歌」探討數位時代的記憶議題，文本、水墨長卷、遮陽網、展牆，模擬社群軟體窺看私人情感的多重視角，觀者透過不同的觀賞狀態，感受作品的多維時空。
裝置藝術的魅力在於觀眾可以走進作品，當他們走出作品時，已經不一樣，這正是藝術的魔力所在。
多樣性：色彩斑斕的畫布
走進一個美術館，映入眼簾的是各式各樣的畫作：有印象派的柔和筆觸，也有抽象派的狂野線條，還有寫實主義的精緻細節。你的作品集也許就如同像這樣，每一頁都讓人驚艷。
愉悅，這場展覽套票購入許久，雖工作與家庭忙碌，仍心繫展覽，渴望一窺莫內於《光》的創作，終於，我完成了這趟一日短旅。
在這次的展覽中，很多的畫作，都是同一主題在不同光線和空氣下變化無窮的外貌，甚至是四季替換下的不同光線。
「睡蓮」系列亦是，因油彩描繪下來的，不是所見的物體本身，而是畫家觀照的過
這篇文章分享了作者對於印象派畫派展覽的心得。作者描述了在展場中親眼所見的震撼和對畫作的愛慕之情，讓讀者感受到了作者對於印象派藝術的熱愛和震撼。
這次的講座是印象派150周年系列講座，講的是愛德華．馬內〔奈〕，馬內也是這一次奇美特展，有展品展出的大師之一，歸類在印象派繪畫，不過這次的講座對馬內下的標題是：不算印象派的印象派先驅，這又是為什麼呢？讓我們在看展之前先感受一下大師的魅力吧！
可能包含敏感內容
圖片來源 / 維基百科
文藝復興是歐洲歷史上一個極其重要的時期，這個時期涌現出許多傑出的藝術家，他們的作品不僅在當時引領潮流，也對後世的藝術產生了深遠的影響。
米開朗基羅（Michelangelo Buonarroti）：米開朗基羅是一位全才型的文藝復興大師，他以雕塑、繪畫和建築等多種藝術形式展
在這個工作坊中，將探索如何用單一色彩的奇異筆，在充滿霧面質感的吸水杯墊上創造獨一無二的線構曼陀羅藝術。曼陀羅既有結構又可以拆解成簡單的元素，讓學習變得容易。課程提供簡單的創作方式，無需繪畫經驗，讓直覺引領創意，並體驗「不完美也是一種美」的生活哲學。
在波茨坦的「巴貝里尼博物館」遇到一整層樓的印象派和莫內。看他的畫會不由自主被捲進場景當中，那些筆刷的斑點色塊像是會流動的一樣，有時候會先站近了細看斑點紋路，再站遠了看整體色彩，一幅畫能夠讓人駐足好久好久，喜歡他對光影的敏銳洞察，好像轉瞬即逝的時間都被他捕捉進畫中了。
說到印象派的畫，我想到20年前的自己，那時人生第一次去北美館看印象派的畫展，是跟職訓局的同學們一起去看的，那時覺得好SHOCK，覺得很多在書本上介紹的畫家，都在這邊看到了，而且看到的是真跡，超級感動的。
那時在一堆的畫作當中我後來愛上了莫內的紫色，他的睡蓮池的紫色系列讓我覺得很迷幻，那時
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
扁平式繪畫風格（Flat Design）
是一種極簡主義的藝術風格，強調使用簡單的幾何形狀和鮮明的色塊來創造圖像。這種風格通常避免使用陰影、漸變和其他三維效果，使畫面看起來平坦而清晰。
特點：
簡單的幾何形狀：使用圓形、方形、三角形等基本形狀來構建圖像。
鮮明的色塊：色彩大膽且飽和，通
裝置藝術是一種獨特創作形式，追溯到法國藝術家杜尚。
「失聲畫眉之歌」探討數位時代的記憶議題，文本、水墨長卷、遮陽網、展牆，模擬社群軟體窺看私人情感的多重視角，觀者透過不同的觀賞狀態，感受作品的多維時空。
裝置藝術的魅力在於觀眾可以走進作品，當他們走出作品時，已經不一樣，這正是藝術的魔力所在。
多樣性：色彩斑斕的畫布
走進一個美術館，映入眼簾的是各式各樣的畫作：有印象派的柔和筆觸，也有抽象派的狂野線條，還有寫實主義的精緻細節。你的作品集也許就如同像這樣，每一頁都讓人驚艷。
愉悅，這場展覽套票購入許久，雖工作與家庭忙碌，仍心繫展覽，渴望一窺莫內於《光》的創作，終於，我完成了這趟一日短旅。
在這次的展覽中，很多的畫作，都是同一主題在不同光線和空氣下變化無窮的外貌，甚至是四季替換下的不同光線。
「睡蓮」系列亦是，因油彩描繪下來的，不是所見的物體本身，而是畫家觀照的過
這篇文章分享了作者對於印象派畫派展覽的心得。作者描述了在展場中親眼所見的震撼和對畫作的愛慕之情，讓讀者感受到了作者對於印象派藝術的熱愛和震撼。
這次的講座是印象派150周年系列講座，講的是愛德華．馬內〔奈〕，馬內也是這一次奇美特展，有展品展出的大師之一，歸類在印象派繪畫，不過這次的講座對馬內下的標題是：不算印象派的印象派先驅，這又是為什麼呢？讓我們在看展之前先感受一下大師的魅力吧！
可能包含敏感內容
圖片來源 / 維基百科
文藝復興是歐洲歷史上一個極其重要的時期，這個時期涌現出許多傑出的藝術家，他們的作品不僅在當時引領潮流，也對後世的藝術產生了深遠的影響。
米開朗基羅（Michelangelo Buonarroti）：米開朗基羅是一位全才型的文藝復興大師，他以雕塑、繪畫和建築等多種藝術形式展
在這個工作坊中，將探索如何用單一色彩的奇異筆，在充滿霧面質感的吸水杯墊上創造獨一無二的線構曼陀羅藝術。曼陀羅既有結構又可以拆解成簡單的元素，讓學習變得容易。課程提供簡單的創作方式，無需繪畫經驗，讓直覺引領創意，並體驗「不完美也是一種美」的生活哲學。
在波茨坦的「巴貝里尼博物館」遇到一整層樓的印象派和莫內。看他的畫會不由自主被捲進場景當中，那些筆刷的斑點色塊像是會流動的一樣，有時候會先站近了細看斑點紋路，再站遠了看整體色彩，一幅畫能夠讓人駐足好久好久，喜歡他對光影的敏銳洞察，好像轉瞬即逝的時間都被他捕捉進畫中了。
說到印象派的畫，我想到20年前的自己，那時人生第一次去北美館看印象派的畫展，是跟職訓局的同學們一起去看的，那時覺得好SHOCK，覺得很多在書本上介紹的畫家，都在這邊看到了，而且看到的是真跡，超級感動的。
那時在一堆的畫作當中我後來愛上了莫內的紫色，他的睡蓮池的紫色系列讓我覺得很迷幻，那時