2020国产精品久久精品,夫妻免费无码v看片

>使藝術(shù)家，設(shè)計(jì)師，教育工作者和初學(xué)者都可以訪問(wèn)編碼，并將其重新詮釋為當(dāng)今的網(wǎng)絡(luò)

demos

分析

結(jié)論

>編寫(xiě)您可能已經(jīng)熟悉

我可以將processing.js或p5.js用于商業(yè)項(xiàng)目嗎？但是，最好檢查您在商業(yè)項(xiàng)目中使用的任何庫(kù)或工具的特定許可條款，以確保您處于合規(guī)性。我項(xiàng)目的JS？

processing.js和p5.js？

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

首頁(yè)

web前端

js教程

processing.js vs p5.js-有什么區(qū)別？

Lisa Kudrow

Feb 21, 2025 am 08:57 AM

processing.js vs p5.js-有什么區(qū)別？

幾天前，P5.JS被釋放到野外。這是一個(gè)遵循處理學(xué)說(shuō)的視覺(jué)編程的JavaScript庫(kù)。根據(jù)這篇文章的

處理是一種環(huán)境/編程語(yǔ)言，旨在使視覺(jué)，交互式應(yīng)用程序非常易于編寫(xiě)。它可以用于從教孩子如何編碼到可視化科學(xué)數(shù)據(jù)的所有事物。>

這是這樣的語(yǔ)言，部分落后于這樣的巫術(shù)：

>

和此：

，當(dāng)然，您可以在這里找到的所有東西。

但是，如果我們之前有processing.js，那是什么p5.js？鑰匙要點(diǎn)

p5.js是處理語(yǔ)言的直接JavaScript端口，旨在使藝術(shù)家，設(shè)計(jì)師，教育工作者和初學(xué)者可以訪問(wèn)編碼，而processing.js是一個(gè)轉(zhuǎn)換器，將純處理代碼解釋為即時(shí)的JavaScript。

p5.js可以使用添加庫(kù)來(lái)擴(kuò)展，例如p5.dom.js，它添加??了使用P5創(chuàng)建和操縱HTML元素的選項(xiàng)，將滑塊，按鈕，表單元素添加到您的草圖中。 > 在性能方面，processing.js似乎具有穩(wěn)定的幀速率，并且在文本中嘗試的兩個(gè)演示中的性能都更好，保持穩(wěn)定的幀速率約為58至60，而P5在繪制時(shí)，P5的穩(wěn)定幀速率低至50閑置時(shí)最多可備份60

> P5.js正式得到處理基金會(huì)的正式支持，并配備了用于處理用戶(hù)的過(guò)渡手冊(cè)，但是Processing.js允許您學(xué)習(xí)處理和在其更快，更便攜式到非WEB環(huán)境的環(huán)境中使用它。

什么是p5.js？

p5.js是一個(gè)javaScript庫(kù)

>使藝術(shù)家，設(shè)計(jì)師，教育工作者和初學(xué)者都可以訪問(wèn)編碼，并將其重新詮釋為當(dāng)今的網(wǎng)絡(luò)

processing.js vs p5.js-有什么區(qū)別？ >所以，聽(tīng)起來(lái)像是在處理自己。但是它是什么

真正的

？

放松，困惑的讀者，我們會(huì)做到的！首先，在這里觀看他們驚人的熱情介紹，然后回來(lái)。

>單擊了嗎？現(xiàn)在得到嗎？不？好的。讓我們分解。

processing.js和p5.js 之間的差異 tl; dr：p5是處理語(yǔ)言的直接JS端口。 processing.js是一個(gè)轉(zhuǎn)換器，將純處理代碼解釋為即時(shí)的JS。后者要求您學(xué)習(xí)處理，但不學(xué)習(xí)JS，反之亦然。

實(shí)時(shí)編譯與語(yǔ)言翻譯：processing.js是一個(gè)庫(kù)，它采用原始處理代碼（類(lèi)似于Java，帶有類(lèi)型和所有類(lèi)型），并將其轉(zhuǎn)換為JavaScript。實(shí)際上，您在processing.js網(wǎng)站上在瀏覽器中看到的示例實(shí)際上是純處理代碼現(xiàn)場(chǎng)直播為JS。例如，這種轉(zhuǎn)換類(lèi)似于使用DART2JS在沒(méi)有內(nèi)置DART VM的瀏覽器中運(yùn)行DART代碼時(shí)獲得的收益。另一方面，P5是處理為JS代碼的完整轉(zhuǎn)換 - 所有功能最終都將被翻譯，并且您將在JavaScript中寫(xiě)作。

在processing.js中，您需要使用帶有數(shù)據(jù)源的帆布區(qū)域，該數(shù)據(jù)源導(dǎo)致PDE文件（帶有處理源代碼的文件）。也有其他方法，但簡(jiǎn)而言之，僅此而已。在P5中，您直接編寫(xiě)JS代碼，并且它像您在網(wǎng)站上包含的任何其他JS文件一樣被執(zhí)行。

