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

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

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

關鍵字: #瀏覽器
往下滑看下一篇文章
商用地產成熱門焦點,方睿科技攜手希睿創新置業以數據科技助開發商搶佔先機
商用地產成熱門焦點,方睿科技攜手希睿創新置業以數據科技助開發商搶佔先機

台灣住宅市場過去10年屢創新高,不動產開發商習慣以戶型規劃、坪數配置、生活機能及家庭型態等邏輯銷售商品。然而,隨著住宅不動產買氣降溫、營建成本持續攀升、政策影響加劇,不動產開發商開始將焦點轉向長期被忽略的商用地產市場。

商用地產市場崛起,不動產開發商須掌握全新市場邏輯

商用地產的客戶是企業或商辦投資人,決策依據遠比住宅複雜,包括產業特性、營運流程、設備承載、動線規劃、能源效率、甚至法規合規等細節,如果不動產開發商沒有在一開始釐清目標客群的產業需求、法規規範、實際坪數與空間規劃,很容易陷入規劃誤區,甚至在完工後才發現市場不買單,甚至造成數十億以上的高額成本浪費。

為協助不動產開發商與商用地產投資人解決上述挑戰,方睿科技除推出商用地產智慧平台,整合大樓、投資、區域、交通與政策等多元數據資料、生成全維度分析報告,協助不動產開發商與投資人做出精準決策,更以集團經營的方式,於今(2025)年9月成立希睿創新置業,由其提供含括規劃、執行與銷售的一站式代銷服務,幫助不動產開發商快速切入商用地產市場。

方睿科技執行長吳健宇指出:「有別於住宅不動產是以感性行銷方式影響買家,商用地產客戶則是倚賴數據進行理性決策,如產業趨勢、聚落發展、租金區間、企業規模、產業上下游動態、大樓的設備承載與機電裝置等,而不是感覺或經驗法則,而這也是方睿科技努力的方向。」

方睿科技
方睿科技執行長吳健宇、希睿創新置業總經理蔡焦緯
圖/ 數位時代

「多維數據分析不僅是開拓商用地產市場的關鍵,也讓希睿成為不動產開發商最可靠的合作夥伴。」擁有豐富不動產經驗的希睿創新置業總經理蔡焦緯如是總結。

三大優勢加持,希睿成不動產開發商耕耘商用地產市場的最佳夥伴

過去不動產開發商在銷售住商混合建案時,常遇到商業空間長期閒置的困境,原因在於傳統代銷只熟悉住宅邏輯,希睿正是要來填補商用地產代銷市場長期缺口。

希睿之所以能快速成為商用地產市場的領跑者,以罕見的市場競爭力成為不動產開發商與企業客戶的最佳夥伴,與其擁有「專業團隊」、「數據科技」與「企業潛在客戶名單」三大優勢,以及跟方睿科技進行深度合作有關:

在專業團隊方面,希睿的團隊成員擁有超過20年的不動產經驗,以及近10年的數據驅動數位行銷實務經驗,可以理性數據分析協助不動產開發商規畫設計不動產,以及精準溝通目標客群,更好媒合企業客戶與投資人。

在數據科技領域,方睿科技的商用地產智慧平台整合「重點區域分析」、「大樓資料」、「區域資料」與「圖像資料」等多維度資訊,無論是協助不動產開發商規劃商用地產,還是幫助企業客戶與投資人尋找合適標的,都能提供最適切且全方位的支援。

蔡焦緯表示:「透過平台,我們甚至能告訴不動產開發商某區段的商用地產租金或售價的未來成長幅度,加快決策與動工,搶先掌握市場商機,更重要的是,當市場環境、政治決策快速變動,我們都能即時更新分析,而不是拿著一年前的產業報告來賭四年後的市場,讓效益發揮最大價值。」

方睿科技
希睿創新置業總經理蔡焦緯
圖/ 數位時代

在潛在客戶名單方面,希睿會透過產業動能分析模型追蹤企業年增員工數、資本額變化以及產業重大訊息動態等等,預判企業於商用空間的需求,深度解析市場,獲取各個區段的商用地產潛在客戶名單,在協助不動產開發商完成規劃設計後提供銷售支援,真正做到從規劃到成交的一站式服務。

商用地產決策不僅會影響企業營運績效,更左右城市未來發展格局。希睿將以專業團隊、產業動能分析與完整買方追蹤系統,提供從規劃、企劃到銷售的一站式服務,幫助不動產開發商在前期階段就搶先掌握商用市場機遇,同時促進企業、不動產開發商與城市的共好發展;此外,也會將第一手的市場訊息回饋給方睿科技、持續優化商用地產智慧平台,希睿將致力提供最具科技力的代銷服務,打造生態體系共贏的市場新標準。

方睿科技
左起,希睿創新置業協理楊彥宏、副總經理黃士芳、總經理蔡焦緯
圖/ 數位時代

方睿科技:https://www.funraise.com.tw/

希睿創新置業:https://www.facebook.com/ONERAISE

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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