UX PediaPresents
本文约3160字，阅读需要8分钟

迷幻又浪漫的 GlitchArt

研究主题：GlitchArt 故障艺术
研究对象：故障艺术的应用实现
What？？都故障了还能称为艺术？我想这个词汇会让不了解的人，觉得惊讶与陌生。不过，作为新的艺术形式，它其实来源于我们生活中一个十分恼人的情景——数据和数字设备的故障。
比如小时候，一家人正开开心心的磕着瓜子看着电视，由于信号弱或不知名的原因，电视画面突然变成了这个样子：
或者是这个样子：

周二没有电视节目的时候……

画面出现异常、失真、变形、破碎等混乱情况，导致我们观看的欲望也没有了……但艺术家们却从这些偶然产生的“图像错误”中发现了美，它们不仅代表不完善，更意味着意外和变化，每一次故障都像是打破常规的再创造。
什么是 Glitch ？

Glitch 就是小故障、短暂的脉冲波干扰意思，比如说瞬时故障，可以自我纠正，但是又相对难以解决的问题，理论上来说，包括人类组织和自然界在内的所有类型系统都会遇到故障，但是该术语主要在计算机和电子行业，电路弯曲以及视频游戏玩家中比较常见。
Aglitch is a short-lived fault in a system, such as a transient fault that corrects itself, making it difficult to troubleshoot. The term isparticularly common in the computing and electronics industries,incircuit bending, as well as among players of video games. More generally, all types of systems including human organizations and nature experience glitches.
——维基百科上关于 Glitch 的释义
而故障艺术（Glitch Art），则是利用事物的故障，进行艺术加工，使这种故障缺陷反而成为一种艺术品，具有特殊的美感。所以说，故障艺术的特点就在于颜色与图像，都是失真破碎、错位变形的，以及一些条纹图形的穿插辅助。
美国搞笑综艺节目《What's My Line》中的John Daily 进一步定义了 Glitch ，并说这是在发射火箭过程中遇到的一种不知所以然的问题，所以称它为“小故障”；随后《时代》杂志在文章中对其进行定义：“Glitches—a spaceman's word for irritating disturbances.”直到现在，Glitch 仍被用来形容火箭发射时出现的小故障，且延伸出了新的艺术形式。
无处不在的 GlitchArt
-活跃在“Bug圈”的大佬们
被誉为“新媒体艺术之父”的韩裔美籍艺术家，白南准（Nam June Paik），于1965年创作了《Magnet TV》磁铁电视。他在电视机上放置了一块巨大的磁铁，使显示屏里的图像和声音因磁铁干扰发生了变化，故障艺术也应运而生。
荷兰女艺术家罗莎满克曼（Rosa Menkman）是故障艺术的学术领军人物，她不仅是一位创作故障艺术的新媒体艺术家，还是策展人和作家。
《The Glitch Moment》，专门研究故障艺术的历史和作品
Rosa Menkman 的故障艺术作品
她还创立了网站——Glitch Studies Manifesto，成为了世界故障艺术家们交流学习的平台。
西班牙艺术家 Maurizio Bongiovanni 的“故障艺术”小鸟油画，是在用架上绘画的方式模仿数字艺术效果。
意大利艺术家 Giacomo Carmagnola 的作品风格鲜明，熟悉他作品的人总是能从一堆图片中立刻认出。他经常将既有人物或景物照片中的面孔与物体模糊化，造成一种数码“融化”的效果。
台湾艺术家韩旭东（Hsu Tung Han）的木雕作品，使 GlitchArt 立体可触碰。
平面设计师 Magdiel Lopez 的设计项目（magdiellopez.com）——每天一款海报设计挑战，其中的许多作品都使用了故障效果。
地毯艺术家 Faig Ahmed，他将故障艺术融入传统的地毯创作中，在纯手工制作的地毯中融入了打码、失真变形等数码故障元素，织出了这些别具一格的崩坏地毯作品：
-日常生活中的故障风
厄瓜多尔 LaPradera 市有一家“故障酒吧（GlitchBar）”，它的前身是一座老旧失修、“满是故障”的老住宅。酒吧希望这次对室内的翻修能够尽可能地减少对原处的破坏，重复利用原来的材料，更好地利用资源，进行拆卸时保留了原来有的窗户（现在变成了门）、砖墙（成为底层地板）以及一些藤蔓植物和门前的棕榈树。
室内设计与装潢大胆采用了故障艺术的元素，从酒吧门面到内部家具（灯、开关、木质桌椅和吧台），都被涂上了带有装饰性的抽象割裂图案，看似支离破碎却又别具一格，鲜艳又明亮。
电影、广告、服饰等领域，同样能见到故障艺术的运用。电影《攻壳机动队》海报，结合故事调性，在画面中铺设了大量破碎错位的条纹， 还有绚丽的色彩。
带火了一波网红和特色城市的抖音，同时还带火了故障艺术，Logo 和宣传海报也是运用了大量的条纹装饰、图像错位、红绿撞色及颜色错位来吸引眼球。
滴滴燃到爆的《想出发就出发》的广告片，利用故障艺术的特效，呼唤你透过现实做更好的自己，不再优柔寡断寻找借口。
苹果 HomePods 广告短片《Welcome Home》，巧妙的结合了“故障艺术”这样一个数字艺术的概念，但全部以道具实拍实现。
随着电脑和网络的普及以及电子游戏成为稍微主流的娱乐方式后，在2010年代以来，越来越多的时装设计师们将 Glitch Art 这种 nerdy 的艺术形式渗透到时尚设计领域。
Anrealage FW 2011 森永邦彦 Kunihiko Morinaga 作品
来自日本的服装设计师 Nukeme 与视觉艺术家 Ucnv 合作的故障艺术风格风衣 2013
Frankie Morello 2015 作品
GlitchArt 算法总结与实现
由于故障艺术的风格种类比较多，辞典酱了解到一些常见风格的代码实现。
以下代码完整版，来自《高品质后处理：十种故障艺术（Glitch Art）算法的总结与实现》
-RGB颜色分离故障（RGB Split Glitch）
RGB颜色分离故障（RGB Split Glitch），也称颜色偏移故障（Color Shift Glitch），是故障艺术中比较常见的表达形式之一。例如，抖音短视频 App 的 Icon，即是 RGB 颜色分离故障艺术风格影响下的作品，给整体产品带来了潮流与年轻的气息：
RGB颜色分离故障（RGB Split Glitch），实现算法的主要要点在于红绿蓝三个通道采用不同的 uv 偏移值进行分别采样。一般而言，会在 RGB 三个颜色通道中，选取一个通道采用原始 uv 值，另外两个通道进行 uv 抖动后再进行采样。一个经过性能优化的实现版本 Shader 代码如下：
上述代码，得到的渲染表现如下：
-错位线条故障（Line Block Glitch）
错位线条故障（Line Block Glitch）具有较强的表现力，在 Glitch 系列特效中的出镜率也较高。
该算法的实现思路在于随机宽度线条的生成。我们一步一步来，先从生成均匀宽度线条开始：
基于 trunc 函数以及 randomNoise 函数，配合上述调用代码，即可得到如下均匀宽度线条：
接着，使用如下代码，将均匀渐变线条转为随机梯度的等宽线条：

