![\"processing.js](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174009943848300.png\")
\n<\/p>>讓我們現(xiàn)在進(jìn)行另一個(gè)演示 - 一種簡單的粒子效果。該粒子發(fā)射極將在隨機(jī)方向上產(chǎn)生重力敏感的顆粒，我們將再次查看幀速率。我們將使用（轉(zhuǎn)換為P5）的示例是此。
處理是一種環(huán)境/編程語言，旨在使視覺，交互式應(yīng)用程序非常易于編寫。它可以用于從教孩子如何編碼到可視化科學(xué)數(shù)據(jù)的所有事物。
這是這樣的語言，部分落后于這樣的巫術(shù)：
>和此：
，當(dāng)然，您可以在這里找到的所有東西。
>
但是，如果我們之前有processing.js，那是什么p5.js？鑰匙要點(diǎn)
p5.js是處理語言的直接JavaScript端口，旨在使藝術(shù)家，設(shè)計(jì)師，教育工作者和初學(xué)者可以訪問編碼，而processing.js是一個(gè)轉(zhuǎn)換器，將純處理代碼解釋為即時(shí)的JavaScript。
p5.js可以使用添加庫來擴(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ì)的正式支持，并配備了用于處理用戶的過渡手冊(cè)，但是Processing.js允許您學(xué)習(xí)處理和在其更快，更便攜式到非WEB環(huán)境的環(huán)境中使用它。>使藝術(shù)家，設(shè)計(jì)師，教育工作者和初學(xué)者都可以訪問編碼，并將其重新詮釋為當(dāng)今的網(wǎng)絡(luò)
>所以，聽起來像是在處理自己。但是它是什么
？
？放松，困惑的讀者，我們會(huì)做到的！首先，在這里觀看他們驚人的熱情介紹，然后回來。>>單擊了嗎？現(xiàn)在得到嗎？不？好的。讓我們分解。
processing.js和p5.js 之間的差異 tl; dr：p5是處理語言的直接JS端口。 processing.js是一個(gè)轉(zhuǎn)換器，將純處理代碼解釋為即時(shí)的JS。后者要求您學(xué)習(xí)處理，但不學(xué)習(xí)JS，反之亦然。
>實(shí)時(shí)編譯與語言翻譯：processing.js是一個(gè)庫，它采用原始處理代碼（類似于Java，帶有類型和所有類型），并將其轉(zhuǎn)換為JavaScript。實(shí)際上，您在processing.js網(wǎng)站上在瀏覽器中看到的示例實(shí)際上是純處理代碼現(xiàn)場直播為JS。例如，這種轉(zhuǎn)換類似于使用DART2JS在沒有內(nèi)置DART VM的瀏覽器中運(yùn)行DART代碼時(shí)獲得的收益。另一方面，P5是處理為JS代碼的完整轉(zhuǎn)換 - 所有功能最終都將被翻譯，并且您將在JavaScript中寫作。
在processing.js中，您需要使用帶有數(shù)據(jù)源的帆布區(qū)域，該數(shù)據(jù)源導(dǎo)致PDE文件（帶有處理源代碼的文件）。也有其他方法，但簡而言之，僅此而已。在P5中，您直接編寫JS代碼，并且它像您在網(wǎng)站上包含的任何其他JS文件一樣被執(zhí)行。
擴(kuò)展：另一個(gè)區(qū)別是可以使用插件庫擴(kuò)展P5。例如，p5.dom.js庫添加添加了使用P5創(chuàng)建和操縱HTML元素的選項(xiàng)，將滑塊，按鈕，表單元素添加到您的草圖中，就像我們?cè)阪溄拥絀n的Hello視頻中所做的那樣上一節(jié)。
請(qǐng)注意，在兩者中，只有P5正式得到處理基金會(huì)的正式支持，甚至還有用于處理用戶的過渡手冊(cè)。
>demos
>讓我們看看演示比較，以獲得完整的要點(diǎn)。我制作了一個(gè)github存儲(chǔ)庫，其中包含每種方法中編寫的相同演示的存儲(chǔ)庫。
><span>git clone https://github.com/Swader/processing</span>在處理文件夾中，您有兩個(gè)子文件夾：處理和P5。每個(gè)都包含Demo1和Demo2子目錄，其中包含index.html文件。這是您可以在瀏覽器中運(yùn)行的內(nèi)容并進(jìn)行測試。第一個(gè)示例來自P5網(wǎng)站 - 一個(gè)不斷繪制的橢圓形，當(dāng)鼠標(biāo)單擊時(shí)變黑。
請(qǐng)注意，processing.js使用AJAX請(qǐng)求（通過XHR）加載PDE文件，因此，如果您嘗試通過運(yùn)行index.html將其在瀏覽器中打開，則將獲得交叉原始錯(cuò)誤。為了使其正常運(yùn)行，您可能應(yīng)該設(shè)置一個(gè)虛擬服務(wù)器以訪問樣品。最好是通過在一個(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文件： 。另一方面，P5如果沒有更改畫布正在待處理（您的光標(biāo)不在圖紙區(qū)域之外），則會(huì)停止渲染，因此在不繪制時(shí)減輕負(fù)載。
演示2
> p5
使用P5而不是處理的優(yōu)點(diǎn)。
由加工基金會(huì)正式支持 HTML DOM操縱 - 將常見的HTML元素添加到您的P5草圖和更多 > > > processing.js和p5.js之間的選擇在很大程度上取決于您的特定需求和偏好。如果您有要在網(wǎng)絡(luò)上運(yùn)行的現(xiàn)有處理代碼，或者您喜歡更傳統(tǒng)的類似Java的語法，則Processing.js可能是更好的選擇。另一方面，如果您從頭開始一個(gè)新項(xiàng)目，或者您喜歡更簡單，更像JavaScript的語法以及更現(xiàn)代，更現(xiàn)代的，對(duì)處理媒體和互動(dòng)性的方法，那么P5.js可能是更好的選擇。 processing.js和p5.js之間是否有任何性能差異動(dòng)畫順利。但是，任何JavaScript庫的性能都可以受到多種因素的影響，包括代碼的復(fù)雜性，運(yùn)行代碼的設(shè)備的功能以及Web瀏覽器中JavaScript引擎的效率。因此，在各種設(shè)備和瀏覽器上測試您的代碼總是一個(gè)好主意，以確保最佳性能。 ><span>git clone https://github.com/Swader/processing</span>
分析
乍一看，沒有明顯的差異。兩個(gè)樣本以大致相同的速度運(yùn)行，表現(xiàn)良好，并且具有相似的語法。但是，如果您使用的是Google Chrome，然后轉(zhuǎn)到Chrome：//標(biāo)志，然后激活幀速率計(jì)數(shù)器（請(qǐng)參見下圖），您會(huì)注意到processing.js canvas中的繪圖保持穩(wěn)定的幀速率大約58至60，而繪畫時(shí)P5的低至50，閑置時(shí)返回60。另一個(gè)有趣的事實(shí)是，即使您的光標(biāo)在帆布區(qū)域外，處理始終都使用硬件加速度
>
> processing.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>從上述翻譯時(shí)的P5代碼如下：
分析<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)目，旨在以比處理更容易接近處理的方式將視覺編程帶入大眾。雖然目前正在被迫在某種程度上被愚弄，但該團(tuán)隊(duì)努力工作將其余的處理語言移植到此JS對(duì)應(yīng)物中。>編寫您可能已經(jīng)熟悉
的JS代碼
不繪制
>我們將密切關(guān)注這個(gè)圖書館并定期進(jìn)行游戲。你會(huì)？讓我們知道，如果您提出一些有趣的例子，我們很想寫關(guān)于它們的！經(jīng)常詢問的問題（常見問題解答）
> processing.js和p5.js？procesing.js和p5.js之間的主要區(qū)別是什么JavaScript庫，用于創(chuàng)建網(wǎng)絡(luò)上的可視化，動(dòng)畫和交互式內(nèi)容。但是，它們有一些關(guān)鍵差異。 processing.js是用Java編寫的原始處理語言的端口，用于JavaScript。它旨在與現(xiàn)有的處理代碼兼容，這意味著它可以運(yùn)行未修改的處理草圖。另一方面，P5.JS是對(duì)處理原理的新解釋，從頭開始為網(wǎng)絡(luò)設(shè)計(jì)。它具有更簡單，更類似JavaScript的語法，并且具有更現(xiàn)代的，更現(xiàn)代的網(wǎng)絡(luò)友好方法來處理媒體和互動(dòng)性。
我可以在同一項(xiàng)目中使用processing.js和p5.js嗎？在技??術(shù)上可以同時(shí)使用processing.js和p5.js ，但通常不建議使用。這是因?yàn)閮蓚€(gè)庫具有不同的語法和方法來處理媒體和互動(dòng)性，這可能導(dǎo)致混亂和兼容性問題。相反，通常最好選擇一個(gè)庫并在項(xiàng)目期間堅(jiān)持下去。 processing.js是其與現(xiàn)有處理代碼的兼容性。如果您有要在網(wǎng)絡(luò)上運(yùn)行的處理草圖，則可以使用processing.js進(jìn)行最小修改。此外，processing.js具有更傳統(tǒng)的類似Java的語法，某些程序員可能更熟悉。>
>使用p5.js？與processing.js相比，有幾個(gè)優(yōu)點(diǎn)。首先，它具有更簡單，更直觀的語法，它更接近標(biāo)準(zhǔn)的JavaScript，使學(xué)習(xí)和使用更容易。其次，它具有更現(xiàn)代的，更現(xiàn)代的網(wǎng)絡(luò)友好方法來處理媒體和交互性，并具有鼠標(biāo)和鍵盤輸入，圖像和聲音加載以及畫布繪圖之類的內(nèi)置功能。最后，P5.JS擁有一個(gè)非?；钴S的社區(qū)和大量的學(xué)習(xí)資源，使其成為初學(xué)者和經(jīng)驗(yàn)豐富的程序員的絕佳選擇。我可以將processing.js或p5.js用于商業(yè)項(xiàng)目嗎？但是，最好檢查您在商業(yè)項(xiàng)目中使用的任何庫或工具的特定許可條款，以確保您處于合規(guī)性。我項(xiàng)目的JS？
processing.js和p5.js？
我可以將processing.js或p5.js與其他JavaScript庫或框架一起使用？
是的，processing.js和p5.js均可與其他JavaScript庫或框架一起使用。但是，重要的是要了解潛在的兼容性問題并徹底測試您的代碼，以確保一切正常。 > processing.js和p5.js都有大量可用的學(xué)習(xí)資源。對(duì)于processing.js，您可以從具有教程，示例和參考指南的官方處理網(wǎng)站開始。對(duì)于P5.js，您可以從官方P5.JS網(wǎng)站開始，該網(wǎng)站上有教程，示例，參考指南和友好的論壇。此外，有許多在線教程，視頻和課程可用于兩個(gè)圖書館。
以上是processing.js vs p5.js-有什么區(qū)別？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語言，各自適用于不同的應(yīng)用場景。Java用于大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用于網(wǎng)頁開發(fā)。
掌握J(rèn)avaScript評(píng)論：綜合指南
Jun 14, 2025 am 12:11 AM
評(píng)論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1）heelpindebugging，登機(jī)，andOnderStandingCodeeVolution.2）使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3）bestcractices.3）bestcracticesincracticesinclud
JavaScript評(píng)論：簡短說明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
JavaScript數(shù)據(jù)類型：深度潛水
Jun 13, 2025 am 12:10 AM
JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
JavaScript：探索用于高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
