Pemprosesan.js vs p5.js - Apa ' s perbezaannya?

Beberapa hari yang lalu, p5.js dibebaskan ke alam liar. Ia adalah perpustakaan JavaScript untuk pengaturcaraan visual yang mengikuti doktrin pemprosesan.

seperti jawatan ini:

Pemprosesan adalah bahasa persekitaran/pengaturcaraan yang dimaksudkan untuk membuat aplikasi visual, interaktif sangat mudah ditulis. Ia boleh digunakan untuk segala -galanya daripada mengajar kanak -kanak bagaimana untuk kod untuk menggambarkan data saintifik.

Ini bahasa yang sebahagiannya di belakang sihir seperti ini:

dan ini:

dan, tentu saja, semua yang anda dapati di sini.

Tetapi, jika kita mempunyai pemprosesan.js sebelum ini, apakah p5.js?

Takeaways Key

p5.js adalah port JavaScript langsung dari bahasa pemprosesan, yang bertujuan untuk membuat pengekodan dapat diakses untuk artis, pereka, pendidik, dan pemula, sementara pemprosesan.js adalah penukar yang menafsirkan kod pemprosesan tulen ke JavaScript dengan cepat.
p5.js boleh dilanjutkan dengan perpustakaan addon, seperti p5.dom.js, yang menambah pilihan untuk membuat dan memanipulasi elemen HTML dengan P5, menambah slider, butang, bentuk unsur dan banyak lagi untuk lakaran anda.
dari segi prestasi, pemprosesan.js nampaknya mempunyai kadar bingkai yang lebih mantap dan melakukan lebih baik dalam kedua -dua demo yang dicuba dalam teks, mengekalkan kadar bingkai mantap sekitar 58 hingga 60, sementara P5 berjalan serendah 50 ketika melukis, dan kembali hingga 60 ketika terbiar.
manakala p5.js disokong secara rasmi oleh asas pemprosesan dan dilengkapi dengan manual peralihan untuk pengguna pemprosesan, pemprosesan.js membolehkan anda mempelajari pemprosesan dan menggunakannya dalam persekitaran di mana ia lebih cepat dan lebih mudah alih untuk persekitaran bukan web.

Apa itu p5.js?

p5.js adalah perpustakaan JavaScript yang bertujuan

untuk membuat pengekodan boleh diakses untuk artis, pereka, pendidik, dan pemula, dan menafsirkan semula ini untuk web hari ini

Jadi, kedengarannya seperti memproses sendiri. Tetapi apa itu

benar -benar

? mudah, pembaca keliru, kami akan sampai ke sana! Pertama, tonton pengenalan mereka yang sangat bersemangat di sini, kemudian kembali.

adakah ia klik? Dapatkannya sekarang? Tidak? Ok. Mari pecahkannya.

perbezaan antara pemprosesan.js dan p5.js

tl; dr: p5 adalah port JS langsung bahasa pemprosesan. Pemprosesan.js adalah penukar yang menafsirkan kod pemprosesan tulen ke JS dengan cepat. Yang terakhir memerlukan anda belajar pemprosesan, tetapi bukan JS, dan sebaliknya.

---

Kompilasi hidup vs terjemahan bahasa : pemprosesan.js adalah perpustakaan yang mengambil kod pemprosesan mentah (yang serupa dengan Java, dengan jenis dan semua) dan menukarkannya ke JavaScript dengan cepat. Contoh -contoh yang anda lihat berjalan di penyemak imbas anda di laman web pemprosesan.js, sebenarnya, kod pemprosesan tulen diterjemahkan secara langsung ke JS. Penukaran ini, sebagai contoh, sama seperti apa yang anda dapat apabila anda menggunakan DART2JS untuk menjalankan kod DART dalam pelayar tanpa VM DART terbina dalam. Sebaliknya, P5 adalah penukaran penuh pemprosesan ke dalam kod JS - semua fungsi akhirnya akan diterjemahkan, dan anda akan menulis dalam JavaScript.

