processing.js vs p5.js-有什麼區別？-js教程-PHP中文網

>使藝術家，設計師，教育工作者和初學者都可以訪問編碼，並將其重新詮釋為當今的網絡

demos

分析

結論

>編寫您可能已經熟悉

我可以將processing.js或p5.js用於商業項目嗎？但是，最好檢查您在商業項目中使用的任何庫或工具的特定許可條款，以確保您處於合規性。我項目的JS？

processing.js和p5.js？

我可以將processing.js或p5.js與其他JavaScript庫或框架一起使用？

首頁

web前端

js教程

processing.js vs p5.js-有什麼區別？

Lisa Kudrow

Feb 21, 2025 am 08:57 AM

processing.js vs p5.js-有什麼區別？

幾天前，P5.JS被釋放到野外。這是一個遵循處理學說的視覺編程的JavaScript庫。根據這篇文章的

處理是一種環境/編程語言，旨在使視覺，交互式應用程序非常易於編寫。它可以用於從教孩子如何編碼到可視化科學數據的所有事物。 >

這是這樣的語言，部分落後於這樣的巫術：

>

和此：

，當然，您可以在這裡找到的所有東西。

但是，如果我們之前有processing.js，那是什麼p5.js？鑰匙要點

p5.js是處理語言的直接JavaScript端口，旨在使藝術家，設計師，教育工作者和初學者可以訪問編碼，而processing.js是一個轉換器，將純處理代碼解釋為即時的JavaScript 。

p5.js可以使用添加庫來擴展，例如p5.dom.js，它添加了使用P5創建和操縱HTML元素的選項，將滑塊，按鈕，表單元素添加到您的草圖中。 > 在性能方面，processing.js似乎具有穩定的幀速率，並且在文本中嘗試的兩個演示中的性能都更好，保持穩定的幀速率約為58至60，而P5在繪製時，P5的穩定幀速率低至50閒置時最多可備份60

> P5.js正式得到處理基金會的正式支持，並配備了用於處理用戶的過渡手冊，但是Processing.js允許您學習處理和在其更快，更便攜式到非WEB環境的環境中使用它。

什麼是p5.js？

p5.js是一個javaScript庫

>使藝術家，設計師，教育工作者和初學者都可以訪問編碼，並將其重新詮釋為當今的網絡

processing.js vs p5.js-有什麼區別？ >所以，聽起來像是在處理自己。但是它是什麼

真正的

？

放鬆，困惑的讀者，我們會做到的！首先，在這裡觀看他們驚人的熱情介紹，然後回來。

>單擊了嗎？現在得到嗎？不？好的。讓我們分解。

processing.js和p5.js 之間的差異 tl; dr：p5是處理語言的直接JS端口。 processing.js是一個轉換器，將純處理代碼解釋為即時的JS。後者要求您學習處理，但不學習JS，反之亦然。

實時編譯與語言翻譯：processing.js是一個庫，它採用原始處理代碼（類似於Java，帶有類型和所有類型），並將其轉換為JavaScript。實際上，您在processing.js網站上在瀏覽器中看到的示例實際上是純處理代碼現場直播為JS。例如，這種轉換類似於使用DART2JS在沒有內置DART VM的瀏覽器中運行DART代碼時獲得的收益。另一方面，P5是處理為JS代碼的完整轉換 - 所有功能最終都將被翻譯，並且您將在JavaScript中寫作。

在processing.js中，您需要使用帶有數據源的帆佈區域，該數據源導致PDE文件（帶有處理源代碼的文件）。也有其他方法，但簡而言之，僅此而已。在P5中，您直接編寫JS代碼，並且它像您在網站上包含的任何其他JS文件一樣被執行。

擴展：另一個區別是可以使用插件庫擴展P5。例如，p5.dom.js庫添加添加了使用P5創建和操縱HTML元素的選項，將滑塊，按鈕，表單元素添加到您的草圖中，就像我們在鏈接到In的Hello視頻中所做的那樣上一節。

請注意，在兩者中，只有P5正式得到處理基金會的正式支持，甚至還有用於處理用戶的過渡手冊。

demos

>讓我們看看演示比較，以獲得完整的要點。我製作了一個github存儲庫，其中包含每種方法中編寫的相同演示的存儲庫。

<span>git clone https://github.com/Swader/processing</span>

登入後複製

在處理文件夾中，您有兩個子文件夾：處理和P5。每個都包含Demo1和Demo2子目錄，其中包含index.html文件。這是您可以在瀏覽器中運行的內容並進行測試。第一個示例來自P5網站 - 一個不斷繪製的橢圓形，當鼠標單擊時變黑。

請注意，processing.js使用AJAX請求（通過XHR）加載PDE文件，因此，如果您嘗試通過運行index.html將其在瀏覽器中打開，則將獲得交叉原始錯誤。為了使其正常運行，您可能應該設置一個虛擬服務器以訪問樣品。最好是通過在一個流浪盒中改進宅基地的實例 - 您將在五分鐘內啟動並運行。

p5.js

在這種情況下，我們需要包含我們的草圖代碼的Sketch.js文件以及它運行的index.html文件。 Sketch.js代碼如下：

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

登入後複製

index.html文件僅包含以下內容：

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

登入後複製

> processing.js

在此示例中，我們需要一個帶有處理代碼的PDE文件。在我們的情況下，這是sketch.pde，帶有以下P5翻譯代碼：

然後，我們有我們的index.html文件：

<span>git clone https://github.com/Swader/processing</span>

登入後複製

分析

