藝術(shù)留學(xué)

首頁 > 藝術(shù)資訊 > 最潮交互課程系列2:零代碼基礎(chǔ)學(xué)習(xí)創(chuàng)意編程p5.js

最潮交互課程系列2:零代碼基礎(chǔ)學(xué)習(xí)創(chuàng)意編程p5.js

發(fā)布時間:2020-04-14 藝術(shù)留學(xué)咨詢:400-612-8881

簡單來講,p5.js 是一個庫(庫是 JavaScript 庫。)配上許多工具,它讓編程愛好者、藝術(shù)家、設(shè)計(jì)師們可以輕松使用 JavaScript 語言進(jìn)行創(chuàng)意編程。

不知道你是否了解過Processing 語言的家譜(如下圖所示)。與人類語言一樣,編程語言同樣屬于相關(guān)語言的家族。而今天,要介紹給大家的的,即其家族成員之一的 p5.js

點(diǎn)擊圖片進(jìn)入 >>>> 魔法Processing入門課程!

 

簡單來講,p5.js 是一個庫(庫是 JavaScript 庫。)配上許多工具,它讓編程愛好者、藝術(shù)家、設(shè)計(jì)師們可以輕松使用 JavaScript 語言進(jìn)行創(chuàng)意編程。

 

  01 p5.js是什么?

 

p5.js是個基于JavaScript 編程語言的創(chuàng)意編程程式庫,也是一個免費(fèi)的開源網(wǎng)頁版軟件。它的目標(biāo)用戶是藝術(shù)家、設(shè)計(jì)師、教育家、初學(xué)者以及任何其他人。p5.js除了可以作為一個網(wǎng)頁版畫板讓你的作品從靜態(tài)到動態(tài),更可以調(diào)用聲音、攝像頭等完成人與作品的互動。隨著p5.js的不斷更新和發(fā)展,用戶更是可以利用ml5的庫完成圖像識別、機(jī)器學(xué)習(xí)等神經(jīng)網(wǎng)絡(luò)的功能。

水上落日 作者:Justin Chambers

 

作為一個設(shè)計(jì)師,你或許會因?yàn)閺?fù)雜的“編程世界”而產(chǎn)生畏懼,那么界面簡單語言庫親人的p5.js 就是最適合你入門創(chuàng)意編程的最佳工具。

 

  02 為什么要學(xué)p5.js?

 

我們都有很多的想法和創(chuàng)意,透過編程來表達(dá)自己的創(chuàng)意和藝術(shù)構(gòu)想,是一個全新的方式,也是一個很好的方式。設(shè)計(jì)師做設(shè)計(jì),最初是使用的紙和筆。到后來可以使用電腦軟件來輔助設(shè)計(jì),例如大家熟悉的Ps、Ai、maya3Dmax等等。

粒子時鐘作者:Fabian Kober

 

當(dāng)今這個時代的設(shè)計(jì)師需要學(xué)習(xí)編程,因?yàn)檫@樣就可以不受設(shè)計(jì)軟件的影響和限制,進(jìn)行更加自由的創(chuàng)作,讓自己的想象力和創(chuàng)意盡情的揮灑出來!當(dāng)你自己能夠制作出用來創(chuàng)作的工具時,那么唯一限制你的就是你的想象力了。

3維地震數(shù)據(jù)可視化 作者:Daniel Shiffman

 

P5Processing的升級版,P5Processing一樣,都有全套的繪圖功能,但它并不受限于在畫布中作畫,而是把整個瀏覽器頁面都變成自己的“繪布”,因此它還提供了一系列的附加函數(shù)庫,例如p5.dom可以使你很容易地和其他的HTML5對象發(fā)生互動,這些對象包括文字,輸入框,影像,攝像頭和聲音。

交互藝術(shù)演示作者:Daniel Shiffman

 

現(xiàn)在越來越多的創(chuàng)意公司,都在尋找會編程的交互設(shè)計(jì)師或是懂設(shè)計(jì)的程序員,他們是各公司爭搶的對象。我們的招聘合作伙伴包括:阿里云數(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è)成績畢業(yè)于英國利茲大學(xué),并同時受導(dǎo)師推薦進(jìn)入Beyond Consulting Ltd.(UK)咨詢公司任APP端交互設(shè)計(jì)師。曾先后代表公司參與與BBC合作調(diào)研,參加創(chuàng)新創(chuàng)業(yè)大會。學(xué)術(shù)上,著有EI收錄論文一篇,多項(xiàng)實(shí)用新型專利和設(shè)計(jì)獎項(xiàng)。

 

  課程大綱  

 

課時 從設(shè)計(jì)師思維到編程思維去認(rèn)識p5.js

 

課程內(nèi)容:p5.js界面簡介、基礎(chǔ)繪畫操作、編程繪畫思維、基礎(chǔ)debug

學(xué)習(xí)成果:可以互動的吉祥物

課程產(chǎn)出成果

 

課時 常用p5.js內(nèi)置函數(shù)的應(yīng)用與介紹

 

課程內(nèi)容:常用基本函數(shù)應(yīng)用與介紹、自定義函數(shù)應(yīng)用與介紹

學(xué)習(xí)成果:重復(fù)的動態(tài)圖形

課程產(chǎn)出成果

 

課時 3 p5.js中用筆記本電腦就能完成的交互

 

課程內(nèi)容:加載圖片、加載字體、調(diào)用聲音、調(diào)用攝像頭

學(xué)習(xí)成果:聲控相機(jī)

課程產(chǎn)出成果


課時 難住設(shè)計(jì)師的編程其實(shí)是數(shù)學(xué)和物理

 

課程內(nèi)容:基礎(chǔ)物理知識,常用數(shù)學(xué)圖形、數(shù)組

學(xué)習(xí)成果:碰撞掉落小球

課程產(chǎn)出成果

 

課時 創(chuàng)意編程中的滿天繁星叫“質(zhì)點(diǎn)”

 

課程內(nèi)容:分類的格式和寫法

學(xué)習(xí)成果:生長的星云

 

課時 長代碼的精簡和整理

 

課程內(nèi)容:標(biāo)簽頁的調(diào)用、控制桿的范例

學(xué)習(xí)成果:多種星云變化

課程產(chǎn)出成果

 

課時 翻譯processingp5.js

 

課程內(nèi)容:翻譯網(wǎng)站,如何修改細(xì)節(jié),書寫格式修改

學(xué)習(xí)成果:基于processing修改的作品

 

課時 8 ml5機(jī)器學(xué)習(xí)的初窺

 

課程內(nèi)容:圖像識別、人體捕捉、機(jī)器訓(xùn)練、風(fēng)格轉(zhuǎn)化

學(xué)習(xí)成果:利用ml5的創(chuàng)意設(shè)計(jì)作品

課程產(chǎn)出成果

 

課時 學(xué)會如何自學(xué)ml5機(jī)器學(xué)習(xí)

 

課程內(nèi)容:ml5網(wǎng)站介紹、TensorFlow網(wǎng)站介紹

學(xué)習(xí)成果:利用ml5的創(chuàng)意設(shè)計(jì)作品2

課程產(chǎn)出成果


課時 10 舉一反三

 

課程內(nèi)容:邏輯整理、尋找范例、試錯修改;與arduino交互的延伸應(yīng)用

學(xué)習(xí)成果:自主設(shè)計(jì)作品

 

 收費(fèi)情況:6000元 

 

ACG內(nèi)部學(xué)員咨詢督導(dǎ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)行批改

 

 課程報名 

 .jpg 

掃描上方二維碼,咨詢報名吧!

返回資訊列表

在線提問導(dǎo)師

Ms Zhang

佐治亞理工學(xué)院 · 交互設(shè)計(jì)

咨詢

熱門搜索

  • 美國留學(xué)
  • 英國留學(xué)
  • 純藝
  • 日本留學(xué)
  • 服裝設(shè)計(jì)
  • 倫敦藝術(shù)大學(xué)
  • 動畫
  • 皇家藝術(shù)學(xué)院
  • 帕森斯
  • 羅德島
藝術(shù)留學(xué)評估

申請專業(yè):