PS：PPT截图不全，建议大家直接观看视频。
演讲者：Sher Minn Chong 来自马来西亚，目前是一名生活在纽约的Web工程师，主要从事生成艺术的研究，并研究早期计算机艺术的历史。她经常发布一些HTML/CSS和JavaScript的教程。
在个人计算机普及之前，有少数程序员和艺术家将计算机视为超出其预期目的能创造艺术的工具。
在本次演讲中，我们将探讨计算机艺术的早期历史，从如幽灵般的示波器绘画到早期ASCII文本艺术。我们将讨论当时技术有限的简单技术如何产生引人注目的作品。我们将了解在1950年代至1980年代计算机显示器和打印机的历史是如何演变的。
尽管如今仍有相当多的复古艺术幸存下来了，但其中大多数都没有保留其生成的算法。在本次演讲中，我还将演示一些尝试使用p5.js（一个JavaScript图形库）来重新制作的复古艺术品，并分享一些生成计算机艺术的技巧。
正稿
感谢你的支持。欢迎来到我的演讲，今天的演讲主题是：用JS重塑复古计算机艺术。
我叫Sher Minn。有点不同寻常的名字。
这个名字有一点不好，因为在线论坛一般不喜欢名字中有空格。但是我还是能在这里进行客户端验证。从好的方面来说，我的SEO真的很棒。如果你查找我的名字，我无需执行任何操作，这个将会是第一个结果。因此，生活还是非常美好的。
我来自东南亚一个叫马来西亚的小国。我们这里在CSSconf的舞台上还有另一个马来西亚人。为代表我的国家感到骄傲。
我现在住在纽约，我最初搬到那里去参加一个叫递归中心(Recurse Center)的活动。那个活动是在一个钢筋混凝土的房子里举行的。
对于那些不知道什么是Recurse中心的人来说，它是为程序员设于纽约市的。6周、8周或12周，你可以重新发现编程的乐趣。如果你想花时间去学习一些你一直想学的东西，这是一个很好的地方。我把它插上，因为这就是我今天在这里演讲的原因。他们提供给我的一切都使我能够进行创造性的编程。
对于那些不知道递归中心是什么的人，在这里简单介绍一下，它位于纽约市，是提供给程序员使用的。在那里学习6周、8周或12周，你可以重新发现编程的乐趣。如果你想花点时间学习自己一直想学习的东西，那么这是个不错的选择。我加入它，这也是我今天在这里进行此演讲的原因。他们提供给我的一切使我得以专心地从事创意编程。
创意编程。我非常喜欢艺术。在学习编码之前，我已经学会了上千幅画。以下我去年所做的一些工作。
我真的很喜欢使用编程来创建代码。最近，我真的受到了复古计算机艺术的启发。
事情是这样发生的，我偶然发现了一本出版于1976年至1978年间的杂志。它是由计算机艺术家Gracie Hertlein编辑的，总部位于美国加利福尼亚。这是有史以来第一本完全致力于计算机图形和艺术的电脑杂志。你可以在存储类别中看到标题、简单的图形和真正的日期。
我从一个名为重新编码project.com的网站获得了这些图像。该站点已经访问不了了。但这是一个很好的资源来查看当时什么是最前沿的图形。正如你所看到的，它主要是黑白的，基于文本的、线条和几何图形。今天，我们将其称为极简主义或一种Lofi美学。
对这个进行思考是很有趣的，因为在大多数情况下，发表的作品只是艺术品本身。没有很多算法。在大多数情况下，将对所使用的技术进行一些描述，可能会有一些技术是没有实际算法的。
网站发布该杂志的整个目的，该杂志的存档就像是，我们可以尝试对其进行反向工程。我们可以一起看看并弄清楚它是如何制成的吗？因此，这正是我所喜欢的。因此，整个演讲将围绕我所做的研究以及重新创作这些作品的一些尝试。
让我们先谈谈计算机艺术。什么是计算机艺术？我们很多人都知道什么是计算机艺术。可能是对的。在我的定义中，计算机艺术是计算机在艺术品创作中发挥作用的艺术。使用的是Photoshop、Illustrator和3D图形，AR、VR，最新最热门的东西，比如深度学习艺术和AI艺术。
但是我们今天不是要谈论这个。我们真正要谈的是，非常早期的计算机图形学。这是计算机图形变得可访问的时间，它将与人们如何利用这些技术并将其用于艺术创作有关。
我关注的十年是20世纪从50年代到70年代。这确实是计算机艺术形成的关键部分。所有内容都是黑色和白色。因此，要谈论复古的计算机艺术，我们首先需要谈谈那时的计算机是什么样子的。
当你谈论历史时，上下文确实很重要。而且，如果你了解当时人们可以使用的工具和技术，那你就了解了为什么某些作品具有某种美感，或者为什么要这么做。它可以帮助你更好地欣赏许多作品。
这是1959年推出的一台计算机。这是IBM7099数据处理系统。不仅是一台计算机，还是一个数据处理系统。真的很漂亮。它有整个房间这么大。
你可以在背面，控制台和打孔卡读取器上看到磁带读取器。它以300万美元的超酷价格推出。在那个时候，如果你今天将其转换为货币，计算通货膨胀，它大约价值1900万美元，这确实非常，非常昂贵。
这意味着计算机真的很难得。在大学，研究实验室，军事，政府机构中的人才买得起。它们是一种非常稀缺的资源。你能想象打电话给IBM说我想花1900万美元买一台电脑吗？我给你开张支票，你知道吗？而且大多数时候人们不会使用计算机。
他们会用像打字机一样的穿孔卡片来编写程序。然后你将代码打孔并将其打到打孔卡中。拿一堆打孔卡并将其交给门后的一位老人，五分钟后你就会得到结果。如果你不耐烦地等待Webpack构建，请考虑一下这个。
这需要很多时间。在科学和数学应用方面有很多用途，大部分是科学家或数学家在研究实验室或大学里使用的。因此，我想向你展示一些公司的例子，这些公司确实已转变到计算机图形学领域。第一个发明了“计算机图形学”这个术语，他们是最早在设计工作中少数几个使用计算机图形学的人之一。他们使用它来设计驾驶舱，为驾驶舱中的飞行员制作不同的肢体动画。
模拟。这是第一个使用计算机图形学制造的机场，美国西雅图塔科马机场。在美国的贝尔实验室，他们制作了有史以来第一部计算机制作的电影。一开始是什么样子，然后我要给你们看。
在这里，它是1963年控制系统的模拟。它非常可爱。这是一颗绕行星旋转的卫星。早期的图形主要用于建模，或者也许只是演示一些图表。
就像这张非常简单的黑白的直线和几何图形，这对他们来说足够达到目的了。这太棒了。没有花哨的颜色或渐变之类的。
然而，你知道，艺术还是发生了。人们看到他们所拥有的有限的技术，用它做了一些很棒的事情。所以，我要谈谈三种不同类型的艺术。我只是从每个类别中选择了例子。
但是，你知道的，艺术还是出现了。人们看到他们用拥有的有限技术，并用它做了很多很棒的事情。所以，我要谈谈这三种不同类型的艺术。我只是从每个类别中选择示例。
我会给你们展示一些示波器的艺术，一些图形和一些基于文本的艺术，以及我尝试重塑它们。让我们从示波器的艺术开始。
阴极射线示波器。如果你曾在一个实验室或学校见过，请来一起玩。这就是示波器的样子，或者说这是20世纪50年代示波器的样子。它是一种接收电信号并将其转换成可视信号的设备。
这里我们有一个示波器上的正弦波示例。这有点像以前的IBM7090。左边是本·拉波斯基（Ben Laposky）的照片，被认为是最初几个创造电子图形的人之一。所以，我的意思是，他会在示波器上绘制有趣的图案，然后他会为它们拍照，这是他的一些作品。它们的真正有趣之处在于它们看起来真的很幽灵。
还有一种有机的方式。但是你可以告诉他们他们具有这种数学素质。还有一些如上图所示。
大约在同一时间，在欧洲，也有一场计算机艺术的运动开始了。赫伯特·W·弗兰克（Herbert W. Franke），我们用示波器制作了他自己的电子艺术品。这是他的一些作品。
有趣的是，示波器没有屏幕截图按钮。你不用按截图，这个就会出来。
为了捕捉这些图像，他们要做的是把相机放在屏幕前，然后长时间曝光。它捕捉屏幕上线条和图形的运动。你在这里看到的不仅仅是一张快照。随着时间的推移，屏幕上的事件组合在一起。因此，这里实际上是一个类似事件的例子，但是它有两个不同的阶段。
我觉得它看起来真的很漂亮，就像一条幽灵般的水母。还有更多的作品是他做的。在示波器上画正弦波是如何做到的呢？有一个非专业的数学解释，他把正弦波和其他东西结合起来。应用操作来创建具有非常有趣团的复合波。
下面是一个作品的例子，很明显，正弦波正在发生。我当时感觉还好。我现在明白了。
但是这些作品是怎么做到这么好呢？我试图创建它。我将在这里向你展示Lapsoky制作示波器的演示。我将使用P5JS，这是一个基于处理的图形库。处理语言旨在使非程序员也可以访问带有代码的图形。
如果你有兴趣尝试图形化的东西，这是非常棒的，我强烈建议你检查一下。这是一个很好的参考资料和文档，也是一个在线编辑。非常容易使用，所以是一个很好的起点。
跳转到演示。在P5中，关闭全局绘制函数，该函数将被调用以绘制动画或视觉效果的框架。因此，在这里，我只是在做一些非常简单的事情。只需将画布的中心设置为(0, 0)，然后在(0, 0)处绘制一个宽度为10像素的小圆圈。
这不是超级有趣。更有趣的是，你可以将事物动画化。
我在这里添加一个小计数器。并在绘制的每一帧递增它。并使用该值定位小圆圈的坐标。我可以画一个圆，公式为R正弦θ，X等于什么，R为R成本数据，R为圆。在圈子里画圈子。
圆圈很酷，但并不是超级有趣。更有意思的是，你可以弄乱θ并将其乘以两个不同的片段，然后得到椒盐脆饼。这是一个例子。这是当你的符号和乘积处于不同的阶段。
它会产生有趣的循环效果。
我现在可以做的是先将椒盐脆饼放在一块，然后再画一个点。椒盐脆饼是一分。并在此处绘制椭圆。我可以在这两点之间画一条线，你会得到某种帮助，但还不是很清楚，因为这是重叠的。
而且它不断变得越来越亮。所以你能做的就是。你可以在画的时候把线淡出。我想，这就是示波器屏幕上的样子。
非常接近。我实际上在P5演示中有代码。之后，我将在Twitter上发送一个幻灯片的链接到我的Twitter上，这样你就可以方便地一起玩了，并可以将一些值对它进行排序，然后运行它，看看这些变化或效果如何。
这很有意思，因为你永远都不知道会得到什么。你只需尝试一下，看起来就很不错。或者看起来不怎样。你要弄清楚你要寻找的是什么。你也可以在此处添加颜色。
除了直线，我也画了曲线，同样的想法。是的，那就是示波器艺术。接下来，矢量图形。矢量图形在我的心里有一个特殊的位置。
我真的很享受用它来工作。为了理解为什么矢量图形是非常重要的，它们大多也是线条和几何形状，我们需要了解计算机中的有效输出。这是在激光打印机之前。你不可能像我们现在这样很容易地打印出高清晰度的图像。
为了创建真正详细的图像，人们会使用机械绘图仪。将其视为绘图机器人。它有一支笔，可以在Y轴或X轴上跨过纸张表面移动并在其上绘图。这是鼓式打印机。
它移动Y是纸，X是笔。因此，绘图仪的局限性在于，你所拥有的只是一只画线的机器人手臂。所以，你必须用向量来描述你的图形。
你必须提供移动的坐标。不能做颜色，渐变或花哨的东西。当时的许多美学都与线条有关，尤其是紧密合在一起才能产生效果。这和我见过的很多东西一样。
基本思想是，你采取一个几何形状，并嵌套它，并获得凉爽的漩涡效果。好吧。挺有有意思的
就像只是嵌套的正方形一样。实际上，它一直很流行，以至于它是控制论的审美，这是有史以来第一个以计算机艺术为主题的计算机展览，并在伦敦当代艺术学院举行。当时真是一件大事。事实上，他们选择这个作为图形，我想它一定很受欢迎。激发一些想像力。
一个关于控制论的小插曲，是由一位波兰妇女贾西娅·里卡特（Jasia Reichardt）创作的，她把艺术家们聚集在一起并展示了他们。这个名字指的是你在电脑上所做的愉快的偶然发现。有时它是随机的，你不知道会发生什么，有时它真的很漂亮。我看到这个图案以有趣的方式反复使用。我能创造出什么，我什么都不知道。
但是后来我发现这实际上是对微积分问题的可视化。这是有道理的，早期的艺术家是有权使用计算机，科学家和数学家的人们。问题是这样的，想象一下四只苍蝇坐在一张桌子上，它们开始以相同的速度行走。每个都朝右边飞。微积分中的数学就是找出每个人的路径。
如果我想解决问题，那就得冷静一下。但我还没想过。这就不是很有趣了。
但是如果你在这里想象一下，每种颜色都代表了某只苍蝇的轨迹，它看起来就会产生漩涡效应。当你在这里的每一种不同的苍蝇之间划线时，它会变得非常漂亮。我还加入了相当多的渐变。这是一些视频，以防万一演示没成功。
你要做好准备。我发现你不仅可以用四只苍蝇，而且可以用三只苍蝇或者五到六只苍蝇。因为我有一台电脑运行得非常快，并且可以对其进行提示，因此我可以根据需要运行任意多次。
我想对形状进行说明。如果将它们放在一起，它们就是三角形。看到这个有趣的是，看到的第一个不是三角形。实际上就是这种螺旋状的形状。而且你不希望这样。
有点像那种新兴产业。这是一个正方形的。这是一种非常吸引人的形状。
现在我要告诉你基于文本的艺术。你们中有些人在想ASCII，对吧？我会谈谈的。首先，我想谈谈它是什么样子的输出文本。
因此，有CRT显示器，他们有一个输出。我相信，这是一台60年代的直线打印机，这是行式打印机，因为它可以按行打印，并且由于具有固定的字符集，因此可以非常快地完成打印。
你只能打印某些字符。只是逐行。超级伟大的用于打印文本。因此，人们想出了用这种方法创作作品的方法。这是弗雷德里克·哈默斯利（Frederick Hammersley）的几件作品。
你可以在此处查看图像。我真的很喜欢这两个。有趣的是，它实际上是用一种称为“the art one”的编程语言创建的。它是由凯瑟琳·纳什（Katherine Nash）和理查德（Richard H.）创建的。
威廉姆斯在新墨西哥州的一所大学。纳什（Nash）来自美术系，威廉姆斯（Williams）来自工程系，他们合作制作了这种语言，目的是教学生制作简单的计算机图形。
它以简单性而闻名，并旨在为那些没有技术背景的人介绍计算机的使用。听起来很熟悉，听起来像是P5和处理过程。太棒了。Art 1是P5的原始处理。这是从60年代开始的。
如果你看一下文档，对于ART 1来说，它可能看起来更复杂，但是API也是一样的。。你从椭圆的中间经过，然后是它的大小。同样的事情，还有ART 1，把它打在卡片上，做所有的事情。但P5就像输入魔法一样。
我注意到的另一件有趣的事情是，如果你查看其中一些作品的细节，就会注意到它创建纹理深度的方式是通过忽略字符。你知道他们有固定的字符集。为了使创意更具纹理和效果，它们会将两个不同的角色重叠在一起。
这部分完全由零，点，破折号和撇号组成。那太棒了，因为只有你有一台打印机。你可以把所有的东西打印出来。我们开始做吧。
这真的是一种艺术，它充分利用了可用的技术，这让我感到非常鼓舞。发挥自己的创造力而不是凭空创造。今天，我们仍然有这种感觉。
唯一的区别是它不是真正的SBR，更像是EBCDIC，扩展的二进制编码的十进制交换码，当时由IBM支持。而且它甚至比ASCII更受限制。如你所见，在字符集的顶部。很难看。但是字符很多。
我很好奇，用这种语言工作感觉如何？原创艺术之一。他们有什么功能？他们选择包括什么？我做了个小小的研究，发现关于Art one的东西很难找到。我发现唯一有意义的东西是在Reichardt书中。有一个流程图讨论了这些语言。
你可以画一条线，实心矩形，空心矩形，三角形，椭圆形，但我不知道为什么它们具有实心矩形和空心矩形，而没有实心矩形和椭圆形。不确定。这很简单明了，但是人们可以从中创造出有趣的东西。
我受到启发重新使用JavaScript进行了创建。我这里有代码。在GitHub上。还在开发中。请不要进行评判。
所以，我当时想，就是这样。我没有打印机，对吗？我不会出去买打印机。与可轻松使用的打印机最接近的是什么？最终我在代码上实现它。
字符集有限，精彩，易于使用。这是我使用可用规则创建的一件作品的示例。Art one。这些是用三角形制成的。
但是它们具有有趣的3D效果。你可以使用终端进行颜色设置。
这实际上是我现在所穿裙子的灵感来源。因此，你还记得我曾谈过他们如何通过重叠字符来发挥创造力吗？所以，事情是这样的，在终端中，如果不使用扩展库，就很难重叠字符。所以我想，好吧。我得到的第二个最好的东西是什么？是重音符号或指示符号。你会看到Ss，顶部和底部都有重音符号。
同样在这里，这是一个星号，然后是带有方格的重音符号。还有很多我有趣的快乐事故。就像为字符的背景上色的方式一样，有时有点不同步，但是我喜欢这种效果。
所以，是的，使用你所拥有的。我使用Unicode。不完全是SDR，而是Unicode艺术，这很有趣。这只是撇去表面。
在计算机图形学和计算机艺术方面有更多的历史。光是在欧洲，我就为欧洲量身定做了这个演讲，因为历史上有很多故事。
还有70年代多产的计算机艺术家Frieder Nake和Georg Nees。从匈牙利来，在计算机之前以及在它们成为事物之前制作计算机绘图都是一件重要的事情。不要忘记曾经是南斯拉夫和现在的克罗地亚的新趋势运动。这是一本有800页的书。如果你想查阅，标题就在这里。
这是一个有趣的运动，因为他们庆祝模块化或程序艺术。即使在使用计算机之前。随着计算机的知名度越来越高，它们也成为这一运动的一部分。是的。在结束之前，我只想谈谈为什么？为什么要像研究60年前的事情一样进行所有这些研究？
我注意到的一件事，尤其是在网络世界中，我们一直在关注着新事物和新事物。下一步我能做什么？我们不需要花太多时间后退一步，看看已经做了些什么。但重要的是要明白，我们并不都是一个人来的。我们真的，你知道，是建立在我们真正站在巨人的肩膀上的。
了解你的来源非常重要。因为如果你不知道已经做了什么，就不会知道如何制作新的东西。是的。这使我对今天的技术非常大的肯定。当然，从过去中寻找灵感也不会感到有什么不妥。
你可以选择已经做过的事情，并使它成为你自己的，完善它。向所有这些投入了所有工作和创造力的人学习，让我们走到今天的这一步。这就是我今天想和你们分享的全部。
我有一个博客。如果你感兴趣的话，我会写这些东西。是的。这真是一种乐趣。
[掌声]
演讲稿原文地址 https://2019.jsconf.eu/sher-minn-chong/recreating-retro-computer-art-with-js.html
翻译&校验：freedom
若有收获，就点个赞吧
0 人点赞
