p5.js着色器

你在做什么？

Casey：我是纽约大学交互艺术研究生，对计算机图形和交互空间，无论是物理的还是数字的，都很感兴趣。

Louise：我是纽约大学交互艺术研究生，对传感器技术基础上的计算机图形和交互空间，无论是物理的还是数字的，都很感兴趣。

你是如何开始使用p5.js的？

Casey：我在 2018 年开始学习 p5.js，那是我在 ITP 的第一个学期，尽管我一直在涉足 Processing，Processing 并自 2012 年起就在做这件事。我是在学习平面设计时被我的朋友 Pedro 介绍到 Processing 的，这让我印象深刻。我被制作自己的工具来创建图形和交互艺术的想法吸引住了，但一旦我真正尝试后，我就爱上了它。我记得我做过的第一个项目是一个会跟随你屏幕上所有动作的眼睛，如果你不理它，它就会很沮丧。

Louise：我最初学习 p5.js 是为了使我正在创建的网站更加有趣。 我是一名C#程序员，因此这对我来说是进入JavaScript的良好开端。

你是如何在这个项目中使用p5.js的？

Casey：我一直在推迟学着色器，在 ITP，我听说过一个针对开源、叙事和学习资源项目的资助项目。xStory因为我在 p5.js + 着色器文档方面找不到太多资源，所以我决定找出它们在 p5.js 中的实现， 并创建一个资源供他人学习。当我告诉 Louise 这个项目时，她立即对学习和教授 p5.js 着色器感到兴奋。 她确保这个项目是一个学习资源，而不仅仅是一个示例集合。

你最喜欢 p5.js 的哪个功能？

Casey：这算作一个功能吗？我也喜欢可以在网上分享我的程序，这样人们就不需要安装特别的软件或者来到纽约就能看到我的作品。Shiffman我特别喜欢推出的功能，以及对坐标系统的转换功能，可以生成视觉效果。

Louise: 我最喜欢的功能是 push()“和 ”pop()“因为可以通过坐标系统的变换生成视觉效果。”

你在处理这个项目时面临了什么挑战？如果有，你是如何克服他们的？

“Casey：项目开始的阶段是我们通过向一些厉害的人提出问题，寻求许可来使用他们在我们项目中的例子。”“Adam Ferriss的GitHub存储库”“确实为我们提供了在p5.js中理解着色器是如何工作，并提供了一些可入门的示例框架。针对我们在使用p5.js时遇到的特定问题，我们向 ”Kate Hollenbach“和 ”Stalgia Grigg“（他们参与了”“ 在p5.js中的实现”“），他们给了我们很大的帮助。”

"Louise: 将着色器引入p5的学习曲线相当陡峭。幸运的是，Adam Ferriss在GitHub上提供了一些非常详细的示例。 我们旨在以一个完全的初学者都能理解如何实现的方式来实现它， 因此，这不仅是一个技术上的挑战，也是传授代码给陌生人和初学者的挑战。在这里，我们借鉴了”“openFrameworks书籍”“的写作方式。我们坚信，这种有趣的“嘿，这并不难，你也可以做到”的方法。”

有什么很酷的东西我们应该看看吗？

“请查看”xStory GitHub“以查看我们同行的精彩资助项目！”

人们在哪里可以了解更多关于你的信息？

Casey: cargocollective.com/kcconch, @kcconch (GitHub)

Louise: louiselessel.com, @louiselessel (GitHub)