p5.js入門教程和基本形狀繪制
一、什么是p5.js
最近接觸了一門數(shù)字媒體藝術(shù)類的課程,名為Interactivity,教的是p5.js。
主講老師就是開發(fā)者之一……還是挺激動的。
p5.js是一個為藝術(shù)家、設計師而開發(fā)的Javascript庫,可以看作是Processing的Web版本。如果有Processing學習經(jīng)驗的話,p5.js上手會非常快。
至于p5.js有什么用,這個問題很難回答,因為我本身也是個初學者。
我目前覺得p5.js是一個很好的激發(fā)創(chuàng)意的工具,并且你可以將p5.js的內(nèi)容嵌入網(wǎng)頁,讓你的網(wǎng)站更炫。
二、使用p5.js
p5.js擁有在線的代碼編輯器,網(wǎng)址如下:
左邊輸入代碼,點擊運行按鈕,就可以在右邊看到代碼運行效果。
你可以注冊一個p5.js帳號,每次你的代碼都可以保存在官方網(wǎng)站,無論是修改、測試或展示都十分方便。
下圖是用ellipse()函數(shù)畫了一個圓:
三、上手p5.js
當你新建了一個p5.js工程后,便會生成以下的代碼:
function setup() { //setup函數(shù),每次程序開始運行時執(zhí)行一次,用于初始化。 createCanvas(400, 400);//生成一個400x400的畫布 } function draw() { //draw函數(shù),每秒運行60次,不斷地在畫布上繪制圖形 background(220);//繪制背景,顏色為RGB(220,220,220) }
p5.js程序總是從setup()開始執(zhí)行,執(zhí)行過一次setup()后,便進入draw()函數(shù)的不斷循環(huán)調(diào)用。
可以發(fā)現(xiàn),語法和JavaScript并沒有什么太大的不同,只是多了很多特殊的函數(shù)以供調(diào)用罷了。
四、繪制基本圖形
在p5.js中,繪制圖形是件很容易的事情,有很多相關函數(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)起點至終點 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提供了許多函數(shù)用來進行創(chuàng)作,并且許多函數(shù)都有多種重載函數(shù),這里不一一講解。
p5.js官網(wǎng)提供了Reference,對每一種函數(shù)都進行了詳細的解釋,可以通過查閱這些函數(shù)的用法來進一步學習p5.js,網(wǎng)址如下:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
element?ui?-?el-button?重新渲染后disabled屬性失效問題解決
這篇文章主要介紹了elementui el-button重新渲染后disabled屬性失效問題解決,解決方法也很簡單,給el-button元素添加key值就可以了,需要的朋友可以參考下2023-07-07JavaScript錯誤處理之分析 Uncaught(in promise) error的
在開發(fā)過程中,JavaScript的錯誤處理是一個老生常談的話題,當應用程序發(fā)生未捕獲的異常時,Uncaught(in promise) error是其中最常見的錯誤類型,這篇文章將從多個方面詳細闡述這種錯誤類型的原因與解決方案,感興趣的朋友一起看看吧2023-12-12js實現(xiàn)input框文字動態(tài)變換顯示效果
這篇文章主要介紹了js實現(xiàn)input框文字動態(tài)變換顯示效果,涉及javascript隨機字符串與中文的動態(tài)切換顯示效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08javascript 密碼框防止用戶粘貼和復制的實現(xiàn)代碼
本篇文章主要是對javascript 密碼框防止用戶粘貼和復制的實現(xiàn)代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02