用一串程式碼做的畫,欣賞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
圖/ 愛范兒

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

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

關鍵字: #瀏覽器
往下滑看下一篇文章
科技創新守護海洋!犀牛盾以循環創新思維破解塑膠危機、賦能永續未來
科技創新守護海洋!犀牛盾以循環創新思維破解塑膠危機、賦能永續未來

全球每年約生產4億噸塑膠垃圾,只有不到10%有被回收,其中約有1100萬至1400萬噸最終流入海洋。在十分有限的回收量中,約 8 成來自相對單純、流程完整的寶特瓶回收;反觀,同樣是高頻消費品的手機配件,回收率卻不到 1%。這個現象,對長期從事材料研究的犀牛盾共同創辦人暨執行長王靖夫來說,是他反思事業選擇的開端,也是突破的轉捩點。

「手機殼產業其實是塑膠產業的縮影!」他在2025 亞馬遜港都創新日的專題演講上直言。手機殼本質上類似一種快時尚商品,每年有超過十億個手機殼被製造,但產業並未建立材料規範,多數產品混用多種複合塑膠、填料與添加物,既難拆解、也沒有回收機制。結果是,一個重量相當於超過二十個塑膠袋的手機殼,在生命周期終點只能被視為垃圾。

王靖夫指出,連結構複雜的資訊科技產品,回收率都能達 45%,但手機殼明明是最簡單、最應該回收的產品,為什麼無法有效回收?這個命題讓他意識到,與其只做手機殼,不如正面處理塑膠問題本身,從材料設計、製程到後端回收再生,開創循環之道。

犀牛盾共同創辦人暨執行長王靖夫於2025 亞馬遜港都創新日分享犀牛盾如何回應塑膠挑戰、開創循環模式。
犀牛盾共同創辦人暨執行長王靖夫於2025 亞馬遜港都創新日分享犀牛盾如何回應塑膠挑戰、開創循環模式。
圖/ Amazon Web Services 提供

以材料工程打造手機殼的循環力

若塑膠要進入循環體系,前提是「材料必須足夠單純」。王靖夫很快意識到,問題不在回收端,關鍵在最開始的設計端。多數手機殼由多款不同塑膠、橡膠件甚至金屬等複合材料組成,無法被經濟化拆解,也難以透過現有流程再製。為此,犀牛盾在2017年起重新整理產品線,希望借鑑寶特瓶成功循環的經驗,擬定出手機殼應有的設計框架。

新框架以「單 1 材料、0 廢棄、100% 循環設計」為核心,犀牛盾從材料工程出發,建立一套循環路徑,包括:回收再生、溯源管控、材料配方、結構設計、循環製程、減速包裝與逆物流鏈等,使產品從生產到回收的每一階段,皆與核心精神環環相扣。

王靖夫表示,努力也終於有了成果。今年,第一批以回收手機殼再製的新產品已正式投入生產,犀牛盾 CircularNext 回收再生手機殼以舊殼打碎、造粒後再製成型;且經內部測試顯示,材料還可反覆再生六次以上仍維持耐用強度,產品生命週期大大突破「一次性」。

另外,今年犀牛盾也推出的新一代的氣墊結構手機殼 AirX,同樣遵守單一材料規範,透過結構設計打造兼具韌性、耐用、便於回收的產品。由此可見,產品要做到高機能與循環利用,並不一定矛盾。

犀牛盾從材料學出發,實現全線手機殼產品皆採「單 1 材料」與模組化設計,大幅提升回收循環再生效率。
犀牛盾從材料學出發,實現全線手機殼產品皆採「單 1 材料」與模組化設計,大幅提升回收循環再生效率。
圖/ 犀牛盾

海上掃地機器人將出海試營運

在實現可循環材料的技術後,王靖夫很快意識到另一項挑戰其實更在上游——若塑膠源源不斷流入環境,再強的循環體系也只是疲於追趕。因此,三年前,犀牛盾再提出一個更艱鉅的任務:「能不能做到塑膠負排放?」也就是讓公司不僅不再製造新的塑膠,還能把已散落在環境中的塑膠撿回來、重新變成可用原料。

這個想法也促成犀牛盾啟動「淨海計畫」。身為材料學博士,王靖夫將塑膠問題拆為三類:已經流落環境、難以回收的「考古塑膠(Legacy Plastic)」;仍在使用、若無管理便會成為下一批廢棄物的「現在塑膠(Modern Plastic)」;以及未來希望能在自然環境中真正分解的「未來塑膠(Future Plastic)」。若要走向負排放,就必須對三個路徑同時提出技術與管理解方。

其中最棘手的是考古塑膠,尤其是海洋垃圾。傳統淨灘方式高度仰賴人力,成本極高,且難以形成可規模化的商業模式,因此無法提供可持續的海廢來源作為製造原料。為突破這項瓶頸,犀牛盾決定自己「下海」撿垃圾,發展PoC(概念驗證)項目,打造以 AI 作為核心的淨海系統。

王靖夫形容,就像是一台「海上的掃地機器人」。結合巡海無人機進行影像辨識、太陽能驅動的母船作為能源與運算平台,再由輕量子船前往定位點進行海廢收集:目的就是提升撿拾效率,同時也累積資料,為未來的規模化建立雛形。

從海洋到河川,探索更多可能

淨海計畫的下一步,不只是把「海上的掃地機器人」做出來,王靖夫說:「目標是在全球各地複製擴張規模化、讓撿起的回收塑膠真正的再生利用。」也就是說,海上平台終究要從單點示範,走向可標準化、在不同海域與國家部署的技術模組,持續穩定地把海廢帶回經濟體。

犀牛盾CircularBlue™海洋廢棄物過濾平台初號機將出海試營運,盼解決沿岸海洋廢棄物問題。
犀牛盾CircularBlue™海洋廢棄物過濾平台初號機將出海試營運,盼解決沿岸海洋廢棄物問題。
圖/ 犀牛盾

他進一步指出,「其實這套系統不限於海洋,也可以在河川上。畢竟很多海洋垃圾是從河流來的。」未來若能推進到河川與港灣,將塑膠在進海之前就攔截下來,不僅有助於減少海洋污染,回收後的材料也更乾淨、更適合再生,步步朝向終極願景——隨著時間推進,海中垃圾愈來愈少,被撿起、回收後再生的塑膠會越來越多。

「我們已經證明兩件事的可行性:一端是產品的循環設計,一端是 AI 賦能海廢清理的可能性。」王靖夫笑說,塑膠管理命題不只為自己和公司找到新的長期目標,也讓他順利度過中年危機。「選擇改變,留給下一代更好的未來。」他相信,即便是一家做手機殼的公司,也能創造超乎想像的正向改變。

AWS 2025 亞馬遜港都創新日,集結產業先行者分享創新經驗。
AWS 2025 亞馬遜港都創新日,集結產業先行者分享創新經驗。
圖/ Amazon Web Services 提供

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
進擊的機器人
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