JavaScript是互聯網的語言。在沒有它的情況下進行前端開發是不可能的。對於初學者，尤其是小孩來說，要習慣這種語言的語法是很有挑戰性的。

要完成新手，即使在瀏覽器中安裝和運行本地服務器也可能是一個絆腳石。如果有一種方法可以讓JavaScript變得酷，而不安裝任何東西呢？輸入p5.js，一個設計有創造力的編碼庫。

下面介紹如何使用一些簡單的編碼原理**一個聲音反應式動畫機器人頭部。

什麼是p5.js公司(p5.js)？

這個p5.js庫是由洛杉磯的藝術家勞倫·麥卡錫創建的。它的目的是提供一個類似的處理平臺，用於創造性的表達和藝術。清晰的工具與解釋良好的教程和參考文檔一起使用，使其非常適合初學者。

無論你是**動畫、音樂、簡單的遊戲，甚至連接到外部硬件，p5.js都能幫上忙。

p5.js編輯器

首先，打開瀏覽器窗口並導航到p5.js web編輯器。在開始之前，有兩個可選步驟。

1你必須登錄p5.js來保存你的草圖，所以建立一個帳戶是明智的。註冊是免費的，如果您願意，您可以使用您的Google或GitHub帳戶登錄。

2單擊右上角的設置齒輪。在這裡，你可以改變主題和文本大小為你們所有的黑暗主題愛好者在那裡。

js編輯器將代碼編輯器、控制檯和輸出窗口組合在同一空間中。到目前為止，已經為您設置了兩個函數。

p5.js基礎知識

每個p5.js草圖都從兩個元素開始。setup（）函數和draw（）函數。對於你們這些曾經編程過Arduino的人來說，這將是熟悉的！

function setup() { createCanvas(500, 500);}

setup（）函數在程序開始時運行。在本例中，安裝程序將創建一個400像素的正方形畫布。把這個改成（500500）以獲得更大的工作區域。

安裝程序只運行一次，用於創建程序所需的部件以及程序的初始值。

function draw() { background(220);}

每幀調用draw（）方法。這很像Arduino上的循環函數，或者Unity3D中的更新函數。目前，每一幀背景都會被重新繪製。在頂部你會看到兩個圖標，播放和停止。單擊播放。

這是到目前為止的程序——一塊500x500的灰色背景畫布，

創建形狀

使用p5.js中的形狀與使用的預設形狀對象有點不同mo.js公司網絡動畫教程。要創建一個簡單的橢圓，請將其添加到draw（）方法中的代碼中，就在設置背景色的下面。

function draw() { background(220); ellipse(250,250,50)}

橢圓（）方法接受多個參數。前兩個是畫布上的X和Y位置。由於畫布寬度為500像素，因此將這兩個值設置為250會將橢圓置於中心。第三個參數是圓的寬度——在本例中是50像素。

所以你有一個背景和一個圓圈，但看起來不太好。是時候解決了。

添加一些樣式

從改變背景色開始。括號中的數字表示灰度值。所以，0是黑色，255是白色，中間有不同的灰色。若要使背景為黑色，請將此值更改為0。

function draw() { background(0); ellipse(250,250,50);}

現在，當你點擊播放時，背景將是黑色的。為了給圓一些顏色，我們需要分別影響它的RGB（紅、綠和藍）值。在腳本的頂部創建一些變量（就在setup函數開始之前）來存儲這些值。

var r, g, b;

在setup函數中，將r的值設置為255，並將其他值設置為0。它的組合RGB顏色將是鮮紅色！

r=255;g=0;b=0;

要將顏色應用於圓，請在繪製圓之前，向draw方法添加fill（）調用。

fill(r,g,b); ellipse(250,250,50);

現在單擊播放，您將看到黑色背景上的紅色圓圈。

做一個圓是一個很好的開始，但增加交互性才是真正有趣的地方！

單擊以更改顏色

