互動藝術程式創作入門

Creative

Coding

揭開多媒體互動設計的面紗,

成為兼具技術與創意的數位創作者。

Frame
draw = () => { blendMode(BLEND) fill(0,0,0) rect(0,0,canvasWidth,canvasHeight) fill(255) noStroke() allBlocks.forEach(block=>{ drawingContext.shadowColor = color(0,50) drawingContext.shadowOffsetX = 2 drawingContext.shadowOffsetY = 2 let currentColor = color(block.color) fill(currentColor) beginShape() let getBody=(i,o)=>{ return block.bodies[o*block.size.w+i] } let dr = (body)=>{ currentColor.setRed( currentColor._getRed() +50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80)-0.5)) currentColor.setGreen( currentColor._getGreen() +50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80+5000)-0.5)) currentColor.setBlue( currentColor._getBlue() +50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80+10000)-0.5)) fill(currentColor) ellipse(body.position.x,body.position.y, noise(body.position.x/50,body.position.y/50)*20+40) } //drawing boundary for(var i=0;i<block.size.w;i++){ let body = getBody(i,0) vertex(body.position.x,body.position.y) dr(body) } for(var i=0;i<block.size.h;i++){ let body = getBody(block.size.w-1,i) vertex(body.position.x,body.position.y) dr(body) } for(var i=block.size.w-1;i>=0;i--){ let body = getBody(i,block.size.h-1) vertex(body.position.x,body.position.y) dr(body) } for(var i=block.size.h-1;i>=0;i--){ let body = getBody(0,i) vertex(body.position.x,body.position.y) dr(body) } drawingContext.shadowOffsetX = 0 drawingContext.shadowOffsetY = 0 currentColor.setAlpha(255) fill(block.color) endShape(CLOSE) let headSt = getBody(0,int(block.size.h/2+0.5)) let eyeSt = getBody(2,int(block.size.h/2+0.5)) let eyeEd = getBody(2,int(block.size.h/2-0.5)) let Mouth = getBody(3,int(block.size.h/2)) let eyeAngle = atan2(eyeSt.position.y-eyeEd.position.y, eyeSt.position.x-eyeEd.position.x) let drawEye=(x,y)=>{ fill(255) ellipse(x,y,25) fill(0) ellipse(x,y,15) fill(block.color) arc(x,y,32,32,0,PI) } push() translate(eyeSt.position.x,eyeSt.position.y) rotate(eyeAngle) scale(1,(frameCount+block.id*5)%80<10?0.1:1) drawEye(0,0) pop() push() translate(eyeEd.position.x,eyeEd.position.y) rotate(eyeAngle) scale(1,(frameCount+block.id*5)%80<10?0.1:1) drawEye(0,0) pop() push() stroke(0) strokeWeight(3) translate(headSt.position.x,headSt.position.y) rotate(eyeAngle) for(var i=0;i<5;i++){ translate(-10,0) line(0,-20,0,0) } pop() push() translate(Mouth.position.x,Mouth.position.y) rotate(eyeAngle) fill(255,160) ellipse(0,0,50,5) pop() }) push() imageMode(CENTER) translate(canvasWidth/2, canvasHeight/2) image(frameImg, 0, 0, canvasWidth/5 * frameImgRatio.x, canvasHeight/5 * frameImgRatio.y) pop() }

互動設計與

Creative

Coding

在互動設計的領域中,創造體驗的手法日新月異,設計、藝術、以及科技的跨域合作使得越來越多新奇有趣的「互動媒體」出現在我們生活周遭。近年來台灣的設計風氣逐漸蓬勃,許多展覽與活動嘗試結合軟體跟硬體,透過科技創造嶄新的體驗,用不同以往的互動方式傳達想法和故事,並在大眾心中留下更強烈的印象與共鳴。

Creative Coding 是將程式碼應用在互動設計和藝術創作中,用程式碼生成具有藝術感的圖形,透過程式語言串連不同的人事物和想像,於現實生活中創造更有趣的體驗。

這些都是 Creative Coding 的應用!

在實體空間創造不同以往的難忘體驗

在實體空間創造不同以往的難忘體驗
圖片來源:
隨機生成獨一無二的視覺圖像
圖片來源:
與硬體裝置搭配出虛實整合效果
圖片來源:

創造互動體驗的程式工具

P5.js 幫助你享受程式創作的樂趣

這是以 Processing 為基礎所延伸的程式框架,讓創作者能夠用簡單的語法,快速組裝複雜的程式,用更少的時間跟精力實踐想法。

由全世界的科技藝術家跟工程師共同建立的開源工具與共創社群,以這套函式庫為基礎入門藝術創作,透過我們豐富的學習資源瞭解亂數、視訊處理、即時模擬、物件互動等程式概念以後,會更容易理解其他複雜作品是如何實現,也更容易上手其他相關的創作軟體。

讓程式變成腦洞大開的創作好幫手

想要開始程式藝術創作,你只需要一顆對學習有熱情的心

不會繪圖或設計沒關係不會繪圖或設計沒關係我們會帶你運用簡單的規則,讓程式揮灑出絢麗的畫面。
沒有程式基礎也沒問題沒有程式基礎也沒問題課程會帶過基礎的 JavaScript ,搭配 p5.js 函式庫,讓你快速踏入創作世界。
不用擔心沒有創作靈感不用擔心沒有創作靈感這堂課會一步步拆解每個作品的創作細節,讓你用有趣的方式輕鬆實現意想不到的創意。
不需要額外下載任何軟體不需要額外下載任何軟體課程中會教你如何使用線上平台來做練習,並且可以快速分享創作。
不用非常會算數學不用非常會算數學繪製圖型只需要基礎的數理計算,就算真的碰到問題,也可以到我們的社群中找到同好交流討論。

我們準備了豐富的學習資源讓你來探索

Hahow 課程人數近三千位同學

超過 80 位同學留言皆給予 5 顆星的好評推薦

互動藝術程式創作入門

P5.js 快速上手

這邊要介紹的 p5.js 是由 Processing 延伸而成的 JavaScript 函式庫, Processing 是設計給沒有程式基礎的人快速進行創作的平台,而 p5.js 可以理解為 Processing 的 JavaScript 版本。它將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用,如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具!
什麼是 Creative Coding ?
講師:吳哲宇

講師介紹

Che-Yu Wu

吳哲宇

跨領域新媒體藝術家、設計師、工程師、講師與創業者。藉由理性電機工程背景與感性視覺設計的混合,從自然、物理、現代藝術、數學韻律、音樂中取材,創造複合生成式的演算作品,探索藝術與工程的邊界以及極致的互動體驗。專攻探索互動型NFT,近年致力於推廣程式藝術,於 Hahow 開設動態網頁與互動藝術程式創作課程,引領超過萬名同學進入互動設計的世界。

img-0
img-1
img-2
img-3
img-4
img-5
img-6
img-7
img-8
img-9
img-10
img-11
img-12
img-13
img-14
img-15
img-16
img-17
img-18
img-19
img-20
img-21
img-22
img-23
課程後你將有能力做出:

互動動態海報與視覺

生成式設計與繪圖機器

資料視覺化互動呈現

進階繪圖與疊色技巧應用

視訊及語音即時串流

概念性實驗工具製作

作品輸出應用到品牌網站

常見問答

Q1.

如果沒有程式基礎怎麼辦?

Q2.

課程中需要另外下載軟體嗎?

Q3.

上完這門課大概要花多久時間呢?

Q4.

學習時碰到問題怎麼辦?

Q5.

要去哪裡找到更多程式創作的資源和同好呢?

Q6.

沒有時間做課堂作業怎麼辦?

互動程式藝術交流社群聚會

社群參與

在 CCT 社群中有 Creative Coding 相關的各種資源,
我們也會每個月固定聚會、舉辦各種活動、分享創作與想法、討論技術、和其他人交流。

加入社團