turnturn.me logo
時尚寵程式!

一些變數,一些規則,隨便連結,到視覺化的元素上,就是,可以說,在創建一個體系;然後,說好聽的是,放它自由,讓它飛揚,燦爛,變換,萬千!其實不是,只能給它有限的自由,就醬 😂

先坐下來分享各式繽紛多彩的eye candy:時尚的、甜美的、休閒的、透明的、呆萌的、慵懶的、療癒的、復古的、聯名的、漸層的、快閃的、經典的、限量的、彩妝的、甜點的、文具的、手搖的、文青的、優雅的、撞色的、bling bling的、帥氣的、前衛的、俏皮的、質感的、簡約的、渡假的、拼接的、耍廢的、個性的、潮牌的...

沈醉在eye candy奔放耀眼的光澤中,盡情揮灑想像,創作就是玩,沒有標準答案。刺激的來了,偵探魂上身 - 藝術模仿自然,時尚、設計亦是 - 這裡需要悉心觀察,分析事物之間隱含的連結,馳騁想像,探究宇宙(自然與人文)的奧秘...

如此一番激昂的操作是因為面對個個璀璨迷人魅惑的candy,我們要以一種超然的、純粹審美的心境去感受其與各種現象、事物、包括其自身組成元素之間交相輝映的規律及關聯性(可別另開頁面上網瞎拼喔:),可朝向構圖、抽象化、原型化、模組化的方向去思考,讓兩個異世界(時尚與程式)神奇地連接起來!

那麼萬事萬物之間隱含的連結是什麼?最單純的總結即為"數",也許這是為什麼程式(0和1)可以擬真(virtual reality)?為什麼存在感官聯覺(synesthesia)與共時性(synchronicity)的現象?我們帶著蓬勃的朝氣,發出誠摯的驚嘆,涵詠著一絲詩意的領悟...

程式也愛漂亮?

以編程來看,"數"顯現在2D或3D中就是螢幕上一個點的位置座標,點-線-面即成不可勝數之圖案,立體化即成不可勝數之形體,而人類正好擁有與生俱來對圖形與空間優異的直覺辨識力。不可否認程式是"抽象化"的產物,Javascript在某一個位置,C可能在更底層,然後(不知又過了幾層:)是0和1,於此反向工程(reverse engineering)可泛指重新讓程式"具象化"的探索。經由一些簡捷的程式操作(例如換個數字),讓使用者能在螢幕上立即體驗到"同步視覺反饋"(具象化原本抽象的程式碼),便能大有助於在人腦中建構並強化一種現學現賣、超有成就感的良性反饋循環;而課程的設計者也因為有這層"同步視覺反饋"而得以盡情發揮,酷炫的時尚與設計元素、可愛搞笑的卡通圖案、以及各種五花八門、豐盈飽滿的創意與巧思等等,都可以與程式無縫連接進來,並激發出奇妙的火花!

打造"自動生成"就是以程式碼設計一個體系,然後大家都可以興高采烈地帶一盒自己專屬的eye candy回家!你的程式會像百寶箱一樣,源源不絕地生成充滿驚喜與感動的糖果。輕鬆享受這個豐富、光彩鮮明、並充滿直觀的探索歷程吧。

許多有趣的天然現象成為古往今來創作靈感的泉源,以下列出一些我們將會涉獵到的領域:sound to shape聲音賦形、液態與光(波、頻率、震動、共鳴等)、peekaboo人類最原始的游戲、fractal/recursion創造夢幻的色彩渲染、force/filter力/濾鏡與大自然的野性紋路、noise/random雜訊/隨機函數創造有機質感、排列組合(例如同樣是碳原子,排列方式不同,可形成天差地別的鑽石或石墨筆芯)、particle(光彩奪目的bling bling)、pixel/nano-像素/納米、數字與顏色(簡單好用又新鮮的色盤生成法,只需一點幼稚園數學)等等。