然后，将随机梯度的等宽线条，经过多次 randomNoise 操作，转换为随机梯度的非等宽线条：

可以得到如下的渲染表现：
接着，通过随机梯度的非等宽线条，去抖动 uv 采样生成源色调的 blockLine Glitch：

对应的渲染表现如下：

错位线条故障（Line Block Glitch）
-扫描线抖动故障（Scan Line Jitter Glitch）
扫描线抖动故障（Scan Line Jitter Glitch）算法较简单，但是得到的渲染表现却非常具有冲击力：
一个比较直接的实现是直接对横向或者纵向 UV 进行基于 noise 的抖动，Shader 实现代码如下：

得到的渲染表现如下：
扫描线抖动故障（Scan Line Jitter Glitch）
-数字条纹故障（Digital Stripe Glitch）
数字条纹故障（Digital Stripe Glitch）同样是出镜率较高的 Glitch 系后处理特效之一。例如在《赛博朋克2077》的 Gameplay 中，就可以到它的身影：
《赛博朋克2077》中的数字条纹故障（Digital Stripe Glitch）特效 @ CD Projekt
数字条纹故障（Digital Stripe Glitch）需在 Runtime 层完成 noise Texture的生成，然后传入 GPU中 进行最终的运算和渲染呈现。

生成的图片如下：
数字条纹故障（Digital Stripe Glitch）
喜欢的人超级喜欢，不喜欢的人则无感，故障艺术的诞生与流行，颠覆了我们对美的定义。别具一格的故障艺术给生活中增添了一抹色彩，让我们清楚的意识到，设计也可创造无限可能。
／End.
相关引用
-罗莎满克曼（Rosa Menkman）个人网站 http://rosa-menkman.blogspot.ae/
-《高品质后处理：十种故障艺术（Glitch Art）算法的总结与实现》by CSDN博主「浅墨_毛星云」https://blog.csdn.net/zhmxy555/article/details/106753402/

-故障艺术百科http://dwz.date/bsjP

-https://www.sohu.com/a/248784256_528930

-https://www.sohu.com/a/273414243_474139

-图片、GIF来自网络
-未经UX Pedia允许不得转载
往期推荐：
“启发式评估”到底启发了什么？
完美落幕 | 阿里UCAN大会，哪10个公开课最值得看？
VR、AR、MR到底有什么区别？
一键生成的设计工具，也太上头了吧！
UX辞典
策划│雪诗
撰文│缓缓
编辑│梦奇
•扫码加辞典酱•
•成为学习交流小队一员吧•
形象理解用户体验，时刻关注设计趋势
2020UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个星标☆」
「下次就能第一时间看到惹」
赞了吗 在看吗
戳下这里呗别害羞 : )