P5JS 相關教學資源

學號：BIT109105

姓名：李昕庭

1. p5.js 快速上手參考 https://creativecoding.in/2020/04/24/p5-js-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/
    * 重要說明：(1).介紹p5.js

(2).setup()與draw()畫布設定

(3).圖形繪製設定-ellipse()、rect()

(4).動態改變顏色與線條-stroke()、strokeWeight()

(5).if判斷式設定

(6).應用案例

2. 程式框架p5 js開發入門參考 https://hackmd.io/@laiyenju/creative-coding-1
    * 重要說明：(1).背景設定-background()

(2).滑鼠按下設定-改變顏色、軌跡變淡的速度

(3).製作立面方塊-box()

(4).在立體面放入圖樣-createGraphics()

(5).旋轉-rotateX()、rotateY()

(6).使用字體-載入字體檔loadFont()、調整字體的text()與textSize()、渲染字體texture()

3. 清除畫布參考 https://vimsky.com/zh-tw/examples/usage/p5-js-clear-function.html
    * 重要說明：clear()函數為清除畫布上的所有元素。

範例：function mousePressed() {

clear();

}

4.  Javascript 語法摘要參考 http://yhhuang1966.blogspot.com/2021/04/p5js-javascript.html
    * 重要說明：(1).基本語法-註解、識別字、基本型態、基本物件、全域屬性與方法、運算子、判斷、分支、迴圈、函式、物件、陣列

(2).輸出入函式： alert(str)、 document.write(str) 、 document.getElementByID(myID).innerHTML(str)、 console.log(str)、 prompt(msg [, default])、 confirm(msg) 、parseInt(s)、parseFloat(s)

(3).字串操作：toLowerCase()、toUpperCase()、charAt(index)、 charCodeAt(index)、fromCharCode(c)、 indexOf(str [, index])、 lastIndexOf(str)、 match(str)、search(str)、replace(str1, str2)、 split(str)、 substr(index,length)、substring(a, b)、 slice(a, b)、concat(str)

(4).陣列操作：push(e)、pop()、 shift()、unshift(e1, e2, ...)、 slice(a, b)、 splice(a, n)、join(str)、 toString()、sort([f])、 reverse([f])、indexOf(e)、 forEach(function(e){})

5. 跟貓借一隻手：召喚效率小幫手-變數(創作分享教學) https://creativecoding.in/2021/05/05/%e8%b7%9f%e8%b2%93%e5%80%9f%e4%b8%80%e9%9a%bb%e6%89%8b-%e5%8f%ac%e5%96%9a%e6%95%88%e7%8e%87%e5%b0%8f%e5%b9%ab%e6%89%8b-%e8%ae%8a%e6%95%b8-%e5%89%b5%e4%bd%9c%e5%88%86%e4%ba%ab%e6%95%99%e5%ad%b8/
    * 重要說明：利用p5.js繪製川野 源（Hiroshi Kawano）的作品的教學。

6. 圖形繪製與色彩：從點線面開始的世界： https://creativecoding.in/2021/04/21/%e5%9c%96%e5%bd%a2%e7%b9%aa%e8%a3%bd%e8%88%87%e8%89%b2%e5%bd%a9%ef%bc%9a%e5%be%9e%e9%bb%9e%e7%b7%9a%e9%9d%a2%e9%96%8b%e5%a7%8b%e7%9a%84%e4%b8%96%e7%95%8c%ef%bc%88%e5%89%b5%e4%bd%9c%e5%88%86%e4%ba%ab/
    * 重要說明：利用p5.js繪製天外奇蹟的互動式海報的教學。