Dalam pemprosesan.js, anda perlu menentukan kawasan kanvas dengan sumber data yang membawa kepada fail PDE (fail dengan kod sumber pemprosesan). Terdapat juga pendekatan alternatif, tetapi secara ringkas, itu sahaja. Di P5, anda menulis kod JS secara langsung, dan ia akan dilaksanakan seperti mana -mana fail JS lain yang anda sertakan di laman web anda.

Memperluas : Perbezaan lain ialah P5 boleh dilanjutkan dengan perpustakaan Addon. Sebagai contoh, tambahan perpustakaan p5.dom.js menambah pilihan untuk membuat dan memanipulasi elemen HTML dengan P5, menambah slider, butang, elemen bentuk dan banyak lagi untuk lakaran anda - sama seperti penunjuk perasaan yang dilakukan dalam video hello yang kami daut Bahagian sebelumnya.

Perhatikan bahawa kedua -duanya, hanya P5 secara rasmi disokong oleh asas pemprosesan dan ada juga manual peralihan untuk pemprosesan pengguna di sini.

Demos

mari kita lihat perbandingan demo untuk mendapatkan inti penuh. Saya telah membuat repositori GitHub yang mengandungi demo yang sama ditulis dengan setiap pendekatan.

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

Dalam folder pemprosesan, anda mempunyai dua subfolder: Pemprosesan dan P5. Setiap akan mengandungi subdirektori Demo1 dan Demo2, yang mengandungi fail index.html. Inilah yang boleh anda jalankan dalam penyemak imbas dan ujian anda. Sampel pertama adalah dari laman web P5 - elips yang terus ditarik yang menjadi hitam apabila tetikus diklik.

Perhatikan bahawa pemprosesan.js memuatkan fail PDE dengan permintaan AJAX (melalui XHR), jadi anda akan mendapat ralat silang asal jika anda cuba membukanya dalam penyemak imbas anda dengan hanya menjalankan index.html. Untuk mendapatkannya berjalan dengan betul, anda mungkin perlu menyediakan pelayan maya untuk mengakses sampel. Itu yang terbaik dilakukan dengan contoh homestead yang bertambah baik dalam kotak vagrant - anda akan bangun dan berjalan dalam masa lima minit.

p5.js

Dalam kes ini, kita memerlukan fail Sketch.js yang mengandungi kod lakaran kami, dan fail index.html di mana ia berjalan. Kod Sketch.js adalah seperti berikut:

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

fail index.html hanya mengandungi ini:

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

pemproses.js

Untuk contoh ini, kita memerlukan fail PDE dengan kod pemprosesan. Dalam kes kami, itu lakaran.pde dengan kod P5 yang diterjemahkan berikut:

<span>void setup() {
</span><span>  size(640, 480);
</span><span>}
</span><span>
</span><span>void draw() {
</span><span>  if (mousePressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

Kemudian, kami mempunyai fail index.html kami:

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

Analisis

Pada pandangan pertama, tidak ada perbezaan yang dapat dilihat. Kedua -dua sampel berjalan pada kira -kira kelajuan yang sama, berfungsi dengan baik, dan mempunyai sintaks yang sama. Walau bagaimanapun, jika anda menggunakan Google Chrome, dan pergi ke Chrome: // Flags, kemudian aktifkan kaunter kadar bingkai (lihat imej di bawah), anda akan melihat bahawa lukisan dalam pemprosesan.js kanvas mengekalkan kadar bingkai mantap Sekitar 58 hingga 60, manakala P5 pergi serendah 50 ketika melukis, dan kembali hingga 60 ketika terbiar. Satu lagi fakta yang menarik ialah pemprosesan menggunakan pecutan perkakasan sepanjang masa , walaupun kursor anda berada di luar kawasan kanvas. P5, sebaliknya, menjeda rendering jika tidak ada perubahan pada kanvas yang belum selesai (kursor anda berada di luar kawasan lukisan), oleh itu mencerahkan beban semasa tidak melukis.

Demos 2

mari kita buat demo lain sekarang - kesan zarah mudah. Pemancar zarah ini akan menanam zarah sensitif graviti dalam arah rawak, dan kami akan melihat lagi kadar bingkai. Contoh yang akan kita gunakan (dan menterjemahkan ke P5) adalah ini.

pemproses.js

kod untuk sketch.pde adalah dari contoh yang dipautkan di atas:

<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

kod untuk P5 apabila diterjemahkan dari atas adalah seperti berikut:

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

Analisis

Sekali lagi, kita melihat kadar bingkai yang lebih baik dengan pemprosesan.js. P5 mengekalkannya sekitar 56, sementara pemprosesan.js kelihatan berdiri di 58 atau lebih. Dalam kedua-dua kes, pemprosesan.js telah membuktikan kemenangan, prestasi yang bijak.

Kesimpulan

P5JS adalah projek muda dan bercita -cita tinggi yang bertujuan untuk membawa pengaturcaraan visual kepada orang ramai dengan cara yang lebih mudah didekati daripada pemprosesan sehingga kini. Walaupun kini dipaksa untuk menjadi agak bijak, pasukan itu bekerja keras untuk memindahkan seluruh bahasa pemprosesan ke rakan JS ini.

kelebihan menggunakan p5 over processing.js adalah:

Menulis kod JS Anda mungkin sudah biasa dengan
disokong secara rasmi oleh asas pemprosesan
manipulasi HTML DOM dengan Addon Perpustakaan DOM - Menambah Elemen HTML Biasa ke lakaran P5 anda dan banyak lagi
lebih ringan pada sumber -sumber apabila tidak melukis

kelebihan menggunakan pemprosesan.js:

anda belajar pemprosesan dan boleh menggunakannya dalam persekitaran di mana ia lebih cepat dan lebih mudah alih untuk persekitaran bukan web
nampaknya mempunyai kadar bingkai yang lebih mantap dan melakukan lebih baik dalam kedua -dua demo yang kami cuba

Kami akan mengawasi perpustakaan ini dan bermain -main dengannya secara teratur. Adakah anda? Marilah kita tahu jika anda menyiapkan beberapa contoh yang menarik, kami ingin menulis tentang mereka!

Soalan Lazim (Soalan Lazim) mengenai pemprosesan.js dan p5.js

Apakah perbezaan utama antara pemprosesan.js dan p5.js?

pemproses.js dan p5.js adalah perpustakaan JavaScript yang digunakan untuk membuat visualisasi, animasi, dan kandungan interaktif di web. Walau bagaimanapun, mereka mempunyai beberapa perbezaan utama. Pemprosesan.js adalah pelabuhan bahasa pemprosesan asal, yang ditulis di Java, kepada JavaScript. Ia direka untuk bersesuaian dengan kod pemprosesan sedia ada, yang bermaksud ia boleh menjalankan lakaran pemprosesan yang tidak diubahsuai. Sebaliknya, p5.js adalah tafsiran baru prinsip pemprosesan, yang direka dari bawah untuk web. Ia mempunyai sintaks seperti JavaScript yang lebih mudah dan lebih mudah dan pendekatan yang lebih moden, mesra web untuk mengendalikan media dan interaktiviti. , p5.js biasanya dianggap lebih mudah untuk belajar daripada pemprosesan.js, terutamanya untuk pemula. Ini kerana p5.js mempunyai sintaks yang lebih mudah dan lebih intuitif yang lebih dekat dengan JavaScript standard. Ia juga mempunyai pendekatan yang lebih mesra pengguna untuk mengendalikan media dan interaktiviti, dengan fungsi terbina dalam untuk perkara-perkara seperti input tetikus dan papan kekunci, imej dan pemuatan bunyi, dan lukisan kanvas. Di samping itu, p5.js mempunyai komuniti yang sangat aktif dan banyak sumber pembelajaran yang tersedia, termasuk tutorial, contoh, dan forum yang mesra.

Walaupun secara teknikal mungkin menggunakan pemprosesan.js dan p5.js dalam projek yang sama, ia biasanya tidak disyorkan. Ini kerana kedua -dua perpustakaan mempunyai sintaks dan pendekatan yang berbeza untuk mengendalikan media dan interaktiviti, yang boleh membawa kepada masalah kekeliruan dan keserasian. Sebaliknya, biasanya lebih baik memilih satu perpustakaan dan melekatinya selama tempoh projek. Pemprosesan.js adalah keserasiannya dengan kod pemprosesan sedia ada. Jika anda mempunyai lakaran pemprosesan yang anda ingin jalankan di web, anda boleh melakukannya dengan pengubahsuaian yang minimum menggunakan Processing.js. Selain itu, pemprosesan.js mempunyai sintaks yang lebih tradisional, seperti Java, yang mungkin lebih akrab dengan beberapa pengaturcara.

Apakah kelebihan menggunakan p5.js? beberapa kelebihan ke atas pemprosesan.js. Pertama, ia mempunyai sintaks yang lebih mudah dan lebih intuitif yang lebih dekat dengan JavaScript standard, menjadikannya lebih mudah untuk dipelajari dan digunakan. Kedua, ia mempunyai pendekatan yang lebih moden dan mesra web untuk mengendalikan media dan interaktiviti, dengan fungsi terbina dalam untuk perkara seperti tetikus dan input papan kekunci, imej dan pemuatan bunyi, dan lukisan kanvas. Akhir sekali, p5.js mempunyai komuniti yang sangat aktif dan banyak sumber pembelajaran yang tersedia, menjadikannya pilihan yang baik untuk pemula dan pengaturcara yang berpengalaman.

Bolehkah saya menggunakan pemprosesan.js atau p5.js untuk projek komersial? Walau bagaimanapun, ia adalah idea yang baik untuk menyemak syarat pelesenan khusus mana -mana perpustakaan atau alat yang anda gunakan dalam projek komersial untuk memastikan anda mematuhi. js untuk projek saya?

Pilihan antara pemprosesan.js dan p5.js sebahagian besarnya bergantung kepada keperluan dan keutamaan khusus anda. Jika anda mempunyai kod pemprosesan sedia ada yang anda ingin jalankan di web, atau jika anda lebih suka sintaks yang lebih tradisional, seperti Java, maka pemprosesan.js mungkin pilihan yang lebih baik. Sebaliknya, jika anda memulakan projek baru dari awal, atau jika anda lebih suka sintaks seperti JavaScript yang lebih mudah, dan pendekatan yang lebih moden, mesra web untuk mengendalikan media dan interaktiviti, maka p5.js mungkin menjadi Pilihan yang lebih baik.

Adakah terdapat perbezaan prestasi antara pemprosesan.js dan p5.js? Animasi dengan lancar. Walau bagaimanapun, prestasi mana -mana perpustakaan JavaScript boleh dipengaruhi oleh pelbagai faktor, termasuk kerumitan kod, keupayaan peranti yang menjalankan kod, dan kecekapan enjin JavaScript dalam pelayar web. Oleh itu, ia sentiasa merupakan idea yang baik untuk menguji kod anda pada pelbagai peranti dan pelayar untuk memastikan prestasi yang optimum.

Ya, kedua -dua pemprosesan.js dan p5.js boleh digunakan bersempena dengan perpustakaan atau kerangka JavaScript yang lain. Walau bagaimanapun, penting untuk menyedari isu -isu keserasian yang berpotensi dan untuk menguji kod anda dengan teliti untuk memastikan semuanya berfungsi seperti yang diharapkan. > Kedua -dua pemprosesan.js dan p5.js mempunyai banyak sumber pembelajaran yang tersedia. Untuk pemprosesan.js, anda boleh memulakan dengan laman web pemprosesan rasmi, yang mempunyai tutorial, contoh, dan panduan rujukan. Untuk p5.js, anda boleh memulakan dengan laman web P5.JS rasmi, yang mempunyai tutorial, contoh, panduan rujukan, dan forum yang mesra. Di samping itu, terdapat banyak tutorial dalam talian, video, dan kursus yang tersedia untuk kedua -dua perpustakaan.

Atas ialah kandungan terperinci Pemprosesan.js vs p5.js - Apa ' s perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!