In 2018 I started the process of consistently creating and posting my code sketches online. These are small animations I make with code and post on instagram. Through these sketches I tried to visually express my ideas using color, animation, and interaction. Through time, I wanted to refine my own interaction style, color use, and general aesthetic preferences. I tried to create on a weekly basis but wasn’t strict about it.

在2018年，我開始了一致地在線創建和發布代碼草圖的過程。 這些是我用代碼制作的小動畫，并發布在instagram上 。 通過這些草圖，我嘗試使用顏色，動畫和交互方式直觀地表達自己的想法。 隨著時間的流逝，我想完善自己的交互風格，顏色使用以及一般的審美偏好。 我嘗試每周創建一次，但并不嚴格。

I was inspired by the School of Poetic Computation, Zach Lieberman, and Dan Shiffman’s creative use of interactive code to push my own boundaries and continue learning. Huge thank you to Ian Vonseggern for helping me understand a lot of the underlying mechanics of the built in p5.js functions.

扎克·里伯曼(Zach Lieberman)詩意計算學院和丹·希夫曼(Dan Shiffman)創造性地使用交互式代碼來突破自己的界限并繼續學習，這給我帶來了啟發。 非常感謝Ian Vonseggern幫助我理解了內置p5.js函數的許多底層機制。

I thought I’d show what I sketched last year and talk about my process.

我以為我會展示我去年的素描并談論我的過程。

問責制 (Accountability)

I started this instagram account to keep myself accountable. I’ve tried many times to learn coding languages over the years but have struggled to keep inspired. I could only stare at lines of code for so long before I lost sense of my starting motivation. This time around however, processing & p5.js had a fast enough execution cycle to let me see what I was building while I was building it. The cycle between writing code and seeing output was wonderfully short.

我啟動了這個instagram帳戶以確保自己負責。 多年來，我已經嘗試了很多次學習編碼語言，但是一直努力保持靈感。 我只能盯著代碼行這么長時間，直到我對開始的動機失去了知覺。 但是這一次，processing＆p5.js具有足夠快的執行周期，可以讓我看到自己正在構建的內容。 編寫代碼和查看輸出之間的周期非常短。

I set a timebox of a few hours per sketch. I tried not to put weight on what I created, but whether or not the idea conveyed a sense of emotion. That mindset helped me feel comfortable iterating on ideas through several sessions.

我為每個草圖設置了幾個小時的時間框。 我嘗試不對自己創作的作品施加任何壓力，但是這個想法是否傳達了一種情感感。 這種心態使我在數次會議中反復討論想法時感到很自在。

靈感 (Inspiration)

Having a collection of images is really helpful to inspire ideas. I spent a lot of time looking at high fashion runway shows (Alexander McQueen), streetwear (New York Sunshine), album covers (Nirvana), flower arrangements (Freakebana), 3d sculptures (David Smith), and architectural structures (Philip Johnson’s The Glass House). More examples: Serge’s daily poster series, Laurie Anderson’s Handphone Table, Spider-man: Into the Spiderverse movie color scheme, Sam Gilliam’s exhibition at Dia:Beacon and the Whitney’s Programmed Rules, Codes, and Choreographies in Art exhibit.

收集圖像確實有助于激發思想。 我花了很多時間看時裝秀 (Alexander McQueen)， 街頭服飾 (New York Sunshine)， 專輯封面 (Nirvana)， 插花 (Freakebana)， 3d雕塑 (David Smith)和建筑結構 (Philip Johnson's The玻璃屋)。 更多示例：Serge的每日海報系列 ，Laurie Anderson的Handphone Table ，蜘蛛俠：進入Spiderverse 電影配色方案 ，Sam Gilliam在Dia：Beacon的展覽以及Whitney的Programmed Rules，Codes和Choreographies in Art展覽。

Throughout the past year, I learned that I gravitated toward creating works with opposing pastel colors. Tobias van Schneider’s color tool helped inspire color combinations that worked.

在過去的一年中，我了解到我偏向于創作具有相反柔和色彩的作品。 Tobias van Schneider的色彩工具有助于激發有效的色彩組合。

處理 (Process)

My process is pretty lo fi. I use a combination of notepaper, Sublime Text, Quicktime, iMovie, and my iPhone.

我的過程很不錯。 我使用了便條紙，Sublime Text，Quicktime，iMovie和我的iPhone。

• draw out a rough physical sketch of my idea
  勾勒出我的主意
• fork an old sketches or google functions to figure out execution methods
  派生舊草圖或Google函數找出執行方法
• figure out limitations in the libraries and iterate through different ways to create the idea
  找出庫中的限制，并通過不同的方式迭代以創建想法
• grab a screen recording with Quicktime, usually several cycles of the animation
  使用Quicktime抓取屏幕錄像，通常是動畫的幾個周期
• trim the video using Quicktime
  使用Quicktime修剪視頻
• load the .mov file into iMovie to set the white border and thumbnail image
  將.mov文件加載到iMovie中以設置白色邊框和縮略圖
• airdrop the file to my phone
  將文件空投到我的手機上
• upload to instagram
  上傳到Instagram

運動軌跡 (Movement Trail)

My initial sketches were around the movement trail — what visual artifacts can I create to simulate movement?

我最初的草圖是圍繞運動軌跡的-我可以創建哪些視覺偽像來模擬運動？

I started with this because one of the core components of the Processing language is its draw() function. This draw() function continuously gets called and executes the lines of code contained in its block until the sketch is terminated. By default the draw() function gets executed as many as 60 times per second, but another function, frameRate(), can control how many frames actually get displayed.

我之所以開始，是因為處理語言的核心組件之一是它的draw()函數。 不斷調用此draw()函數并執行其塊中包含的代碼行，直到草圖終止。 默認情況下，draw()函數每秒執行多達60次，但是另一個函數frameRate()可以控制實際顯示多少幀。

This allowed interesting layering. My first sketch used a two dimensional random walk with an image of Drake.

這允許有趣的分層。 我的第一個草圖使用帶有Drake圖像的二維隨機游動。

Since the draw() function continuously re-draws the image, I updated the image location in each execution cycle and changed the background alpha value to be redrawn with 80% opacity, allowing a bit of the old image to peek through. This allowed for a trace of the old image to suggest movement. The layering added a nice effect of simulated fading. Drake’s smiling face wobbling around the screen was really fun to watch.

由于draw()函數不斷重繪圖像，因此我在每個執行周期中更新了圖像位置，并更改了要以80％不透明度重繪的背景alpha值，從而使一些舊圖像可以??窺視。 這樣就可以看到舊圖像的痕跡，以暗示運動。 分層效果增加了模擬褪色效果。 Drake的笑臉在屏幕上搖晃，看著真的很有趣。

One of the things I really liked about this effect is its ability to show movement even in a still image. So much of interactive art needs time to pass in order to showcase itself; this does not.

我最喜歡這種效果的一件事是它即使在靜止圖像中也能顯示運動。 因此，很多互動藝術都需要時間才能展示出來。 這不是。

移動線 (Moving Lines)

I walked into Sam Gilliam’s exhibit at Dia:Beacon last year and immediately loved how he took a property intrinsic to fabric — draping — and used applied color to make it an exuberant draping.

去年，我走進了Sam Gilliam在Dia：Beacon的展覽中，立即愛上了他如何利用織物固有的特性-懸垂性-并使用顏色使它成為旺盛的懸垂性。

I loved the upbeat relaxed feeling Gilliam’s “Double Merged” evoked. This immediately made me think, “How could I translate this feeling into a sketch using lines and colors?”

我喜歡吉利安(Gilliam)引發的“雙重融合”的輕松愉悅的感覺。 這立刻讓我想到：“我該如何使用線條和顏色將這種感覺轉換為草圖？”

To capture this feeling, I looked at simultaneous movement in both the x and y directions vs color movement in the HSB spectrum. I tried color movement combined with x-axis movement. I played with large y-axis movements interspersed with small x-axis movements. I really enjoyed this exploration.

為了捕捉這種感覺，我研究了x和y方向上同時運動與HSB光譜中顏色運動的關系。 我嘗試了將色彩移動與x軸移動結合使用。 我在較大的y軸運動和較小的x軸運動之間進行游戲。 我真的很喜歡這種探索。

I learned that while gentle movement was important for a relaxing feeling, color was the most important factor in conveying exuberance. Even if my ball of color was only moving along a straight line, as long as the pulsing gradient was pleasing, the sketch was exuberant and happy.

我了解到，輕柔的運動對于放松感很重要，而色彩則是傳遞活力的最重要因素。 即使我的彩球只是沿直線移動，只要脈動的漸變令人愉悅，草圖還是充滿活力和快樂的。

鼠標互動 (Mouse Interaction)

I’ve always been fascinated by the idea of a responsive environment. I love the idea of physical structures that compress or expand based on the changing number of occupants, glass that changes color based on the intensity of the sun, or structures that physically contort to adapt to its environmental stimuli.

我一直對響應式環境的想法著迷。 我喜歡這樣一種構想：根據乘員人數的變化而壓縮或膨脹的物理結構，根據太陽的強度而變色的玻璃，或者物理扭曲以適應其環境刺激的結構。

None of this is currently realistic in the built world, but the digital world is limitless. I started by looking at mouse x sketch interactions — what does it look like when certain items in a sketch follow my changing movement?

目前，在構建環境中這一切都不是現實的，但是數字世界是無限的。 我從觀察鼠標x草圖的交互開始-當草圖中的某些項目跟隨我不斷變化的運動時會是什么樣？

These sketches generally involved at least one static point of rotation and then elements that moved based on mouse interaction. When I was first playing with this concept, I wanted some point in the sketch to be static so that the moving parts were distinct.

這些草圖通常涉及至少一個靜態旋轉點，然后涉及基于鼠標交互作用而移動的元素。 當我第一次玩這個概念時，我希望草圖中的某個點是靜態的，以使運動的零件與眾不同。

I also played with showing the cursor as its own object on the screen. What I love about interactivity — controlling the image with my own movements — doesn’t translate well to passive viewing environments like instagram. When I record it, I know I’m dynamically controlling the page and the page elements are responding in kind, but when this is translated to instagram, it just looks like the elements are randomly moving around. Adding a clear cursor image kind of helps with that, but I think there can be better solutions in the future.

我還玩過在屏幕上將光標顯示為自己的對象。 我喜歡互動性-用自己的動作控制圖像-不能很好地轉化為instagram等被動觀看環境。 當我記錄它時，我知道我正在動態地控制頁面，并且頁面元素都以實物為響應，但是當將其翻譯為instagram時，看起來元素只是在隨機移動。 添加清晰的光標圖像可以幫助您，但是我認為將來會有更好的解決方案。

漸變色 (Gradients)

After many hours experimenting with different color schemes for the different sketches, I realized I gravitated toward a certain pastel color palette. I liked complementary colors that felt soothing. I like how I felt a sense of calm happiness looking at soothing pastel colors.

在為不同的草圖嘗試了不同的配色方案許多小時后，我意識到我傾向于使用某種柔和的調色板。 我喜歡讓人舒緩的補色。 我喜歡看著柔和的柔和色彩帶來的平靜幸福感。

Funny enough, I started seeing beautiful gradients everywhere — in posters and sweatshirts and beer labels and in grocery stores.

有趣的是，我開始在各處看到美麗的漸變色-在海報，運動衫，啤酒標簽和雜貨店中。

I got inspired from all the color pairings and wanted to recreate the soothing feeling through my sketches. I started playing around with many different types of gradients. One of the combinations I explored involved the pink color blending into the blue color, but “pushing” the blue color aside to add more and more pink to the sketch.

我從所有的色彩搭配中得到了啟發，并希望通過我的草圖重現舒緩的感覺。 我開始嘗試許多不同類型的漸變。 我探索的一種組合涉及將粉紅色混入藍色，但是將“藍色”推到一邊以向草圖中添加越來越多的粉紅色。

I loved the pulsing feel of a brightness overtaking the sketch, one line at a time.

我喜歡亮度超過草圖的脈沖感，一次超過一行。

My favorite gradient sketch was inspired by snowfall. This was done during the only New York snowstorm in winter of 2019. Through this sketch, I wanted to show the calming feeling of watching a whiteout from your apartment room window.

我最喜歡的漸變草圖是受降雪啟發的。 這是在2019年冬季發生的唯一紐約暴風雪中完成的。通過此草圖，我想表現出從公寓房間窗戶觀看停電的平靜感覺。

Having this sketch blend into the white background of the instagram app was a happy accident, and allowed for the total snowfall feeling to be amplified.

將此草圖融合到instagram應用程序的白色背景中是一件很不幸的事，并且使總的降雪感得以放大。

作為運動放置 (Placement as movement)

I saw Gerhard Richter’s 4,900 Colors at some point in 2019. I usually get inspired by looking at art and this was no exception. However, the question that popped into my mind this time was “so….this seems like I can recreate this myself…?”

我在2019年的某個時候看過格哈德·里希特(Gerhard Richter)的4,900色 。我通常會受到藝術創作的啟發，這也不例外。 但是，這次浮現在腦海中的問題是“所以……。看來我可以自己重建這個……？”

If this is an art piece about generating colors randomly via a computer algorithm, if I have a computer and an understanding of how the random() function worked, I thought could probably figure it out. So I did!

如果這是關于通過計算機算法隨機生成顏色的藝術品，如果我有一臺計算機并且對random()函數的工作方式有所了解，那么我認為可能可以解決。 所以我做了！

First I worked on imitating the piece. I knew that this was a series of colored squares in the x and y direction but I quickly got stuck trying to figure out how to nest the squares inside each other. When I mentioned this to Ian, he showed me that simply putting the random fill inside of two for() loops solved that problem.

首先，我致力于模仿作品。 我知道這是在x和y方向上的一系列彩色正方形，但我很快陷入困境，試圖找出如何將正方形相互嵌套。 當我向Ian提及這一點時，他向我展示了將隨機填充放入兩個for()循環中就可以解決該問題。

I then played with the shapes of the fill and the fill colors. I found it quite interesting that by simply reducing the number of colors to two, what was happening in the sketches grew much clearer.

然后，我玩了填充的形狀和填充顏色。 我發現非常有趣的是，只需將顏色數量減少為兩種，草圖中發生的事情就變得更加清晰。

反思與2020 (Reflection & 2020)

It was quite fun to write code and quickly create a visual output. I loved understanding how the different functions worked and getting comfortable enough with coding to figure out how to translate random ideas into reality.

編寫代碼并快速創建視覺輸出非常有趣。 我喜歡理解不同功能的工作原理，并且對編碼足夠熟悉，可以弄清楚如何將隨機想法轉化為現實。

Some thoughts:

一些想法：

• I often started with sketches that were visually overcomplicated and then pared them down after the initial draft. Over time, I learned that sketches needed a focal point to be interesting. There needed to be a clear visual reason the sketch existed. That simplicity could be shown by a lot of white space or a sparing use of color.
  我經常從視覺上過于復雜的草圖開始，然后在初稿后將其縮減。 隨著時間的推移，我了解到草圖需要一個有趣的焦點。 草圖必須有清晰的視覺原因。 這種簡單性可以通過大量的空白或少量使用顏色來體現。
• While it was very fun to start with the fundamentals of writing code to produce sketches, I wanted to have a quicker way of translating ideas from my mind onto the screen.
  雖然從編寫代碼以生成草圖的基礎開始很有趣，但我希望有一種更快的方法將想法從我的思想轉換到屏幕上。

With rapid execution in mind, I started following more visual artists on Instagram and found a common hashtag amongst those artists: #touchdesigner. I googled it and instantly became very excited to try it out.

考慮到快速執行，我開始在Instagram上關注更多視覺藝術家，并在這些藝術家中發現了一個共同的標簽：#touchdesigner。 我在Google上搜索了一下，立即感到非常興奮，可以嘗試一下。

As found in Wikipedia:

如Wikipedia中所述：

TouchDesigner is a node based visual programming language for real time interactive multimedia content, developed by the Toronto-based company Derivative. It’s been used by artists, programmers, creative coders, software designers, and performers to create performances, installations, and fixed media works.

TouchDesigner是一種基于節點的可視化編程語言，用于實時交互式多媒體內容，由多倫多公司Derivative開發。 藝術家，程序員，創意編碼人員，軟件設計師和表演者已使用它來創建表演，裝置和固定媒體作品。

I think this is the next step of my sketches. Time to try it out!

我認為這是我的素描的下一步。 是時候嘗試一下！

Thanks for reading~

謝謝閱讀?