面向每一位創(chuàng)意人士

視頻鏈接

這是一個(gè)關(guān)于創(chuàng)意編程的教程，直接面向藝術(shù)家和設(shè)計(jì)師！這個(gè)教程的目標(biāo)讀者是那些在設(shè)計(jì)、藝術(shù)和教育的交叉領(lǐng)域工作的創(chuàng)意人士。

這個(gè)教程是給誰的

• 希望看到計(jì)算和數(shù)據(jù)可以為他們的創(chuàng)造性表達(dá)做些什么;

• 希望從不同角度將計(jì)算和數(shù)據(jù)整合到實(shí)踐中的學(xué)習(xí)者;

• 以及那些已經(jīng)知道如何編程，在計(jì)算和數(shù)據(jù)的環(huán)境中尋找創(chuàng)造力和靈感的人。

《編碼藝術(shù)》作為一個(gè)基于p5.js的創(chuàng)意編程教程，也適用于大學(xué)和藝術(shù)學(xué)院的高等教育專業(yè)課程。這本書為教育工作者以靈活的方式開設(shè)相關(guān)講座提供了各種想法。它可以很容易地用作教學(xué)資源，因?yàn)樗写a示例都可以從教程中集成的配套示例庫中獲得。

這個(gè)教程是為你，在設(shè)計(jì)、藝術(shù)或建筑領(lǐng)域工作的創(chuàng)意人員，以及任何有興趣在專業(yè)實(shí)踐中使用計(jì)算機(jī)編程和交互式技術(shù)作為表達(dá)工具的人準(zhǔn)備的?！毒幋a藝術(shù)》這個(gè)教程作為創(chuàng)意人員實(shí)踐的過程參考，具有實(shí)際意義。通過《編碼藝術(shù)》一書，我們通過四個(gè)漸進(jìn)步驟在創(chuàng)意過程中構(gòu)建內(nèi)容，幫助您將想法表達(dá)為視覺和計(jì)算結(jié)構(gòu)。

在這個(gè)教程中，你將學(xué)習(xí)如何將計(jì)算應(yīng)用到創(chuàng)造性的過程中，遵循四個(gè)步驟，通過這個(gè)步驟，你將進(jìn)入編碼和藝術(shù)的交叉領(lǐng)域，重點(diǎn)放在實(shí)際的例子和相關(guān)的工作結(jié)構(gòu)上。您將跟隨計(jì)算藝術(shù)的一個(gè)真實(shí)的用例，并看到它如何與四個(gè)關(guān)鍵支柱聯(lián)系起來，并解決創(chuàng)造性過程中的潛在陷阱和挑戰(zhàn)。所有的代碼示例都是在一個(gè)完全集成的p5.js示例庫中提供的，這使得讀者很容易上手。

你將學(xué)習(xí)以下內(nèi)容

• 回顧從創(chuàng)意編程到不同專業(yè)領(lǐng)域的想法和方法

• 使用像p5.js這樣的計(jì)算工具

• 了解從靜態(tài)元素到動(dòng)畫再到交互所需的技能

• 使用互動(dòng)作為輸入，使創(chuàng)意概念更接近完善和深度

• 簡(jiǎn)化和擴(kuò)展數(shù)據(jù)結(jié)構(gòu)的美感、韻律和流暢性的設(shè)計(jì)

• 利用網(wǎng)頁或手機(jī)應(yīng)用等其他平臺(tái)上的藝術(shù)代碼多樣性

• 通過真實(shí)世界的用例了解計(jì)算藝術(shù)的端到端過程

• 學(xué)習(xí)創(chuàng)意過程中的最佳實(shí)踐、常見陷阱和挑戰(zhàn)

四個(gè)步驟

在本教程的第一個(gè)主要部分中，我們將分四個(gè)步驟進(jìn)行創(chuàng)作過程，并解釋編碼在每個(gè)步驟中是如何工作的。每個(gè)步驟都將通過幾個(gè)實(shí)際例子展開，并以簡(jiǎn)短的總結(jié)結(jié)束。

第一步，視覺概念，為你提供了一個(gè)簡(jiǎn)短的入門知識(shí)，讓你了解p5.js和你可以隨時(shí)使用的不同視覺元素。在進(jìn)入動(dòng)畫和交互之前，我們很快開始使用視覺畫布。從這一點(diǎn)開始，你知道如何在畫布上繪制移動(dòng)的東西，甚至可能對(duì)你的交互式控制做出反應(yīng)。

第二步是構(gòu)圖和結(jié)構(gòu)，也就是說，我們?nèi)绾巫屗囆g(shù)從畫布上的眾多不同元素中脫穎而出。我們將介紹數(shù)據(jù)和代碼結(jié)構(gòu)，幫助您同時(shí)使用許多視覺元素。我們一起將其應(yīng)用于視覺結(jié)構(gòu)的幾個(gè)例子中。

