用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格
用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格

如果你的瀏覽器會畫畫,那它會畫出怎樣一幅畫呢?

如果瀏覽的小說文字多,那可能是文字組合多多的黑白圖畫;如果是線上看不同的動漫作品,那估計是色彩繽紛的普普畫作;要是每天都在看攝影美圖,那瀏覽器畫出的可能是一幅光影變幻的印象畫。

可惜瀏覽器不是AI,沒辦法根據自己的代碼、特性來畫一幅畫。

Web Browser1.jpg
Chrome的畫。
圖/ 愛范兒

但這也沒關係,數位藝術家黛安娜.史密斯(Diana Smith)設計了一串純web的程式碼,每個瀏覽器在加載頁面時都會將其呈現為繪圖。

史密斯一直以來都在進行的嘗試是用CSS和HTML作出畫作。所有的元素都是手動的輸入,僅允許使用Atom文本編輯器和Chrome的開發者工具進行操作,同時SVG元素的使用也可能受到限制。它的項目和源代碼都可以在GitHub中查詢。

這一次,史密斯的「作畫」和不同的瀏覽器有關。除了Chrome瀏覽器能夠呈現圖片本身預想的畫作外,其它瀏覽器都會「畫」出不同的圖像。這也展示了不同瀏覽器轉換工作的差別。

Web Browser2.jpg
▲ Diana Smith的其它藝術作品
圖/ 愛范兒

這不是說其它的瀏覽器都不如Chrome,只是作者在一開始並沒有考慮過跨瀏覽器兼容的問題。

但就是因為沒有兼容,這串代碼反而畫出了不同的「有趣」圖畫。

由於這個項目的藝術性,因此我不關心跨瀏覽器的兼容性,所以即時預覽可能在除Chrome之外的任何瀏覽器中看起來都很可笑。

在Safari瀏覽器中,蕾絲的花邊裝飾覆蓋在了女人的臉上,這片蕾絲本應該出現在女人的脖頸後方作為裝飾品。

Web Browser3.jpg
Safari的畫。
圖/ 愛范兒

而在2014版本的Opera瀏覽器中,畫作變得更加詭異了,有了一種全然不同的風格。脖子分成了三個部分,眉毛、頭髮、眼睫毛的位置都出現了偏移和錯位,以一種更像條碼的方式展現。脖子、眼睛也出現了位置的偏移,這是一張平面的、詭異的畫作。

Web Browser4.jpg
Opera的畫。
圖/ 愛范兒

而讓人感覺十分複雜的是Edge瀏覽器。雖然他的名字Edge有「邊緣」的意思,但在這次作畫中,它自動「畫」掉了所有的邊,讓項鍊消失,使整幅圖畫更為平滑。

這幅畫作還是所有畫中看起來最為陰沉的一幅。

Web Browser5.jpg
Edge的畫。
圖/ 愛范兒

還有曾是世界上最流行的瀏覽器——Netscape Navigator(網景領航員),儘管它的市場佔有率一度達到了90%,但今天可能很多人都沒有聽過它的名字了。

即便如此,它依然是最有風格的瀏覽器創作者,畫出的圖像自成一派。

臉變成了方塊,嘴巴、眼睛等五官都變成了不同大小的方塊,深色的毛髮變為了條碼狀的線條。有點像樂高,也有點像《當個創世神(minecraft)》風格。Vice覺得這個顏色和微軟的Edge瀏覽器基本保持了一致,或許是因為這兩家公司都曾統治了90年代。

Web Browser6.jpg
Netscape Navigator的畫。
圖/ 愛范兒

Diana Smith說:「當你在不同的瀏覽器上查看這張圖片時,你就像是在查看網路的歷史,以及當時用戶對瀏覽器的要求。」

事實上,雖然這個數位藝術完全是藝術方面的探索,但也很容易讓人聯想想到中國多年前的一場行銷活動——IE6殲滅戰。

Web Browser7.jpg
圖/ 愛范兒

當時還有很多用戶在使用存在較大安全隱患的IE6,於是奇虎360號召大家和周鴻禕一起「真槍實彈」地消滅IE6。用戶只需要登錄活動主頁就能自動檢測用戶瀏覽器的IE內核版本,檢測自己是否正在使用不安全的IE6。

若用戶瀏覽器內核為IE6版本,主頁的哆啦A夢就無法顯示出本來的形象,五官扭曲,分辨不清。而IE8內核的瀏覽器則能很清晰地顯示哆啦A夢,圖片顯示的直接不同也能提醒用戶升級瀏覽器。

Web Browser8.jpg
圖/ 愛范兒

七年前的行銷活動和今天的數位藝術品,二者都很有趣。

責任編輯:江可萱、蕭閔云
本文授權轉載自:愛范兒

關鍵字: #瀏覽器
往下滑看下一篇文章
從切菜到乾燥加工!宜展如何結合桃園市政府創業資源,以AI開拓農產加工第二成長曲線?
從切菜到乾燥加工!宜展如何結合桃園市政府創業資源,以AI開拓農產加工第二成長曲線?

走進蔬果加工廠,同樣是100公斤高麗菜,最後能做出多少成品?答案不見得相同。氣候、產地與品質影響原料條件,客戶要求的切法、重量與交期也各不相同。對曾任科技業研發主管十多年的宜展科技農業執行長林佑澤而言,這是與科技製造截然不同的世界。

