網頁與互動藝術相關的程式，包含p5.js, socket.io, vue.js. 等等，整理在【老闆 來點寇汀吧】Youtube頻道上的直播，將創作的過程完全不藏私公開！
最新文章
外星圖像渲染語言？如何應用 Shader 跟 WebGL 達成絢麗視覺效果
想要在網頁中快速渲染出驚人的 3D 視覺效果和互動嗎？本篇文章老闆帶你快速入門了解 Shader、分享實作在專案中的經驗，就讓我們開始玩玩看 Shader 吧！
- 2022 / 07 / 07
【互動網頁程式教學】活用GUI Object與繼承概念，完成Canvas物件導向的滑鼠拖曳互動
利用GUI Object的概念，快速畫出多個物件，利用canvas物件導向概念加上事件偵測，讓滑鼠位置與物件互動，達成亮度的提示以及拖曳物件。
- 2022 / 06 / 16
五月社群聚（下）：張文瀚教你用數學作畫 GLSL fragment shader
第二次的 Creative Coding 社群聚，我們邀請到了聲音藝術家吳秉聖，以及 Team9 技術長、黑洞創造前端工程師及國立清華大學藝術學院的兼任教師張文瀚，下集由張文瀚介紹如何用數學作畫：fragment shader 的入門與應用。
- 2022 / 06 / 02
【Vue.js入門】一小時學會 Vue.component，完成動態飯店房間清單
我們會從 Vue.js 基本概念開始講起，非常適合剛開始接觸 Vue 的朋友們，接著我們用 Vue component 實作一個動態的飯店編輯頁面，你會學到：Vue.js 基本概念、Vue.js 語法指令及深入操作 Vue.component。
- 2022 / 05 / 17
【p5.js創作教學】Sweet Trap 甜蜜陷阱
生成式藝術迷人的地方就在於它的程式邏輯、它的數學藝術呈現，有秩序卻又充滿了隨機。吳哲宇的＜甜蜜陷阱＞便是這樣有機的創作作品。此文帶大家一步步從 sin 波慢慢建構出目眩神迷的 p5.js 創作。
- 2022 / 04 / 25
【p5.js創作教學】Coral Carnival 珊瑚嘉年華
藝術創作的有趣之處在於它有無數可能與千萬種解讀，閱讀吳哲宇在創作＜珊瑚嘉年華＞這件作品時的逐步調整，以及一些大膽實驗的意外收穫，慢慢塑造成一件又一件的 p5.js 生成式藝術作品。
- 2022 / 04 / 07
【p5.js創作教學】鳥與電線桿
利用p5.js創作一點都不難！跟著老闆直播，利用簡單的random、class和參數概念，完成童趣的都市景觀《鳥與電線桿》。
- 2022 / 03 / 24
【互動網頁程式教學】用 GSAP 製作直播互動動態效果
本篇教學帶大家使用 vue.js, vue-cli, gsap 製作模擬 facebook 手機版的直播畫面，連結視訊鏡頭中使用者的畫面，並加上留言區塊以及可以點擊的表情符號等功能。跟著老闆一起，動態網頁製作好簡單。
- 2022 / 03 / 10
【合作推廣】 AWS帶你在雲端飛
相信大家對於亞馬遜都不陌生吧？就是當你看到海外的酷東西，對錢錢說聲抱歉我需要這個然後點開下單的那個網站，過幾天帶著微笑A到Z的包裹就會出現在你家門外，裡面裝著化成快樂形狀的錢錢。除此之外，你聽過亞馬遜的雲端系統Amazon Web Services (AWS) 嗎？
「下單我會，但你說的雲端系統是什麼呢？」
- 2021 / 12 / 14
【p5.js創作教學】Dreamy Bird 夢幻鳥
本篇記錄創作＜夢幻鳥＞這件作品的過程，利用p5.js在短短的時間內創作出繽紛多彩、眼睛跟著滑鼠游標轉的夢幻鳥，看著他不斷地動，好像趴著在看水族館裡的魚一樣，心情也會跟著雀躍起來唷！
- 2021 / 10 / 12
【p5.js創作教學】CreativeCoding 花火大會（直播筆記）
為響應日本的一群Creative Coder在Processing Community Day的社群串聯，扮起虛擬的花火大會，我們也來利用p5.js，結合粒子系統、漸變顏色甚至是聲控模組，一起在夜空中創作出絢麗的煙火吧！
- 2021 / 09 / 16
用D3.js製作視覺化的日常作息方塊圖（直播筆記）
D3.js工具可以把大筆的資料視覺化呈現於網頁上，本篇文章利用淺顯易懂的解說，一步步寫出如同Google日曆般的日常生活作息方塊圖。
- 2021 / 07 / 23
【p5.js創作教學】Quantum Unstable 量子不穩定 – 發光糾纏的量子系統
利用p5.js製作出變形的同心圓動態，沒有特別的創作點子時就隨意調整、利用不同的變數增加變化，終究會等到那個靈光一閃，增加許多畫龍點睛的細節，打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》
- 2021 / 07 / 19
用Vue.js做快速換色與整理的便利貼牆吧！（下）（直播筆記）
需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。下集將便利貼牆美化、功能變得更完善，更連結firebase即時資料庫，再多張便利貼也不怕。
- 2021 / 07 / 09
- HTML, Vue.js, 教學Tutorial, 進階
用Vue.js做快速換色與整理的便利貼牆吧！（上）（直播筆記）
需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。
- 2021 / 07 / 05
使用Vue.js建立一個sass色票卡視覺化網頁（直播筆記）
寫網頁的時候，單看sass變數的程式碼，會不知道色碼是不是合適的嗎？老闆帶你一小時就能利用Vue.js快速建立好視覺化色票卡小工具。文章會從一開始雛型的設計稿發想，一步步教你如何完成工具。
- 2021 / 06 / 25
【p5.js創作教學】Aqua Planet 水色星球 – 來製作發光碰撞的行星吧！（直播筆記）
利用p5.js程式一步步創作出會發光的水色星球粒子，並且增加弧形軌跡、連線、外圍刻度尺規等細節，讓整件作品完整且耐人尋味。
- 2021 / 06 / 21
【p5.js創作教學】來畫一個瘋狂的龍捲風吧！（直播筆記）
身為台灣人可能沒親眼看過龍捲風，但也大概它知道長甚麼樣子，威力又有多強大。今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片。
- 2021 / 06 / 04
用p5.js玩創作，讓小機器人動起來！哲宇的互動藝術體驗（直播筆記）
Creative Coding並沒有你想像中的複雜，本篇文章將循序漸進地帶領你用p5.js慢慢畫出會動的機器人，並使用時間參數及亂數大量複製，加上與滑鼠的互動，成為一幅可愛的互動藝術作品。再加碼收錄老闆於直播時的Q&A，邀請你一同進入互動藝術創作程式的世界。
- 2021 / 06 / 01
來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記）
上一篇中，老闆利用三角函數幫 DOM 做 CSS 的絕對定位，這次我們雖然也是使用三角函數，但是改使用 canvas 在網頁上繪圖，製作科幻效果的時鐘。
- 2021 / 05 / 14
- 2021 / 05 / 10
- 2021 / 05 / 05
- 2021 / 04 / 30
- 2021 / 04 / 26
- 2021 / 04 / 21
- 2021 / 04 / 16
- 2021 / 03 / 31
- 2021 / 01 / 25
- 2021 / 01 / 15
- 2021 / 01 / 15
- 2021 / 01 / 12
- 2021 / 01 / 06
- 2020 / 04 / 24
- 2020 / 03 / 28
- 2020 / 03 / 25
- 2020 / 03 / 06
- 2020 / 03 / 06