在第三步中，我們將向您展示如何更詳細(xì)地解決問題，以及如何為您的創(chuàng)作賦予深度。你將學(xué)習(xí)隨機(jī)性和噪音，以及如何藝術(shù)地控制它們。我們將向您展示如何在不同元素和顏色之間創(chuàng)建平滑的動(dòng)畫和過渡。交互性在這一步中返回，我們將向您展示如何將交互式輸入與組合和改良相結(jié)合。

第四步是制作，如何將你的創(chuàng)作搬上互聯(lián)網(wǎng)，如何在從網(wǎng)頁、手機(jī)到互動(dòng)裝置的不同媒體中制作和呈現(xiàn)。

創(chuàng)作示例

在下一頁，我們展示了一個(gè)例子，我們創(chuàng)作的靈感來自于卡齊米爾·馬列維奇的抽象幾何畫（《至上主義》，1915年）。我們選擇這幅作品是因?yàn)椋瑢?duì)我們來說，它在視覺上暗示了一個(gè)非常有趣的靜態(tài)塊的運(yùn)動(dòng)，這個(gè)運(yùn)動(dòng)似乎是在傾倒前的一瞬間捕捉到的。

我們從在奶油色畫布上重現(xiàn)十種基本元素的視覺組成開始（步驟1）。

在第二步中，我們連接到固有運(yùn)動(dòng)的印象，并使用塊：我們遞歸地移動(dòng)和重新繪制相同的構(gòu)圖，隨著時(shí)間的推移添加越來越多的層（步驟2）。

第三步是添加三個(gè)大尺寸旋轉(zhuǎn)的作品副本，以完成圓形透視。隨著時(shí)間的推移，我們還微調(diào)了添加不同元素和操作的時(shí)間，因此作品在第一個(gè)屏幕的幾分鐘內(nèi)就完成了，并在最后一個(gè)屏幕中視覺穩(wěn)定。最后，我們添加了整個(gè)畫布的漸變，在幾分鐘內(nèi)縮小并將畫布的中心從左上角移到右下角（步驟3）。

在第四步中，我們“生成”您看到的圖像：我們讓動(dòng)畫播放并實(shí)時(shí)選擇數(shù)十幀進(jìn)行自動(dòng)渲染。從這些幀中，我們最終選擇了八個(gè)幀，因?yàn)樗鼈儐为?dú)表現(xiàn)出良好的構(gòu)圖，也很好地顯示了整個(gè)作品的運(yùn)動(dòng)（步驟4）

這個(gè)例子展示了我們?nèi)绾谓梃b本教程中描述的四個(gè)大步驟，從每個(gè)步驟中挑選一些與我們的概念相匹配的部分。從過程的角度來看，步驟1、3和4相對(duì)簡(jiǎn)單。我們?cè)诘诙交烁嗟臅r(shí)間，因?yàn)槲覀冞M(jìn)入了兩個(gè)不同的方向，一個(gè)是更好玩的，另一個(gè)是技術(shù)性的，在嘗試了這兩個(gè)方向后，好玩的是最后的正確方向。僅在解決這個(gè)問題之后，我們可以再次加快行動(dòng)。在寫這本書的時(shí)候，你可能也會(huì)遇到困難；別忘了休息，永遠(yuǎn)不要放手。

至上主義

以抽象幾何為例的生成藝術(shù)?卡齊米爾·馬列維奇的繪畫（“至上主義”，1915年）作為靈感。

學(xué)習(xí)方法

在這四個(gè)步驟中，我們將教你創(chuàng)造性計(jì)算，在某個(gè)時(shí)候，你還會(huì)看到一些策略、模式和更復(fù)雜的概念出現(xiàn)。之后，我們將在本教程的第二部分中總結(jié)一個(gè)更大的藝術(shù)項(xiàng)目的所有步驟。最后，在第三部分中，我們通過學(xué)習(xí)和協(xié)作，縮小并轉(zhuǎn)向創(chuàng)造性編碼的實(shí)踐。這一部分向你展示了如何在使用本教程及其他內(nèi)容時(shí)取得進(jìn)展，當(dāng)你感到困難時(shí)可以做什么，以及如何獲得幫助。一切都在那里，你只需要一步一步走向它。

在本書的第一部分中，我們將經(jīng)歷四個(gè)過程步驟，并為每個(gè)步驟展示編碼如何成為我們創(chuàng)作過程中有意義的一部分。在第1步“視覺創(chuàng)意”中，我們采用自下而上的方法，直接從視覺效果和代碼開始。這種方法的切入點(diǎn)是直接從創(chuàng)意過程的構(gòu)思階段使用代碼。更具體地說，與其制作情緒板、素描、寫作、搜索網(wǎng)絡(luò)或與專家交談，我們建議您只需啟動(dòng)聚觀點(diǎn)開發(fā)環(huán)境。首先，我們研究如何使用p5.js和幾行代碼來表達(dá)我們的想法。是的，我們從簡(jiǎn)單開始。