「農業部分全部都不一致。」林佑澤以青江菜為例,即使機械手臂已經訓練好辨識特徵,面對形狀各異的蔬菜,仍難以判斷該從哪裡抓取。農產品的天然變數,卻得面對學校團膳、連鎖餐飲、航空空廚等企業客戶對品質與交期的要求。如何讓加工流程穩定運作,成為宜展投入數位轉型的起點。

從紙本、LINE到數據,先把現場經驗留下來

目前宜展一年處理數千噸蔬果、服務超過120家企業客戶,業務涵蓋採購、截切、清洗、包裝與配送。林佑澤觀察,農產加工的關鍵經驗往往掌握在資深員工手中:該買多少菜、原料損耗多少、訂單增加又該安排多少人力,都仰賴現場判斷。

「主要就是把人的經驗變成數據。」林佑澤說。過去客戶透過LINE或紙本下單,現場靠人工整理訂單、對照不同客戶的加工規格;如今宜展利用AI辨識訂單內容並匯入ERP,再依客戶、品項與規格進行標籤化派工。製程則透過QR Code記錄原料投入量與成品產出量,逐步掌握各環節的加工損耗。

接下來是整理現場的判斷依據。林佑澤透過與資深員工對談,了解採購、派工與品管的作業方式,再利用AI協助找出規則、建立SOP。AI整理出的流程仍須由現場人員逐項確認、修正,才能實際執行。

品質管理也在持續改善。傳統金屬檢測器難以辨識菜蟲、橡皮筋等非金屬異物,宜展正與技術夥伴規劃導入AI影像辨識,輔助產線末端檢查。林佑澤表示,每批農產品品質不同,比起單看良率,他更重視客訴是否減少。隨著訂單與製程資訊逐步累積,宜展也希望進一步建立需求預測、採購建議與生產排程模型,減少營運對資深員工個人經驗的依賴。

不只把菜切好,乾燥加工尋找第二成長曲線

除了改善截切本業,宜展也開始發展乾燥加工。學校團膳在寒暑假面臨需求波動,生鮮蔬果則有保存期限短、價格易受產季影響等限制。林佑澤希望藉由乾燥技術延長農產品保存期限,開拓附加價值更高的加工業務。

不過,乾燥同樣有依賴經驗的問題。傳統做法是太乾就降低溫度、縮短時間,不夠乾就反向調整。每批原料的水分與成熟度不同,反覆試做不僅增加成本,也難以維持品質一致。「品質目標沒有設定的話,前面的製程參數就不知道怎麼調整。」林佑澤將過去研發車用面板的思維帶進農產加工:先決定產品希望達到的口感、含水率與水活性,再回頭檢視原料成熟度、截切厚度及乾燥參數等條件。

團隊進一步結合不同乾燥技術、自行改造設備,並接洽桃園的設備業者合作。林佑澤曾比較其他地區的設備,最後選擇設備構造、乾燥均勻度與可靠度較符合需求的桃園業者。宜展也持續累積製程參數,希望未來透過AI找出適合不同原料的乾燥曲線,減少反覆試做。

「我們主要還是要做代工,想要做一個功能性的原料平台。」林佑澤說,果乾目前更像是展示技術能力的產品,未來希望將服務延伸至辛香料、中藥材、太空食品、超級蔬菜及寵物食品等領域。現階段宜展主要營收仍來自蔬果截切本業,乾燥事業尚未形成主要收入。未來若能建立穩定的乾燥製程與代工能力,宜展便有機會從既有蔬果供應鏈,切入附加價值更高的食品原料市場。

從彰化走向桃園,驗證營運方法能否跨區複製

隨著加工流程逐步數位化,宜展也開始思考,這套管理方法能否帶到彰化以外的場域。

參與桃園市政府青年事務局天際線加速器及Meet桃園+後,宜展擴大與桃園產業生態系的連結。林佑澤提到,天際線協助邀集不同局處了解團隊需求,並提供資源媒合機會。宜展也開始與桃園市農會及在地農民合作,增加北部原料來源。這項合作不只拓展了供應來源,更成為宜展因應極端天候、穩定供貨的重要助力。林佑澤回憶,先前中南部連日降雨,蔬菜供應受到影響,宜展便從北部調度蔬菜,以不同產區互相支援,降低天候對供貨的衝擊。此外,團隊也透過天際線資源,獲得參與日本國際伴手禮設計競賽的輔導,並成功榮獲金賞獎肯定,除了展現產品的創新與設計實力,也為宜展拓展海外市場、提升國際能見度創造更多機會。

下一步,宜展規劃以桃園大溪作為第二個驗證場域,將彰化累積的資料、SOP與加工管理經驗,轉化為可複製、可優化的營運管理模式,帶到不同產地、供應鏈及人員條件下驗證。林佑澤指出,未來若要跨區域擴張,不可能每到一個新地方,就把原有團隊整批搬過去。因此,宜展希望將資深員工的實務經驗,轉化為標準化流程與數據模型,結合AI進行生產排程、資源配置及營運決策,讓新場域能依據當地條件快速調整,降低對特定人員經驗的依賴。

從彰化到桃園,宜展接下來要驗證的,是這套從傳統農產加工現場整理出來的管理方法,是能夠跨區域複製、快速部署並持續優化的農產加工營運系統。 長期目標是降低新場域的建置成本與管理複雜度,提升擴張效率,讓傳統農產加工業具備規模化發展的能力。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
一次搞懂工業AI
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