系列文章
[Day 21] p5.js 創作應用(九) –– 貝茲曲線隨機動畫
前言 p5.js 基礎教學(九) –– 貝茲曲線 講完了貝茲曲線的原理以及函數使用方法，感受到了數個控制點就能定義曲線的神奇機制。 接下來我們試著利用移動的控制...
[Day 22] glsl 基礎教學(一) –– glsl 和 p5.js 的差異
前言 p5.js 的世界非常有趣，我們還有很多 基礎的語法 能豐富我們的作品，但這就留待讀者們自行探索了。 那接下來我們要講什麼呢？我們要開始提升一個層級，介紹...
[Day 23] glsl 基礎教學(二) –– 著色器原理(一)
上一個單元 glsl 基礎教學(一) –– glsl 和 p5.js 的差異 講到了新的程式語言 glsl，可以用來製作更精細的視覺效果，也稍微比較了它和 p5...
[Day 24] glsl 基礎教學(三) –– 著色器原理(二)
今天繼續講解關於 glsl 的基礎語法。 範例程式 mySketch.js let rectShader; function preload()...
[Day 25] glsl 基礎教學(四) –– 繪製線條
本篇開始講解一些使用在片段著色器的繪圖技巧，第一步就是學會如何繪製基本的函數曲線，經過本單元的講解，我們可以學會如何繪製以下的圖案： 程式基礎模板 因為是著重...
[Day 26] glsl 基礎教學(五) –– 繪製發光線條和物體
前一篇 glsl 基礎教學(四) –– 繪製線條 示範了如何畫出函數曲線、座標格線和圓形，但光是這樣，並沒有完全發揮到 glsl 在顏色呈現上的優勢。 本單元會...
[Day 27] p5.js 實戰演練(十) –– 行星環繞動畫(一)
今天我們要用前一個單元 glsl 基礎教學(五) –– 繪製發光線條和物體 介紹的發光效果繪圖技巧，製作一個類似太陽系的行星環繞動畫，最終成品看起來像這樣：...
[Day 28] p5.js 實戰演練(十一) –– 行星環繞動畫(二)
接續上一個單元的實作，我們接下來繼續講解如何渲染出行星的行走軌跡。 目前程式架構 先貼上目前已完成的程式內容： mySketch.js class Pl...
[Day 29] glsl 基礎教學(六) –– random 函數
今天要講解的是運用在 glsl 上的隨機化技巧，也就是 random 的相關功能。 但是 glsl 並不像 p5.js 有提供內建的 random 函數，我們只...
[Day 30] p5.js 實戰演練(十二) –– noise 函數與馬賽克動畫
前言 在本系列教學的最後一篇，我們來探索如何用前一篇 glsl 基礎教學(六) –– random 函數 所講解的隨機化技巧，來實作 noise 函數的效果。...