意見:
CSDN太難用了,審覈太難受,發表了看不了,不方便文章預覽修改格式。
QQ空間待審覈的話自己還是可以看的,求改進!
一、什麼是p5.js
最近接觸了一門數字媒體藝術類的課程,名爲Interactivity,教的是p5.js。
主講老師就是開發者之一……還是挺激動的。
p5.js是一個爲藝術家、設計師而開發的Javascript庫,可以看作是Processing的Web版本。如果有Processing學習經驗的話,p5.js上手會非常快。
至於p5.js有什麼用,這個問題很難回答,因爲我本身也是個初學者。
我目前覺得p5.js是一個很好的激發創意的工具,並且你可以將p5.js的內容嵌入網頁,讓你的網站更炫。
二、使用p5.js
p5.js擁有在線的代碼編輯器,網址如下:
http://alpha.editor.p5js.org/
左邊輸入代碼,點擊運行按鈕,就可以在右邊看到代碼運行效果。
你可以註冊一個p5.js帳號,每次你的代碼都可以保存在官方網站,無論是修改、測試或展示都十分方便。
下圖是用ellipse()函數畫了一個圓:
三、上手p5.js
當你新建了一個p5.js工程後,便會生成以下的代碼:
function setup() { //setup函數,每次程序開始運行時執行一次,用於初始化。
createCanvas(400, 400);//生成一個400x400的畫布
}
function draw() { //draw函數,每秒運行60次,不斷地在畫布上繪製圖形
background(220);//繪製背景,顏色爲RGB(220,220,220)
}
p5.js程序總是從setup()開始執行,執行過一次setup()後,便進入draw()函數的不斷循環調用。
可以發現,語法和JavaScript並沒有什麼太大的不同,只是多了很多特殊的函數以供調用罷了。
四、繪製基本圖形
在p5.js中,繪製圖形是件很容易的事情,有很多相關函數:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(100,100,100,100);//繪製橢圓(x,y,寬,高)
triangle(150,150,150,200,200,200);//繪製三角形(x1,y1,x2,y2,x3,y3)
quad(180,100,200,150,270,150,250,100);//繪製四邊形(x1,y1,x2,y2,x3,y3,x4,y4)
rect(30, 20, 50, 50);//繪製矩形(x,y,寬,高)
line(0,0,100,100);//繪製線段(x1,y1,x2,y2)起點至終點
arc(200, 50, 50, 50, 0, HALF_PI);//繪製弧(x,y,寬,高,起始角度,終止角度)
}
效果如下圖所示:
當然,線條色和填充色都是可以替換的,也可以修改線條粗細:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
stroke(255,128,128);
strokeWeight(5);
fill(255,200,0);
ellipse(100,100,100,100);
triangle(150,150,150,200,200,200);
noStroke();
fill(100,255,0);
quad(180,100,200,150,270,150,250,100);
rect(30, 20, 50, 50);
stroke(0);
line(0,0,100,100);
arc(200, 50, 50, 50, 0, HALF_PI);
}
效果如下圖所示:
五、查閱Reference
p5.js提供了許多函數用來進行創作,並且許多函數都有多種重載函數,這裏不一一講解。
p5.js官網提供了Reference,對每一種函數都進行了詳細的解釋,可以通過查閱這些函數的用法來進一步學習p5.js,網址如下:
https://p5js.org/reference/