首頁 > 文章 > web前端 > p5.js入門教學與基本形狀繪製

p5.js入門教學與基本形狀繪製

亚连原創: 2018-05-30 10:09:473024瀏覽

本篇文章主要介紹了p5.js入門教學之簡介和基本形狀繪製，現在分享給大家，也給大家做個參考。

一、什麼是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); 
}

效果如下圖：