擴(kuò)展：另一個(gè)區(qū)別是可以使用插件庫(kù)擴(kuò)展P5。例如，p5.dom.js庫(kù)添加添加了使用P5創(chuàng)建和操縱HTML元素的選項(xiàng)，將滑塊，按鈕，表單元素添加到您的草圖中，就像我們?cè)阪溄拥絀n的Hello視頻中所做的那樣上一節(jié)。

請(qǐng)注意，在兩者中，只有P5正式得到處理基金會(huì)的正式支持，甚至還有用于處理用戶(hù)的過(guò)渡手冊(cè)。

demos

>讓我們看看演示比較，以獲得完整的要點(diǎn)。我制作了一個(gè)github存儲(chǔ)庫(kù)，其中包含每種方法中編寫(xiě)的相同演示的存儲(chǔ)庫(kù)。

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

在處理文件夾中，您有兩個(gè)子文件夾：處理和P5。每個(gè)都包含Demo1和Demo2子目錄，其中包含index.html文件。這是您可以在瀏覽器中運(yùn)行的內(nèi)容并進(jìn)行測(cè)試。第一個(gè)示例來(lái)自P5網(wǎng)站 - 一個(gè)不斷繪制的橢圓形，當(dāng)鼠標(biāo)單擊時(shí)變黑。

請(qǐng)注意，processing.js使用AJAX請(qǐng)求（通過(guò)XHR）加載PDE文件，因此，如果您嘗試通過(guò)運(yùn)行index.html將其在瀏覽器中打開(kāi)，則將獲得交叉原始錯(cuò)誤。為了使其正常運(yùn)行，您可能應(yīng)該設(shè)置一個(gè)虛擬服務(wù)器以訪問(wèn)樣品。最好是通過(guò)在一個(gè)流浪盒中改進(jìn)宅基地的實(shí)例 - 您將在五分鐘內(nèi)啟動(dòng)并運(yùn)行。

p5.js

在這種情況下，我們需要包含我們的草圖代碼的Sketch.js文件以及它運(yùn)行的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文件僅包含以下內(nèi)容：

<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

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

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

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

分析

乍一看，沒(méi)有明顯的差異。兩個(gè)樣本以大致相同的速度運(yùn)行，表現(xiàn)良好，并且具有相似的語(yǔ)法。但是，如果您使用的是Google Chrome，然后轉(zhuǎn)到Chrome：//標(biāo)志，然后激活幀速率計(jì)數(shù)器（請(qǐng)參見(jiàn)下圖），您會(huì)注意到processing.js canvas中的繪圖保持穩(wěn)定的幀速率大約58至60，而繪畫(huà)時(shí)P5的低至50，閑置時(shí)返回60。另一個(gè)有趣的事實(shí)是，即使您的光標(biāo)在帆布區(qū)域外，處理始終都使用硬件加速度

。另一方面，P5如果沒(méi)有更改畫(huà)布正在待處理（您的光標(biāo)不在圖紙區(qū)域之外），則會(huì)停止渲染，因此在不繪制時(shí)減輕負(fù)載。

演示2 processing.js vs p5.js-有什么區(qū)別？

>讓我們現(xiàn)在進(jìn)行另一個(gè)演示 - 一種簡(jiǎn)單的粒子效果。該粒子發(fā)射極將在隨機(jī)方向上產(chǎn)生重力敏感的顆粒，我們將再次查看幀速率。我們將使用（轉(zhuǎn)換為P5）的示例是此。

>

> processing.js

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

>

> 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>

從上述翻譯時(shí)的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>

結(jié)論

P5JS是一個(gè)年輕而雄心勃勃的項(xiàng)目，旨在以比處理更容易接近處理的方式將視覺(jué)編程帶入大眾。雖然目前正在被迫在某種程度上被愚弄，但該團(tuán)隊(duì)努力工作將其余的處理語(yǔ)言移植到此JS對(duì)應(yīng)物中。>

使用P5而不是處理的優(yōu)點(diǎn)。

>編寫(xiě)您可能已經(jīng)熟悉

的JS代碼

由加工基金會(huì)正式支持

使用DOM庫(kù)插件進(jìn)行

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

時(shí)的資源上的較輕
使用processing.js：
>似乎具有穩(wěn)定的幀速率，并且在兩個(gè)演示中都表現(xiàn)更好

>我們將密切關(guān)注這個(gè)圖書(shū)館并定期進(jìn)行游戲。你會(huì)？讓我們知道，如果您提出一些有趣的例子，我們很想寫(xiě)關(guān)于它們的！

經(jīng)常詢(xún)問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）

> processing.js和p5.js？

