簡(jiǎn)單來(lái)講，p5.js 是一個(gè)庫(kù)(庫(kù)是 JavaScript 庫(kù)。)配上許多工具，它讓編程愛(ài)好者、藝術(shù)家、設(shè)計(jì)師們可以輕松使用 JavaScript 語(yǔ)言進(jìn)行創(chuàng)意編程。
不知道你是否了解過(guò)Processing 語(yǔ)言的家譜（如下圖所示）。與人類語(yǔ)言一樣，編程語(yǔ)言同樣屬于相關(guān)語(yǔ)言的家族。而今天，要介紹給大家的的，即其家族成員之一的 p5.js
點(diǎn)擊圖片進(jìn)入 >>>> 魔法Processing入門課程！
簡(jiǎn)單來(lái)講，p5.js 是一個(gè)庫(kù)(庫(kù)是 JavaScript 庫(kù)。)配上許多工具，它讓編程愛(ài)好者、藝術(shù)家、設(shè)計(jì)師們可以輕松使用 JavaScript 語(yǔ)言進(jìn)行創(chuàng)意編程。
01 p5.js是什么？
p5.js是個(gè)基于JavaScript 編程語(yǔ)言的創(chuàng)意編程程式庫(kù)，也是一個(gè)免費(fèi)的開(kāi)源網(wǎng)頁(yè)版軟件。它的目標(biāo)用戶是藝術(shù)家、設(shè)計(jì)師、教育家、初學(xué)者以及任何其他人。p5.js除了可以作為一個(gè)網(wǎng)頁(yè)版畫板讓你的作品從靜態(tài)到動(dòng)態(tài)，更可以調(diào)用聲音、攝像頭等完成人與作品的互動(dòng)。隨著p5.js的不斷更新和發(fā)展，用戶更是可以利用ml5的庫(kù)完成圖像識(shí)別、機(jī)器學(xué)習(xí)等神經(jīng)網(wǎng)絡(luò)的功能。
水上落日 作者：Justin Chambers
作為一個(gè)設(shè)計(jì)師，你或許會(huì)因?yàn)閺?fù)雜的“編程世界”而產(chǎn)生畏懼，那么界面簡(jiǎn)單語(yǔ)言庫(kù)親人的p5.js 就是最適合你入門創(chuàng)意編程的最佳工具。
02 為什么要學(xué)p5.js？
我們都有很多的想法和創(chuàng)意，透過(guò)編程來(lái)表達(dá)自己的創(chuàng)意和藝術(shù)構(gòu)想，是一個(gè)全新的方式，也是一個(gè)很好的方式。設(shè)計(jì)師做設(shè)計(jì)，最初是使用的紙和筆。到后來(lái)可以使用電腦軟件來(lái)輔助設(shè)計(jì)，例如大家熟悉的Ps、Ai、maya、3Dmax等等。
粒子時(shí)鐘作者：Fabian Kober
當(dāng)今這個(gè)時(shí)代的設(shè)計(jì)師需要學(xué)習(xí)編程，因?yàn)檫@樣就可以不受設(shè)計(jì)軟件的影響和限制，進(jìn)行更加自由的創(chuàng)作，讓自己的想象力和創(chuàng)意盡情的揮灑出來(lái)！當(dāng)你自己能夠制作出用來(lái)創(chuàng)作的工具時(shí)，那么唯一限制你的就是你的想象力了。
3維地震數(shù)據(jù)可視化 作者：Daniel Shiffman
P5是Processing的升級(jí)版，P5和Processing一樣，都有全套的繪圖功能，但它并不受限于在畫布中作畫，而是把整個(gè)瀏覽器頁(yè)面都變成自己的“繪布”，因此它還提供了一系列的附加函數(shù)庫(kù)，例如p5.dom可以使你很容易地和其他的HTML5對(duì)象發(fā)生互動(dòng)，這些對(duì)象包括文字，輸入框，影像，攝像頭和聲音。
交互藝術(shù)演示作者：Daniel Shiffman
現(xiàn)在越來(lái)越多的創(chuàng)意公司，都在尋找會(huì)編程的交互設(shè)計(jì)師或是懂設(shè)計(jì)的程序員，他們是各公司爭(zhēng)搶的對(duì)象。我們的招聘合作伙伴包括：阿里云數(shù)據(jù)可視化團(tuán)隊(duì)，SONY, W+K, FORG，NAKED Inc.等。
03 零代碼基礎(chǔ)學(xué)習(xí)創(chuàng)意編程p5.js
主講老師
鄭老師
利茲大學(xué)-數(shù)字與交互設(shè)計(jì)-碩士
北京交互工業(yè)工作室
數(shù)字交互設(shè)計(jì)教師
以pass with distinction的優(yōu)秀畢業(yè)成績(jī)畢業(yè)于英國(guó)利茲大學(xué)，并同時(shí)受導(dǎo)師推薦進(jìn)入Beyond Consulting Ltd.(UK)咨詢公司任APP端交互設(shè)計(jì)師。曾先后代表公司參與與BBC合作調(diào)研，參加創(chuàng)新創(chuàng)業(yè)大會(huì)。學(xué)術(shù)上，著有EI收錄論文一篇，多項(xiàng)實(shí)用新型專利和設(shè)計(jì)獎(jiǎng)項(xiàng)。
課程大綱
課時(shí) 1 從設(shè)計(jì)師思維到編程思維去認(rèn)識(shí)p5.js
課程內(nèi)容：p5.js界面簡(jiǎn)介、基礎(chǔ)繪畫操作、編程繪畫思維、基礎(chǔ)debug
學(xué)習(xí)成果：可以互動(dòng)的吉祥物
課程產(chǎn)出成果
課時(shí) 2 常用p5.js內(nèi)置函數(shù)的應(yīng)用與介紹
課程內(nèi)容：常用基本函數(shù)應(yīng)用與介紹、自定義函數(shù)應(yīng)用與介紹
學(xué)習(xí)成果：重復(fù)的動(dòng)態(tài)圖形
課程產(chǎn)出成果
課時(shí) 3 p5.js中用筆記本電腦就能完成的交互
課程內(nèi)容：加載圖片、加載字體、調(diào)用聲音、調(diào)用攝像頭
學(xué)習(xí)成果：聲控相機(jī)
課程產(chǎn)出成果
課時(shí) 4 難住設(shè)計(jì)師的編程其實(shí)是數(shù)學(xué)和物理
課程內(nèi)容：基礎(chǔ)物理知識(shí)，常用數(shù)學(xué)圖形、數(shù)組
學(xué)習(xí)成果：碰撞掉落小球
課程產(chǎn)出成果
課時(shí) 5 創(chuàng)意編程中的滿天繁星叫“質(zhì)點(diǎn)”
課程內(nèi)容：分類的格式和寫法
學(xué)習(xí)成果：生長(zhǎng)的星云
課時(shí) 6 長(zhǎng)代碼的精簡(jiǎn)和整理
課程內(nèi)容：標(biāo)簽頁(yè)的調(diào)用、控制桿的范例
學(xué)習(xí)成果：多種星云變化
課程產(chǎn)出成果
課時(shí) 7 翻譯processing為p5.js
課程內(nèi)容：翻譯網(wǎng)站，如何修改細(xì)節(jié)，書寫格式修改
學(xué)習(xí)成果：基于processing修改的作品
課時(shí) 8 ml5機(jī)器學(xué)習(xí)的初窺
課程內(nèi)容：圖像識(shí)別、人體捕捉、機(jī)器訓(xùn)練、風(fēng)格轉(zhuǎn)化
學(xué)習(xí)成果：利用ml5的創(chuàng)意設(shè)計(jì)作品
課程產(chǎn)出成果
課時(shí) 9 學(xué)會(huì)如何自學(xué)ml5機(jī)器學(xué)習(xí)
課程內(nèi)容：ml5網(wǎng)站介紹、TensorFlow網(wǎng)站介紹
學(xué)習(xí)成果：利用ml5的創(chuàng)意設(shè)計(jì)作品2
課程產(chǎn)出成果
課時(shí) 10 舉一反三
課程內(nèi)容：邏輯整理、尋找范例、試錯(cuò)修改；與arduino交互的延伸應(yīng)用
學(xué)習(xí)成果：自主設(shè)計(jì)作品
收費(fèi)情況：6000元
ACG內(nèi)部學(xué)員咨詢督導(dǎo)報(bào)名
限額5人
課堂模式
從技術(shù)、概念入手—老師實(shí)戰(zhàn)演示—學(xué)生實(shí)戰(zhàn)—老師分屏細(xì)改，就本節(jié)課的內(nèi)容，布置相應(yīng)的應(yīng)用該技術(shù)的作業(yè)—下節(jié)課進(jìn)行單人展示、老師進(jìn)行批改
課程報(bào)名
掃描上方二維碼，咨詢報(bào)名吧！
