教學 - Creative Coding TW - 互動程式創作台灣站

【Canvas創作教學】畫個偵測敵人的動態雷達圖網頁2021 年 9 月 23 日
本次創作直播內容透過 Canvas 物件，將網頁當作畫布，繪製不同的圖形，完成模擬偵測敵人的雷達機介面；運用三角函數概念，以及模組化程式，簡單製作出動態的網頁，詳細的步驟解釋，無論有沒有基礎，都能輕鬆跟著說明完成，剩下的就由你自行發揮囉！
【p5.js創作教學】CreativeCoding 花火大會（直播筆記）2021 年 9 月 16 日
為響應日本的一群Creative Coder在Processing Community Day的社群串聯，扮起虛擬的花火大會，我們也來利用p5.js，結合粒子系統、漸變顏色甚至是聲控模組，一起在夜空中創作出絢麗的煙火吧！
Vue.js入門：英文2000字互動遊戲網頁2021 年 8 月 26 日
你多久沒鍛鍊英文了呢？這次直播使用HTML(Pug)CSS(Sass)以及Javascript(Vue.js)來完成一個練習2000字英文單字的小互動遊戲網頁，難度適中，尤其適合剛開始學習Vue.js的新手，無論是跟著步驟逐步操作，或是聽老闆的影片都能快速完成。
Vue.js入門：製作iOS風格的動態月曆與待辦清單網頁2021 年 8 月 16 日
手機裡的動態月曆．只消一指就可以增加或是刪除行程，有想過要怎麼在網頁上實現嗎？老闆利用簡單的動態網頁範例和步驟解說，帶你一步步踏進Vue.js的世界。
Vue.js入門：完成懷舊的井字圈叉遊戲動態網頁2021 年 8 月 10 日
小時候都玩過圈圈叉叉的遊戲，隨手畫個井字就可以與玩伴鬥智，這次我們要利用Pug、Sass及Vue.js製作出這款動態小遊戲網頁啦！
利用Pug(HTML)、Sass(CSS)及Vue.js製作動態時間軸年表（直播筆記）2021 年 8 月 4 日
不論個人或是品牌，都需要讓網站造訪者快速暸解你的歷史發展，時間軸年表是一個常見且好用的表示方法。利用Pug(HTML)、Sass(CSS)及Vue.js製作出一個屬於你的動態時間軸年表吧！
用D3.js製作視覺化的日常作息方塊圖（直播筆記）2021 年 7 月 23 日
D3.js工具可以把大筆的資料視覺化呈現於網頁上，本篇文章利用淺顯易懂的解說，一步步寫出如同Google日曆般的日常生活作息方塊圖。
【p5.js創作教學】Quantum Unstable 量子不穩定 – 發光糾纏的量子系統2021 年 7 月 19 日
利用p5.js製作出變形的同心圓動態，沒有特別的創作點子時就隨意調整、利用不同的變數增加變化，終究會等到那個靈光一閃，增加許多畫龍點睛的細節，打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》
用Vue.js做快速換色與整理的便利貼牆吧！（下）（直播筆記）2021 年 7 月 9 日
需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。下集將便利貼牆美化、功能變得更完善，更連結firebase即時資料庫，再多張便利貼也不怕。
用Vue.js做快速換色與整理的便利貼牆吧！（上）（直播筆記）2021 年 7 月 5 日
需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。
使用Vue.js建立一個sass色票卡視覺化網頁（直播筆記）2021 年 6 月 25 日
寫網頁的時候，單看sass變數的程式碼，會不知道色碼是不是合適的嗎？老闆帶你一小時就能利用Vue.js快速建立好視覺化色票卡小工具。文章會從一開始雛型的設計稿發想，一步步教你如何完成工具。
【p5.js創作教學】Aqua Planet 水色星球 – 來製作發光碰撞的行星吧！（直播筆記）2021 年 6 月 21 日
利用p5.js程式一步步創作出會發光的水色星球粒子，並且增加弧形軌跡、連線、外圍刻度尺規等細節，讓整件作品完整且耐人尋味。
【p5.js創作教學】來畫一個瘋狂的龍捲風吧！（直播筆記）2021 年 6 月 4 日
身為台灣人可能沒親眼看過龍捲風，但也大概它知道長甚麼樣子，威力又有多強大。今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片。
用p5.js玩創作，讓小機器人動起來！哲宇的互動藝術體驗（直播筆記）2021 年 6 月 1 日
Creative Coding並沒有你想像中的複雜，本篇文章將循序漸進地帶領你用p5.js慢慢畫出會動的機器人，並使用時間參數及亂數大量複製，加上與滑鼠的互動，成為一幅可愛的互動藝術作品。再加碼收錄老闆於直播時的Q&A，邀請你一同進入互動藝術創作程式的世界。
來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記）2021 年 5 月 14 日
上一篇中，老闆利用三角函數幫 DOM 做 CSS 的絕對定位，這次我們雖然也是使用三角函數，但是改使用 canvas 在網頁上繪圖，製作科幻效果的時鐘。
來用可怕的三角函數做網頁吧! – Part 1 衛星繞月球（直播筆記）2021 年 5 月 10 日
在這篇文章中，會先詳細介紹三角函數的計算並轉換為程式語言，再以三角函數的概念，使用 html (pug), css (sass) 與 js ，從零建構出衛星環繞月球的動態網頁效果。本文翻自[週四寫程…
跟貓借一隻手：召喚效率小幫手－變數（互動藝術創作分享教學）2021 年 5 月 5 日
在前一篇文章中，我們透過逐一設定每顆氣球的大小、高度，成功繪製了天外奇蹟的電影海報，但如果今天要畫二十顆、甚至是上百顆氣球呢？如果一樣需要一顆一顆地設定給和值，那應該會做到天荒地老。日文中有一句俗語「…
JS及網頁的模板好夥伴：Canvas sketch入門2021 年 4 月 30 日
哈嚕，我是陳柏文，目前在陽明交通大學人工智慧辦公室擔任全端(主要是前端)，語音及影像辨識工程師，因為興趣使然，正努力學習一些新知，所以目前也在墨雨設計擔任小小前端實習生。 Canvas sketch …
讓我們來快速寫個漂浮感的輪播吧！動態網頁程式教學（直播筆記）2021 年 4 月 26 日
相信大家對於輪播一定不陌生吧，在各大官網、購物網站的重點區域常常可以看到輪播的蹤跡。除了增加與使用者的互動性以外，對於尺寸日漸縮小的行動裝置來說，輪播很重要的一點是可以在有限版面中增加傳遞的資訊量。今…
圖形繪製與色彩：從點線面開始的世界（互動藝術創作分享教學）2021 年 4 月 21 日
如果你跟我（Ju編）一樣是Creative Coding這個領域的菜逼八，可能本身從網頁設計起家、或是從視覺設計半路轉行、甚至只是不小心點到這個網站，對概念還有些模糊但有興趣想多留下來逛一下，那從這篇…
【p5.js創作教學】電波電路Wave Circuit – 來做個逼哩逼哩送訊號的電路吧！（直播筆記）2021 年 4 月 16 日
互動藝術程式教學簡介這次的直播要來製作具有逼哩逼哩效果的電路，當中可以分為三部分內容，分別為背景的格線、連接的線條以及細節上的裝飾，在創作過程中會各自去調整，有可能調整了線條後，再去修改背景，而後又…
基礎JS物件導向教學（直播筆記）2021 年 3 月 31 日
這篇文章老闆想跟大家分享物件導向，以及如何使用 js 結合物件導向概念包裝東西，創造並管理物件。本文翻自 0212 隨意寫程式直播 / 物件導向，若是對文章內容有疑問，或是想要跟著影片一起做，都可以…
【p5.js 創作教學】色散海葵（直播筆記）2021 年 1 月 25 日
這次的直播內容主要有四個部分：透過繪製扭動的線條來呈現海葵觸鬚的樣子 (步驟一~步驟四) 加上滑鼠的互動以及視覺上的裝飾，包含了顏色以及材質，還有在外層加框框，形成了類似畫框的效果 (步驟五~步驟七…
來做SVG動畫讓蔥油餅翻滾吧! （下）：讓場景中的元件動起來（直播筆記）2021 年 1 月 15 日
本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。在上一篇中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出…
來做SVG動畫讓蔥油餅翻滾吧! （上）：發想素材、將素材引入網頁（直播筆記）2021 年 1 月 15 日
本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。今天老闆要以曾經接手的台北聲音地景計畫做為案例，跟大家分享從…
資料視覺化的動態長條圖製作（下）：Vue/ D3（直播筆記）2021 年 1 月 12 日
在上篇我們講解了如何使用jQuery製作網頁上常用的動態長條圖，在本篇文章中我們將實際操作另外兩種框架：Vue/ D3的製作方法。還沒看上一篇的快快補唷👉 資料視覺化的動態長條圖製作（上）：…
資料視覺化的動態長條圖製作（上）：jQuery（直播筆記）2021 年 1 月 6 日
資料視覺化是網頁上常用的媒材，在本篇文章中我們將實際操作在jQuery/ Vue/ D3這三種框架下如何繪製出好用的動態長條圖，同時分析各個框架的優勢與劣勢，讓我們繼續往下看吧！首先讓我們對長條圖有…
p5.js 快速上手：互動網頁教學2020 年 4 月 24 日
什麼是 p5.js? 當我們想要在網頁上繪圖，最常用的除了 CSS 之外，就是 HTML5 提供的 Canvas 了，Canvas 的 API 接口讓我們可以實現有效率、高靈活性在網頁上繪圖的夢想，C…
讓我們來做個互動天氣地圖吧！（直播筆記）2020 年 3 月 28 日
這次的直播要做一個互動地圖，當滑鼠滑過的時候顯示當地天氣資訊！這次的直播內容主要有幾個部分：取得地圖的 svg 的檔案，並修改成我們可以用的檔案類型。取得台灣的地圖資料，包含行政區域名稱與代號，…
用 Socket.io 做一個即時聊天室吧！（直播筆記）2020 年 3 月 25 日
這次的筆記是跟著這部影片來完成的，想要一邊看到會動的老闆請走這邊：什麼是 Socket.io？ socket.io 是一個可以讓應用程式建立即時通訊的 JavaScript 函式庫，透過在 Serv…
老闆的網頁實驗室#2－實作 Canvas 遮罩動畫2020 年 3 月 6 日
案例解析 Louis Ansa — Portfolio 這次要分析的是在法國的設計師 Louis Ansa 的作品集網頁，在 Louis Ansa 的網頁中開始的載入與關於頁面都有出現的遮罩效果，讓老…
老闆的網頁實驗室 #1 — 實作CSS拆字動畫2020 年 3 月 6 日
案例解析 https://rogue.studio/ 這次的老闆網頁實驗室，要來分析一個國外的工作室網站，在這個網站中，有標題一個一個字跑入的效果，這樣的效果怎麼達到的呢？其實這樣的效果並不複雜，程式…