前言

Hi,大家好，我是從新手工程師CC，學習前端的時間約兩年，遇到了很多問題(坑?)也都慢慢找到方法解決，越來越有解bug經驗了。不過在演算法上面還是有點吃力，不但沒有受過正式訓練，也缺乏想像力，因緣際會和同事一起糾團買了P5.js線上課程，整個程式回饋感超濃厚的!希望大家也可以透過幾何圖形一起學程式~

主題與目標

本次鐵人賽會教大家一步一步使用p5.js，製作出隨機、獨一無二、具有動態效果的生成式藝術。30天的安排內容大部份會講到函式的使用方法，並針對2D為主，也會有幾天是實作演練，算是初級的課程

別擔心~我也是小菜菜一枚，大家可以放寬 心跟著我慢慢來就好了~~

規劃

• 在開始之前

• 生成式藝術介紹

• 介紹編碼工具P5.js 與線上開發平台 OpenProcessing 與 P5.js editor

• 基礎程式架構介紹

• 定位座標

• 畫個形狀吧，有沒有這麼簡單

• 上色處理，顏色模式介紹

• 上色處理[加開場]，那些顏色的物件函數

• 實作範例 - 製作第一個patten

• 實作範例 - 製作第一個patten - 2

• preload - 文字變化

• 建立多個畫布與事件處理

• 線段的操作與不規則形狀

• 體驗P5.js提供的幾種隨機模式

• 進階色彩設定 blendMode()

• 進階色彩設定 lerpColor()以及 filter

• p5.js 中的漸層 - 1

• p5.js 中的漸層 - 2

• 陰影效果與霓虹燈

• preload - 圖像引用與定位

• 實作範例 - 來個Netflix and Chill

• 遮罩的三種方法 - 1 - erase() noErase()

• 遮罩的三種方法 - 2 - mask()

• 遮罩的三種方法 - 3 - Canvas原生方法

• 圖像的像素拆解與組合利用(上) - 1

• 圖像的像素拆解與組合利用 - 2

• 向量與它的函數家族

• 利用class生成物件 - 1

• 利用class生成物件 - 2

• 鐵人完賽~

• ......

階段性成果

預計到第9天，各位就可以開始自由揮灑內心中的設計師之魂了

小結語

謝謝大家點近來閱讀第一篇，在網頁美化的路上一起努力吧~