舉例來說,以程式碼來詮釋"聲音賦形+蕾絲設計":Mandala Art可視為聲波藝術,以精緻神秘的圖案著稱,而蕾絲從代表宗教的聖潔到當代的性感浪漫,輕訴著什麼秘密?我們變身福爾摩斯,細心觀研Mandala與蕾絲設計本身的獨特性、歷史、與其他領域例如建築、漫畫、烹飪等天馬行空的共通性,也許會發現一些看似平凡卻不凡的原理或架構隱藏其中?

下一步百花齊放、繁星燦爛-在提到的原理或架構之上,盡情將富有個人特色的創意加入程式體系中,勇於嘗試恣意傾灑。有的時候隨意修改一個數字,一瞬間量變到質變,好像被光束傳輸到平行時空,眼前盯著一幅全然新穎的視覺呈現。

能在瑰麗眩目的時尚設計中找到與自然現象相映成趣的秘密真是太棒了!上文提到將陸續涉獵的主題部分來自對Generative Art/Design的探討與分享,可為我們提供諸多靈感並打好概念地基。

在"視覺化程式碼"的領域,有不少經典的語言架構影響深遠,使用js/css/html的創作亦是靚彩纷呈。有鑒於此,再多聊聊什麼是前文所提"豐富、光彩鮮明、並充滿直觀的探索"之具體內容及特色?
a. 採用濃濃香草口味的js/css/html組合,輕盈便捷。
b. 不談程式的基本觀念,什麼array、variable、object、loop、function等等(不要先嚇人),只管用程式做美美的、琳瑯滿目的創作(完全有可能,"童話解構"程式碼與設計上的巧思),隨時加點猛料:閃閃動人的particle粒子效果、3D motion(華麗轉身之視角飛移)、physics(例如引入奇妙的Q彈感,做成吊飾、項鍊或遊戲等)、濾鏡和特效、或加入音效。經由不斷實作eye candy讓程式的基本觀念自然而然地融入整個創作過程,在創作者自發的好奇心驅使下,主動去理解、親近、運用,並且越用越上手。
c. 時尚掛帥!時尚的魅力從何而來呢?一件漂亮的藝術品掛在牆上是客觀的存在,但一旦穿到人的身上,就啟動了主觀的、情感的、引人遐思的魔法了... 時尚是個人風格與審美的展現,風格與審美春去秋來,真正心繫的是人。前文提到程式是抽象化的產物,理性、精確、波瀾不驚,而時尚竟是如此具象,並以豐潤的五感體驗,潑灑鮮活印象,冰火的結合處處飽含張力,充溢驚喜。

同樣的主題,分別用css/html、svg或canvas來表現,會有什麼不同的體驗?[這裡簡單解釋一下像素與向量...] 是時候見見幕後大boss了:) 就是所謂的"效能",有興趣可以多方對照並發掘更多奧秘,例如Photoshop和Illustrator這兩個軟件的內核編程或介面UI設計的某些原理。

善變的糖果 法式嬌奢 泡泡糖 晶燦宇宙 即興樂團 虹彩光 絲光 絲絨光 奶油光 果凍光 珍珠光 漆光 啞光 霧光 柔焦凝光 貝殼光 琉璃光 珠光 剔透水嫩 濃郁炫亮

未完... 努力中。文章完成後會錄製成音頻。

曾經,一位天真爛漫戴著眼鏡奮力踩著自行車的大學生,對著突來的鏡頭回喊: Because it's my duty! 如此朝氣蓬勃的音容... 歷史的一瞬間... 驚鴻的一瞥.... 我想說: 不論你現在在哪裡,我們聽到你了,好多人都聽到了!

更多豐富內容準備中...