在p5.js中，添加鼠標點擊運行的代碼非常簡單。在draw（）方法下面創建一個新函數。

function mousePressed() { r = random(256); g = random(256); b = random(256);}

mousePressed（）偵聽任何鼠標按下並執行括號內的代碼。函數的作用是：返回一個介於0和給定數字之間的隨機值。在本例中，您將在每次鼠標按下時將r、g和b值設置為0到255之間。

重新運行代碼，然後單擊鼠標幾次。當你這樣做的時候，圓圈應該改變顏色。

現在你的動畫是對鼠標點擊的反應，但是如何使用用戶的聲音呢？

設置語音控制

使用系統麥克風可以輕鬆地使用p5.js聲音庫。在腳本的頂部，創建一個新的變量mic。

var r, g, b;var mic;

將這些行添加到setup（）函數以將麥克風分配給音頻輸入。

mic = new p5.AudioIn()mic.start();

單擊“立即播放”時，將出現一個對話框，要求您允許訪問板載麥克風。

單擊“允許”。根據您使用的瀏覽器，它可能會記住您的選擇，或者您可能需要單擊一個框來確認。現在麥克風已經安裝好了，該投入使用了。

按體積縮放

要將麥克風的音量用作程序中的值，需要將其存儲為變量。將draw（）方法更改為如下所示：

function draw() { var micLevel = mic.getLevel(); background(0); fill(r,g,b); ellipse(250,250,50 + micLevel * 2000); }

在函數開始時，將創建一個名為micLevel的新變量，並將其指定給當前麥克風振幅。

橢圓有50個像素的固定寬度。現在50像素是最小寬度，加上每幀更新的micLevel值。micLevel與之相乘的數字將因麥克風的靈敏度而異。

嘗試更高的值——5000的值將在尺度上產生更劇烈的變化！

注意：如果這對您不起作用，您的麥克風可能設置不正確。瀏覽器使用系統默認麥克風，您可能需要修改聲音設置並刷新。

構建機器人

現在您已經擁有了創建機器人所需的所有工具。首先，移動你創建的橢圓，再添加一個橢圓來**眼睛。

ellipse(150,150,50 + micLevel * 2000); ellipse(350,150,100 +micLevel * 2000);

“牙齒”是從屏幕底部延伸出來的一系列矩形。請注意，rect（）方法的固定寬度需要一個額外的參數。

rect(0, 500,100, -100 -micLevel * 5000); rect(400, 500,100, -100 -micLevel * 5000); rect(100, 500,100, -100 -micLevel * 3000); rect(300, 500,100, -100 -micLevel * 3000); rect(200, 500,100, -100 -micLevel * 1000);

這一次，你只想改變牙齒的高度，而要給“微笑”的效果，它們必須有不同的敏感度。最小高度是-100（因為它是從畫布底部升起的），所以micLevel也必須是負數。

點擊播放，你會看到一個幾乎完成的機器人臉！

再一次，您可能需要調整乘數以獲得最佳結果。

添加收尾處理

使用更多的eliple（）調用為眼睛添加瞳孔。使用另一個fill（）使其變白。將其添加到draw（）方法中，位於剛剛創建的“齒”下方。

fill(255);ellipse(150,150,20 + micLevel * 1000);ellipse(345,150,30 + micLevel * 1000);

最後，為了給整個片段一點定義，在setup（）函數中更改筆劃權重

strokeWeight(5);

就這樣！

如果有什麼不起作用，請徹底檢查代碼，如果需要，您可以在p5編輯器中看到本教程中的完整代碼。

繼續使用p5.js

這個初學者教程介紹了p5.js的一些基本概念，展示了創作是多麼容易。和往常一樣，這個項目幾乎沒有觸及p5.js的全部功能。

花時間用p5.js創建藝術是值得的，因為你已經熟悉了程序員的思維方式和JavaScript語法。如果你決定全身心投入並真正學習JavaScript，那麼這些都是需要提高的重要技能！