新垣结衣自拍照_仅使用代码创建自拍照

新垣结衣自拍照

As a part of my Creative Coding class at NYU Tandon’s Integrated Digital Media program, my task for the first week was to draw a selfie entirely with code. Back when I was an undergrad learning basic markup languages like HTML and CSS, I definitely couldn’t imagine myself taking on a task like this. When I was brainstorming the composition for this odd little piece of digital art, I had two goals in mind.

在纽约大学丹顿分校的集成数字媒体计划中，作为我的创意编码课程的一部分，我第一周的任务是完全用代码绘制自拍照。 当我还是一个本科生学习诸如HTML和CSS之类的基本标记语言时，我绝对无法想象自己会承担这样的任务。 当我集思广益地创作这种奇特的数字艺术作品时，我想到了两个目标。

The first: since the prompt was to create a selfie with code, I felt like I needed some kind of cell phone framework. When I think of selfies, I think of posing in a slightly embarrassing way and smiling.

第一个：由于提示是使用代码创建自拍照，所以我觉得我需要某种手机框架。 当我想到自拍照时，我想到的是摆姿势有点尴尬和微笑。

The second: as something of a graphic designer, I wanted to make some visually appealing. I knew it was going to be a bit harder than picking up a pen tablet and doodling in PhotoShop, but I didn’t want to throw my visual sensibilities into the wind.

第二个：作为一名平面设计师，我想做一些吸引人的视觉效果。 我知道这比在PhotoShop中拿起手写板和涂鸦要困难一些，但我不想将视觉感受抛诸脑后。

事不宜迟，以下是自拍照的完整介绍。 (Without further ado, here’s a full look at the selfie.)

Coded Illustration by Author

作者的编码插图

And of course…the 181 lines of code it took to create it. If you’d like to have a peek at every line that went into that graphic, it’s all there in the p5.js editor. I started with a dark line art in the first iteration, but I ended up feeling like that was a little too jarring. I kept tinkering with all the different coded elements to get a soothing pastel palette throughout.

当然…… 创建它需要181行代码 。 如果您想窥探该图形中的每一行，请访问p5.js编辑器。 我在第一次迭代中以深色线条艺术开始，但最终感觉有点太刺耳了。 我不断修改所有不同的编码元素，从而获得舒缓的柔和色调。

I went through a significant amount of trial and error when writing the code behind this little graphic with p5.js. Though I dabble with markup languages, I’m a writer at heart. As a writer, I always try to approach a challenge by researching first.

使用p5.js在这个小图形后面编写代码时，我经历了大量的试验和错误。 尽管我涉猎标记语言，但我还是一个内心的作家。 作为作家，我总是尝试首先研究以应对挑战。

Screenshot of Code by Author

作者代码的屏幕截图

I started by doing outside research, watching tutorials, and reading through the Make: Getting Started with p5.js book.

我首先进行了外部研究，观看了教程，并通读了《 make：p5.js入门》一书。

The mathematical backbone of the language threw me for a loop at first; words are my friends, but numbers typically are not.

语言的数学骨干一开始让我感到困惑。 话是我的朋友，但数字通常不是。

Regardless, I decided to try and build a selfie by layering simple shapes and combining pastel colors for a simple coded illustration.

无论如何，我决定尝试通过层叠简单的形状并组合柔和的颜色来制作简单的编码插图，以构建自拍照。

I even braved a bit of pi to create the curved lines with p5.js’ arc function. Here’s a little snippet of the code that creates the “line art” of my face.

我什至还冒昧地用pi来创建带有p5.js 弧函数的曲线。 这是创建我的脸的“线条艺术”的代码的一小段。

Though I’m far from being a mathematician, I was able to work with the coordinates, tinker with that fearsome slice of pi, and get the lines working.

尽管我还不是数学家，但我能够使用坐标，修补那令人恐惧的pi片段，并使线段起作用。

I feel like I’ll need to practice with the language a bit more before I have a really solid grasp on how to manipulate these functions efficiently, but I think I’m on my way.

我觉得我需要对语言进行更多的练习，才能真正扎实地掌握如何有效地操作这些功能，但是我认为自己正在前进。

尽管我正在使用代码，但我仍然像普通的数字艺术家一样在思考。 (Though I’m working with code, I’m still thinking like a regular digital artist.)

Screenshot of Code by Author

作者代码的屏幕截图

I’m still getting the hang of the looping nature of p5.js and how proper layering works in the language. Since I’m still getting the feel for how best to organize my code, I fell back on working like a digital artist.

我仍然对p5.js的循环性质以及该语言中正确的分层工作原理一窍不通。 由于我仍然对如何最好地组织代码有感觉，因此我退回到像数字艺术家这样的工作中。

For me, that essentially meant… playing pretend like I was just making layers in PhotoShop or Paint Tool Sai.