甜甜圈 肉桂捲 卡士達奶霜花 檸檬派
吉拿棒 芒果雪花冰 鳳梨酥
和菓子(Wagashi) 節氣
花鳥風月 祥瑞 慶典
寫意 情致 菁蘊
詩 歌 茶道 靜心
portion, courses
愛心 infinity 果實剖面
花 葉 眼
穹頂(dome) 球 盤
cone 蘇美人拿松果
冰淇淋甜筒 魔術師帽子
皇冠 戒指 奔奔石 璽 璧 玉
玉 樂 妙玉 寶玉 黛玉
天圓地方 方矩圓規
青山綠水 紅牆金瓦 紅牆碧瓦 白牆黑瓦
紅土 紅牆(其他世界知名建築)
紅牆金頂 - 布達拉宮 純金
紅牆金瓦 - 紫禁城
對比一下 國父紀念館
中正紀念堂 國家兩廳院 (自由廣場)
以及 韓國的青瓦台(Blue House)
之配色
蔣介石隨宋美齡信基督
韓國則擁有廣大基督教與天主教眾
顏色之象徵意義
放射狀光芒 千手 曼陀羅
碑 柱 樑 坊
猩猩的黑碑 廣漠矗銀柱
自由的空間 Math.random
薔薇 蘭花 鬱金香 繡球花 海芋...
生命之花, 菊の御紋,
蘇美人手錶, Chanel山茶花...
蓮 玫瑰 花圖騰...
圓 同心圓 旋窩 放射光芒
圓 演生成 所有形狀與立體
符號
十字 太極圖 万字
玫瑰的名字 達文西密碼 魷魚遊戲...
腸 腦
反清復明 反㳉復汨 -
圓明園 正大光明 清明上河圖
小明早起去上學...
能量場 循環 轉動 有進有出
一生二,二生三,三生萬物
好喔 我好像也知道
其實沒有
三生萬物
道生一
道 動 走字旁 首 有知有行
數學 數字 神話 寓言
象徵意義 一沙一世界
一樹千枝 一源萬派
草蛇灰線 伏延千里
格致 好奇
宋朝 數學 科技 美食
光 蘋果光 有營養的光
麥拉寧 松果體
輪 齒輪
生命之輪
What goes around...comes around
動物 與 植物 symbiosis
Game of Thrones...
Hugo, Time Machine, Grand Budapest Hotel
旋轉 楊貴妃 胡旋舞 芭蕾舞 花式溜冰 體操...
人類喜歡 空中旋轉
暈 專注中心 全觀
講一個八卦 楊貴妃 武惠妃
太平公主 武曌 楊氏 五代女人
木子李 Lee Yung
(西)夏 唯一 無史 why?
(西)夏文 為什麼都看不懂 又很熟悉
是不是拆字 再以Math.random排列組合鏡像翻轉?
俄羅斯為什麼熱衷研究(西)夏
擒縱器 欲擒故縱 七擒七縱
機械鐘 機械文明
摩擦力 作用與反作用力
非黑即白 零和 二元論
以太 太以
聲音 火 光
自然光 霓虹光 藍光 日光燈的光 LED光
incandescent light 紅外線
以柔克剛
萬物負陰而抱陽,沖氣以為和。
榫卯 斗拱
建築與戲劇 同源
Machu Picchu (Peru, 12 sided stone),
Angkor Wat (Cambodia),
Adam's Calendar (South Africa),
Puma Punku (Bolivia, H),
Pyramids (Egypt, Mexico, Indonesia, China...)
Göbekli Tepe (Turkey), Moai (Easter Island)
Stonehenge (England)...
與星座相對應
三星堆 三星伴月 山海經
夏 summer 蘇美 sumer
金牛道 鎏金 星 沙 成 (西)夏 Wall Street