乍一看，沒有明顯的差異。兩個樣本以大致相同的速度運行，表現良好，並且具有相似的語法。但是，如果您使用的是Google Chrome，然後轉到Chrome：//標誌，然後激活幀速率計數器（請參見下圖），您會注意到processing.js canvas中的繪圖保持穩定的幀速率大約58至60，而繪畫時P5的低至50，閒置時返回60。另一個有趣的事實是，即使您的光標在帆佈區域外，處理始終都使用硬件加速度

。另一方面，P5如果沒有更改畫布正在待處理（您的光標不在圖紙區域之外），則會停止渲染，因此在不繪製時減輕負載。

演示2 processing.js vs p5.js-有什麼區別？

>讓我們現在進行另一個演示 - 一種簡單的粒子效果。該粒子發射極將在隨機方向上產生重力敏感的顆粒，我們將再次查看幀速率。我們將使用（轉換為P5）的示例是此。

>

> processing.js

sketch.pde的代碼是上面鏈接的示例的一個：

>

> p5

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

登入後複製

從上述翻譯時的P5代碼如下：

分析

>再次，我們看到processing.js的幀速率稍好。 P5將其保持在56左右，而processing.js似乎處於58左右的地面。在這兩種情況下，processing.js都證明了勝利，性能。

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

登入後複製

結論

P5JS是一個年輕而雄心勃勃的項目，旨在以比處理更容易接近處理的方式將視覺編程帶入大眾。雖然目前正在被迫在某種程度上被愚弄，但該團隊努力工作將其餘的處理語言移植到此JS對應物中。 >

使用P5而不是處理的優點。

>編寫您可能已經熟悉

的JS代碼

由加工基金會正式支持

使用DOM庫插件進行

HTML DOM操縱 - 將常見的HTML元素添加到您的P5草圖和更多

時的資源上的較輕
使用processing.js：
>似乎具有穩定的幀速率，並且在兩個演示中都表現更好

>我們將密切關注這個圖書館並定期進行遊戲。你會？讓我們知道，如果您提出一些有趣的例子，我們很想寫關於它們的！

經常詢問的問題（常見問題解答）

> processing.js和p5.js？

procesing.js和p5.js之間的主要區別是什麼JavaScript庫，用於創建網絡上的可視化，動畫和交互式內容。但是，它們有一些關鍵差異。 processing.js是用Java編寫的原始處理語言的端口，用於JavaScript。它旨在與現有的處理代碼兼容，這意味著它可以運行未修改的處理草圖。另一方面，P5.JS是對處理原理的新解釋，從頭開始為網絡設計。它具有更簡單，更類似JavaScript的語法，並且具有更現代的，更現代的網絡友好方法來處理媒體和互動性。

p5.js比processing.js更容易學習。，通常認為P5.js比processing.js更容易學習，尤其是對於初學者而言。這是因為P5.js具有更簡單，更直觀的語法，更接近標準JavaScript。它還具有更具用戶友好的方法來處理媒體和互動性，並具有鼠標和鍵盤輸入，圖像和聲音加載以及畫布繪圖之類的內置功能。此外，P5.js擁有一個非常活躍的社區和可用的大量學習資源，包括教程，示例和一個友好的論壇。

我可以在同一項目中使用processing.js和p5.js嗎？在技術上可以同時使用processing.js和p5.js

，但通常不建議使用。這是因為兩個庫具有不同的語法和方法來處理媒體和互動性，這可能導致混亂和兼容性問題。相反，通常最好選擇一個庫並在項目期間堅持下去。 processing.js是其與現有處理代碼的兼容性。如果您有要在網絡上運行的處理草圖，則可以使用processing.js進行最小修改。此外，processing.js具有更傳統的類似Java的語法，某些程序員可能更熟悉。

>

>使用p5.js？與processing.js相比，有幾個優點。首先，它具有更簡單，更直觀的語法，它更接近標準的JavaScript，使學習和使用更容易。其次，它具有更現代的，更現代的網絡友好方法來處理媒體和交互性，並具有鼠標和鍵盤輸入，圖像和聲音加載以及畫布繪圖之類的內置功能。最後，P5.JS擁有一個非常活躍的社區和大量的學習資源，使其成為初學者和經驗豐富的程序員的絕佳選擇。

我可以將processing.js或p5.js用於商業項目嗎？但是，最好檢查您在商業項目中使用的任何庫或工具的特定許可條款，以確保您處於合規性。我項目的JS？

processing.js和p5.js之間的選擇在很大程度上取決於您的特定需求和偏好。如果您有要在網絡上運行的現有處理代碼，或者您喜歡更傳統的類似Java的語法，則Processing.js可能是更好的選擇。另一方面，如果您從頭開始一個新項目，或者您喜歡更簡單，更像JavaScript的語法以及更現代，更現代的，對處理媒體和互動性的方法，那麼P5.js可能是更好的選擇。

processing.js和p5.js？

processing.js和p5.js之間是否有任何性能差異動畫順利。但是，任何JavaScript庫的性能都可以受到多種因素的影響，包括代碼的複雜性，運行代碼的設備的功能以及Web瀏覽器中JavaScript引擎的效率。因此，在各種設備和瀏覽器上測試您的代碼總是一個好主意，以確保最佳性能。

我可以將processing.js或p5.js與其他JavaScript庫或框架一起使用？

是的，processing.js和p5.js均可與其他JavaScript庫或框架一起使用。但是，重要的是要了解潛在的兼容性問題並徹底測試您的代碼，以確保一切正常。 > processing.js和p5.js都有大量可用的學習資源。對於processing.js，您可以從具有教程，示例和參考指南的官方處理網站開始。對於P5.js，您可以從官方P5.JS網站開始，該網站上有教程，示例，參考指南和友好的論壇。此外，有許多在線教程，視頻和課程可用於兩個圖書館。

以上是processing.js vs p5.js-有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn