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工程后，便會生成以下的代碼：

p5.js程序總是從setup()開始執行，執行過一次setup()后，便進入draw()函數的不斷循環調用。

可以發現，語法和JavaScript并沒有什么太大的不同，只是多了很多特殊的函數以供調用罷了。

四、繪制基本圖形

在p5.js中，繪制圖形是件很容易的事情，有很多相關函數：

效果如下圖所示：

當然，線條色和填充色都是可以替換的，也可以修改線條粗細：

效果如下圖所示：

五、查閱Reference

p5.js提供了許多函數用來進行創作，并且許多函數都有多種重載函數，這里不一一講解。

p5.js官網提供了Reference，對每一種函數都進行了詳細的解釋，可以通過查閱這些函數的用法來進一步學習p5.js，網址如下：

https://p5js.org/reference/

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

在vue組件中使用axios的方法

axios post提交formdata的實例

vue-router相關基礎知識及工作原理

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com