數學秘笈?
算數書 九章算術 割圓術
π 眼睛 golden ratio
gird 經緯 編織 刺繡
通經斷緯 緙絲繡
提花機
Jacquard machine
Difference engine
Turing machine
結繩記事 結本 花本 綜片
天工開物 宋應星
結花本
凡工匠結花本者,心計最精巧。
畫師先畫何等花色於紙上,
結本者以絲線隨畫量度,
算計分寸杪忽而結成之。
張懸花樓之上,
即織者不知成何花色,
穿綜帶經,
隨其尺寸度數提起衢腳,
梭過之後居然花現。(loom - looming)
蓋綾絹以浮輕而見花,
紗羅以糾緯而見花。
綾絹一梭一提,
紗羅來梭提,往梭不提。
天孫機杼,人巧備矣。
寸錦寸金
花樓機 - 方圓綺錯 極妙奇窮
李白 蜀道難
難於上青天... 爾來四萬八千歲...
三星堆 出土絲綢 大立人著錦繡
絲 拉丁文 serica silk
古希臘文與拉丁文中的serica, seres等
與絲相關的字彙
可能自中文的 蜀 或是
成都的成(城)
轉譯而來
絲(?)國 大名鼎鼎 寰宇皆識
唯 古代(在秘密曝光前 查...)
不輸出生絲(極上機密)
只出口成品 錦 帛 繒 絹 綾 羅 綢 緞
蜀裡面不是有個蟲嗎?
可不是蠶寶寶嗎?
其上之獨目彷彿在
傾訴養蠶有多辛苦
(我都不能出去玩 要一直看著...)
又好似外界窺探的大眼睛
(快 把蠶寶寶藏好)
春蠶到死絲方盡
羽化
metamorphosis 完全變態
蛻變 飛翔 自由 的夢想
茅盾 春蠶
楊采妮 自梳女
薄如蟬翼 輕如氤 閃爍如朝露的
一方真絲
承載太多
蜀錦 天下母錦
Cleopatra
埃及木乃伊的頭髮上發現了絲綢
年代約爲公元前10世紀

漢字多象形 活靈活現 逗人遐思
正因如此 聲(發)音裏可能藏著
更深層的秘密
眾口鑠金 意識改變現實
(方言即古語)
"天子"逃難
成(都)的古名?
西安的古名?
(雄安 也想來借個光...)
(日月星辰 改朝換代
其他古都如開封洛陽杭州南京等並無此待遇)
聖經 Nikola Tesla 各個古文明...

Corinthian columns
特斯拉 369, 視覺化, Volkswagen
費氏數列 遞迴 分形 自相似
遞迴 分形 自相似 LV, GUCCI, Chanel...
的monogram, 老花, 經典logo紋飾
對稱 不對稱設計
能量場 Adonis倒影
鏡像 logo - Chanel, Louis Vuitton, GUCCI, Giorgio
Armani, Fendi, Balenciaga, Givenchy, Tag Heuer,
Patek Philippe, Coach, Tory Burch, BCBG...
留長髮 梳高髻 戴高帽(聳立的頭飾)
長髯 (女性)臉塗白粉 點第三隻眼 世界共通
孩童 麻花辮 沖天辮 犄角樣
小丑 設計與符號
饕餮紋 雲紋 旋窩紋
mama 語言共通 媽媽 娘 母=moon
月亮?
紅樓夢 石頭記
金瓶梅
Pirarrãs、皮拉哈人
iteration, concat, push, filter, shuffle,
shift, split, splice...
可頌 馬卡龍 竹子 塔 彈性
千層派 條紋 舒芙蕾 Voronoi
gaufres, Tarte Tatin 格紋
水果蛋糕 壽司 切片 剖面 配色
扭蛋 gashapon 盲盒
隨機 運氣 話題 樂透
收藏癖 collection collectable
comics, manga
universe

光 火
冶金 鑄鐵(青銅) 燒陶(瓷) 煉丹 製磚...
不缺黃金 煉金術 Alchemy
= 煉金剛不壞之身 長生不老 起死回生?
Frankenstein 電
電 是廣義的電 需有兩個磁極poles
產生一個toroidal能量循環場
磁 電
inorganic - organic
oxygen, nitrogen, hydrogen, sulphur, phosphorus
石頭 有靈
泥 泥人 造人
水唯一三態共存

糖(醣)容易上癮 間或
天然代糖 微麩輕碳

葉 叶 陰陽 阴阳 龍鳳 龙凤

turnturn.me
Turnturn Pinterest 分享美圖 Turnturn Instagram 分享美圖
分享 #turnturn
turnturn.me logo
turnturn.me © 2026