分類・教學Tutorial

基礎

p5 js互動藝術程式創作 – 初階應用實戰教學！（下篇）

老闆在第一屆「Processing 臺灣國際社群日」活動中，受邀為設計工作坊擔任講師，針對 p5.js互動藝術程式創作入門的主題進行為期兩天的分享。分別為第一天的基礎練習與第二天的生程式藝術實作，本篇文章內容為第二天的實作練習，希望能讓同學能學習到以基礎的方式，將創意想像以自己的技術實現！

老闆在第一屆「Processing 臺灣國際社群日」活動中，受邀為設計工作坊擔任講師，針對 p5.js互動藝術程式創作入門的主題進行為期兩天的分享。分別為第一天的基礎練習與第二天的生程式藝術實作，本篇文章內容為第一天的基礎練習，希望能讓同學能學習到以基礎的方式，將創意想像以自己的技術實現！

「重複」，在藝術表現或日常中很常見的概念，在Creative Coding的領域內更是大量被使用的表現手法，跟大家分享如何在程式創作內加入「重複」概念及實作。

利用GUI Object的概念，快速畫出多個物件，利用canvas物件導向概念加上事件偵測，讓滑鼠位置與物件互動，達成亮度的提示以及拖曳物件。

第二次的 Creative Coding 社群聚，我們邀請到了聲音藝術家吳秉聖，以及 Team9 技術長、黑洞創造前端工程師及國立清華大學藝術學院的兼任教師張文瀚，下集由張文瀚介紹如何用數學作畫：fragment shader 的入門與應用。

我們會從 Vue.js 基本概念開始講起，非常適合剛開始接觸 Vue 的朋友們，接著我們用 Vue component 實作一個動態的飯店編輯頁面，你會學到：Vue.js 基本概念、Vue.js 語法指令及深入操作 Vue.component。

利用p5.js創作一點都不難！跟著老闆直播，利用簡單的random、class和參數概念，完成童趣的都市景觀《鳥與電線桿》。

本篇教學帶大家使用 vue.js, vue-cli, gsap 製作模擬 facebook 手機版的直播畫面，連結視訊鏡頭中使用者的畫面，並加上留言區塊以及可以點擊的表情符號等功能。跟著老闆一起，動態網頁製作好簡單。

本次創作直播內容透過 Canvas 物件，將網頁當作畫布，繪製不同的圖形，完成模擬偵測敵人的雷達機介面；運用三角函數概念，以及模組化程式，簡單製作出動態的網頁，詳細的步驟解釋，無論有沒有基礎，都能輕鬆跟著說明完成，剩下的就由你自行發揮囉！

你多久沒鍛鍊英文了呢？這次直播使用HTML(Pug)CSS(Sass)以及Javascript(Vue.js)來完成一個練習2000字英文單字的小互動遊戲網頁，難度適中，尤其適合剛開始學習Vue.js的新手，無論是跟著步驟逐步操作，或是聽老闆的影片都能快速完成。