一、什么是p5.js

最近接觸了一門數(shù)字媒體藝術(shù)類的課程，名為Interactivity，教的是p5.js。

主講老師就是開發(fā)者之一……還是挺激動(dòng)的。

p5.js是一個(gè)為藝術(shù)家、設(shè)計(jì)師而開發(fā)的Javascript庫(kù)，可以看作是Processing的Web版本。如果有Processing學(xué)習(xí)經(jīng)驗(yàn)的話，p5.js上手會(huì)非?？?。

至于p5.js有什么用，這個(gè)問(wèn)題很難回答，因?yàn)槲冶旧硪彩莻€(gè)初學(xué)者。

我目前覺(jué)得p5.js是一個(gè)很好的激發(fā)創(chuàng)意的工具，并且你可以將p5.js的內(nèi)容嵌入網(wǎng)頁(yè)，讓你的網(wǎng)站更炫。

二、使用p5.js

p5.js擁有在線的代碼編輯器，網(wǎng)址如下：

http://alpha.editor.p5js.org/

左邊輸入代碼，點(diǎn)擊運(yùn)行按鈕，就可以在右邊看到代碼運(yùn)行效果。

你可以注冊(cè)一個(gè)p5.js帳號(hào)，每次你的代碼都可以保存在官方網(wǎng)站，無(wú)論是修改、測(cè)試或展示都十分方便。

下圖是用ellipse()函數(shù)畫了一個(gè)圓：

三、上手p5.js

當(dāng)你新建了一個(gè)p5.js工程后，便會(huì)生成以下的代碼：

function setup() { //setup函數(shù)，每次程序開始運(yùn)行時(shí)執(zhí)行一次，用于初始化。 
 createCanvas(400, 400);//生成一個(gè)400x400的畫布 
}  
function draw() { //draw函數(shù)，每秒運(yùn)行60次，不斷地在畫布上繪制圖形 
 background(220);//繪制背景，顏色為RGB(220,220,220) 
} 

p5.js程序總是從setup()開始執(zhí)行，執(zhí)行過(guò)一次setup()后，便進(jìn)入draw()函數(shù)的不斷循環(huán)調(diào)用。

可以發(fā)現(xiàn)，語(yǔ)法和JavaScript并沒(méi)有什么太大的不同，只是多了很多特殊的函數(shù)以供調(diào)用罷了。

四、繪制基本圖形

在p5.js中，繪制圖形是件很容易的事情，有很多相關(guān)函數(shù)：

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)起點(diǎn)至終點(diǎn) 
  arc(200, 50, 50, 50, 0, HALF_PI);//繪制弧(x,y,寬,高,起始角度,終止角度) 
} 

效果如下圖所示：

當(dāng)然，線條色和填充色都是可以替換的，也可以修改線條粗細(xì)：

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提供了許多函數(shù)用來(lái)進(jìn)行創(chuàng)作，并且許多函數(shù)都有多種重載函數(shù)，這里不一一講解。

p5.js官網(wǎng)提供了Reference，對(duì)每一種函數(shù)都進(jìn)行了詳細(xì)的解釋，可以通過(guò)查閱這些函數(shù)的用法來(lái)進(jìn)一步學(xué)習(xí)p5.js，網(wǎng)址如下：

https://p5js.org/reference/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論