对我而言，这本质上意味着……假装就像我只是在PhotoShop或Paint Tool Sai中制作图层一样。

I can’t say yet if this is an ideal system for organizing code, but it was a serviceable way to put together this first project.

我还不能确定这是否是组织代码的理想系统，但这是将第一个项目组合在一起的一种有用的方法。

One thing I learned fast doing complicated illustrations with detailed line arts is the importance of naming your layers.

我很快学会了用复杂的线条艺术制作复杂的插图，这就是命名图层的重要性。

It’s something that a lot of digital artists I know don’t bother doing, but if I’m doing a big illustration, I’ll easily end up 200 to 300 layers in PhotoShop.

我知道很多数字艺术家都不会这样做，但是如果我做一个大的插图，我很容易在PhotoShop中形成200到300层。

After years of poor organization and never naming my layers, I realized how much time I could save on final edits if I just set myself up for success and named my layers as I made them.

经过数年的糟糕组织，并且从未命名自己的图层，我意识到，如果我为成功所做的准备并命名图层时，可以节省多少最终编辑时间。

I took that good habit from my experience drawing and named sections of my code accordingly. They’re not exactly “layers” in the literal PhotoShop sense, but it made it easy for me to go back and make changes.

我从自己的绘图经验中吸取了这个好习惯，并相应地命名了代码部分。 从字面意义上讲，Photoshop并非完全是“图层”，但它使我可以轻松地进行更改。

即使组织事情，我也会尽力使之有趣。 (Even when organizing things, I try to make it fun.)

I’m notorious for ridiculous file names. While they’re silly, it’s better than the dread of every creative in the digital age: File_Final1, File_Final2, File_ReallyReallyFinal, File_SUPERFINAL, and endless similar iterations that just get incredibly confusing with each additional edit.

我因可笑的文件名而臭名昭著。 尽管它们很愚蠢，但它比数字时代的每个广告素材都更令人恐惧：File_Final1，File_Final2，File_ReallyReallyFinal，File_SUPERFINAL，以及无尽的类似迭代，这些迭代会使每次附加的编辑都难以理解。

Screenshot of Code by Author

作者代码的屏幕截图

I like to throw some silly comments when I get deep into a project. This is probably something I’ll need to clean up when I’m doing more truly professional projects, but for now, I’ll have some fun slipping silly comments into my code.

当我深入到项目中时，我喜欢发表一些愚蠢的评论。 当我从事更真正专业的项目时，可能需要清理一下这些东西，但是现在，将愚蠢的注释放到我的代码中会很有趣。

循环功能确实让我陷入了循环。 (The loop function did throw me for a loop.)

One of my most triumphant (and silly) moments working on this piece was at the very end. The looping nature of p5.js gave me some trouble; I had color and stroke weight modifiers that were cycling in a way that disrupted the other parts of the illustration. A certain fill color modifier wanted to go wild and recolor other parts of the illustration. I found an absolutely terrible workaround.

我在这首作品上最胜利(最愚蠢)的时刻之一就在最后。 p5.j​​s的循环特性给我带来了麻烦。 我使用的颜色和笔触权重修改器的循环方式破坏了插图的其他部分。 某个填充颜色修改器想要变色并为插图的其他部分重新着色。 我发现了一个绝对可怕的解决方法。

Screenshot of Code by Author

作者代码的屏幕截图

The console was, quite understandably, rather upset with me. I watched a few other tutorials on YouTube (for where would we be without YouTube?) and when I was trying to learn how to import text into p5.js, I stumbled upon a glorious gem.

可以理解，控制台让我很不高兴。 我在YouTube上观看了其他一些教程(如果没有YouTube，我们会在哪里？)，当我试图学习如何将文本导入p5.js时，偶然发现了一个光荣的宝石。

Screenshot of Code by Author

作者代码的屏幕截图

A simple command to stop the loop was all I needed. One simple line of code to resolve I problem I tinkered with for four days. It was a glorious moment and it felt great to overcome that bothersome little issue that prevented me from crossing the finish line.

我只需要一个简单的命令即可停止循环。 一条简单的代码行解决了我四天来遇到的问题。 那是一个光荣的时刻，克服那使我无法越过终点线的麻烦小问题感到非常高兴。

All in all, though I do think I could make the illustration better with more practice, I feel like I did a fair bit of problem-solving and learned a decent amount of the basics. It’s a simple graphic with relatively simple code fueling it, but I’m eager to build on this foundation.

总而言之，尽管我确实认为我可以通过更多的练习来使插图更好，但是我觉得自己做了很多解决问题的工作，并且学到了很多不错的基础知识。 这是一个简单的图形，带有相对简单的代码为它加油，但是我渴望在此基础上构建。

翻译自: https://medium.com/leigh-learns-creative-coding/creating-a-selfie-solely-with-code-9adca771667d

新垣结衣自拍照