本篇文章主要介紹了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); }
效果如下圖:
五、查閱Reference
p5.js提供了許多函數用來進行創作,並且許多函數都有多種重載函數,這裡不一一講解。
p5.js官網提供了Reference,對每一種函數都進行了詳細的解釋,可以透過查閱這些函數的用法來進一步學習p5.js,網址如下:
https ://p5js.org/reference/
上面是我整理給大家的,希望未來會對大家有幫助。
相關文章:
#以上是p5.js入門教學與基本形狀繪製的詳細內容。更多資訊請關注PHP中文網其他相關文章!