procesing.js和p5.js之間的主要區(qū)別是什么JavaScript庫(kù)，用于創(chuàng)建網(wǎng)絡(luò)上的可視化，動(dòng)畫(huà)和交互式內(nèi)容。但是，它們有一些關(guān)鍵差異。 processing.js是用Java編寫(xiě)的原始處理語(yǔ)言的端口，用于JavaScript。它旨在與現(xiàn)有的處理代碼兼容，這意味著它可以運(yùn)行未修改的處理草圖。另一方面，P5.JS是對(duì)處理原理的新解釋?zhuān)瑥念^開(kāi)始為網(wǎng)絡(luò)設(shè)計(jì)。它具有更簡(jiǎn)單，更類(lèi)似JavaScript的語(yǔ)法，并且具有更現(xiàn)代的，更現(xiàn)代的網(wǎng)絡(luò)友好方法來(lái)處理媒體和互動(dòng)性。

p5.js比processing.js更容易學(xué)習(xí)。，通常認(rèn)為P5.js比processing.js更容易學(xué)習(xí)，尤其是對(duì)于初學(xué)者而言。這是因?yàn)镻5.js具有更簡(jiǎn)單，更直觀的語(yǔ)法，更接近標(biāo)準(zhǔn)JavaScript。它還具有更具用戶(hù)友好的方法來(lái)處理媒體和互動(dòng)性，并具有鼠標(biāo)和鍵盤(pán)輸入，圖像和聲音加載以及畫(huà)布繪圖之類(lèi)的內(nèi)置功能。此外，P5.js擁有一個(gè)非?；钴S的社區(qū)和可用的大量學(xué)習(xí)資源，包括教程，示例和一個(gè)友好的論壇。

我可以在同一項(xiàng)目中使用processing.js和p5.js嗎？在技??術(shù)上可以同時(shí)使用processing.js和p5.js

，但通常不建議使用。這是因?yàn)閮蓚€(gè)庫(kù)具有不同的語(yǔ)法和方法來(lái)處理媒體和互動(dòng)性，這可能導(dǎo)致混亂和兼容性問(wèn)題。相反，通常最好選擇一個(gè)庫(kù)并在項(xiàng)目期間堅(jiān)持下去。 processing.js是其與現(xiàn)有處理代碼的兼容性。如果您有要在網(wǎng)絡(luò)上運(yùn)行的處理草圖，則可以使用processing.js進(jìn)行最小修改。此外，processing.js具有更傳統(tǒng)的類(lèi)似Java的語(yǔ)法，某些程序員可能更熟悉。

>

>使用p5.js？與processing.js相比，有幾個(gè)優(yōu)點(diǎn)。首先，它具有更簡(jiǎn)單，更直觀的語(yǔ)法，它更接近標(biāo)準(zhǔn)的JavaScript，使學(xué)習(xí)和使用更容易。其次，它具有更現(xiàn)代的，更現(xiàn)代的網(wǎng)絡(luò)友好方法來(lái)處理媒體和交互性，并具有鼠標(biāo)和鍵盤(pán)輸入，圖像和聲音加載以及畫(huà)布繪圖之類(lèi)的內(nèi)置功能。最后，P5.JS擁有一個(gè)非?；钴S的社區(qū)和大量的學(xué)習(xí)資源，使其成為初學(xué)者和經(jīng)驗(yàn)豐富的程序員的絕佳選擇。

我可以將processing.js或p5.js用于商業(yè)項(xiàng)目嗎？但是，最好檢查您在商業(yè)項(xiàng)目中使用的任何庫(kù)或工具的特定許可條款，以確保您處于合規(guī)性。我項(xiàng)目的JS？

processing.js和p5.js之間的選擇在很大程度上取決于您的特定需求和偏好。如果您有要在網(wǎng)絡(luò)上運(yùn)行的現(xiàn)有處理代碼，或者您喜歡更傳統(tǒng)的類(lèi)似Java的語(yǔ)法，則Processing.js可能是更好的選擇。另一方面，如果您從頭開(kāi)始一個(gè)新項(xiàng)目，或者您喜歡更簡(jiǎn)單，更像JavaScript的語(yǔ)法以及更現(xiàn)代，更現(xiàn)代的，對(duì)處理媒體和互動(dòng)性的方法，那么P5.js可能是更好的選擇。

processing.js和p5.js？

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

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

是的，processing.js和p5.js均可與其他JavaScript庫(kù)或框架一起使用。但是，重要的是要了解潛在的兼容性問(wèn)題并徹底測(cè)試您的代碼，以確保一切正常。 > processing.js和p5.js都有大量可用的學(xué)習(xí)資源。對(duì)于processing.js，您可以從具有教程，示例和參考指南的官方處理網(wǎng)站開(kāi)始。對(duì)于P5.js，您可以從官方P5.JS網(wǎng)站開(kāi)始，該網(wǎng)站上有教程，示例，參考指南和友好的論壇。此外，有許多在線教程，視頻和課程可用于兩個(gè)圖書(shū)館。

以上是processing.js vs p5.js-有什么區(qū)別？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本站聲明

本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn