検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Processing.js vs P5.js-違いは何ですか？

Processing.js vs P5.js-違いは何ですか？

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-21 08:57:14124ブラウズ

Processing.js vs P5.js-違いは何ですか？

数日前、p5.jsは野生にリリースされました。処理の教義に続く視覚的なプログラミングのためのJavaScriptライブラリです。 この投稿に従って

処理は、視覚的でインタラクティブなアプリケーションを非常に簡単に書くことができる環境/プログラミング言語です。子どもたちにコーディングする方法を教えることから科学データの視覚化まで、あらゆるものに使用できます。

このようなウィザードリーの一部に部分的に背後にある言語です：

しかし、以前にpression.jsを持っていた場合、p5.jsは何ですか？

キーテイクアウト

P5.jsは、処理言語の直接的なJavaScriptポートであり、アーティスト、デザイナー、教育者、初心者がコーディングをアクセスできるようにすることを目的としていますが、Process.JSは純粋な処理コードを飛行中のJavaScriptに解釈するコンバーターです。 🎜>
    p5.jsは、p5.dom.jsなどのアドオンライブラリを使用して拡張できます。これにより、P5でHTML要素を作成および操作するオプションが追加されます。 > パフォーマンスの観点から、Processing.jsはフレームレートが安定しており、テキストで試行された両方のデモでパフォーマンスが向上し、58〜60の安定したフレームレートが維持されますが、P5は描画時に50になります。アイドル時に60にバックアップします。
    • P5.JSは処理基盤によって公式にサポートされており、ユーザーの処理用の移行マニュアルが付属していますが、Processing.JSを使用すると、処理を学習し、環境をより高速でポータブルな環境で使用できます。 🎜>
    • p5.js？
  • とは何ですか
p5.jsは、

を狙うJavaScriptライブラリです

アーティスト、デザイナー、教育者、初心者向けのコーディングをアクセスできるようにし、今日のWebのためにこれを再編成しますProcessing.js vs P5.js-違いは何ですか？

それで、それ自体を処理するように聞こえます。しかし、それは本当に

？

容易に、読者を混乱させてください、私たちはそれに到達します！まず、ここで驚くほど熱心な紹介を見てから、戻ってきてください。

クリックしましたか？今それを手に入れますか？いいえ？わかりました。それを分解しましょう。
Process.jsとp5.js

の違い違い TL; DR：P5は、処理言語の直接JSポートです。 Processing.jsは、純粋な処理コードをその場でJSに解釈するコンバーターです。後者では、処理を学ぶ必要がありますが、JSではなく、逆も同様です。

ライブコンピレーションvs言語翻訳：Processing.jsは、生の処理コード（Javaに似たタイプなど）を取得し、その場でJavaScriptに変換するライブラリです。 Process.js Webサイトでブラウザで実行されている例は、実際、JSに翻訳された純粋な処理コードです。この変換は、たとえば、DART2JSを使用してBROWSERでDARTコードを組み込まれていない場合に取得したものと同様です。一方、P5はJSコードへの処理の完全な変換です。すべての機能が最終的に翻訳され、JavaScriptで書くことができます。

process.jsでは、PDEファイル（処理ソースコードを備えたファイル）につながるデータソースを持つキャンバス領域を定義する必要があります。別のアプローチもありますが、一言で言えば、それだけです。 P5では、JSコードを直接書き込み、Webサイトに含める他のJSファイルと同じように実行されます。

拡張：もう1つの違いは、P5をアドオンライブラリを使用して拡張できることです。たとえば、P5.dom.jsライブラリの追加は、P5でHTML要素を作成および操作し、スライダー、ボタン、フォーム要素などをスケッチに追加するオプションを追加します。前のセクション。

2つのうち、P5のみがProcessing Foundationによって正式にサポートされており、ここにユーザーを処理するための移行マニュアルもあります。

demos

デモの比較を見て、それの完全な要点を取得します。各アプローチで書かれた同じデモを含むGitHubリポジトリを作成しました。

処理フォルダーには、2つのサブフォルダーがあります。処理とP5です。それぞれにdemo1およびdemo2サブディレクトリが含まれ、index.htmlファイルが含まれます。これは、ブラウザとテストで実行できるものです。最初のサンプルはP5 Webサイトからのものです。マウスがクリックされると黒に変わる楕円形です。

Process.jsはAJAX要求（XHR経由）でPDEファイルをロードすることに注意してください。したがって、index.htmlを実行してブラウザでそれを開こうとすると、クロスオリジンエラーが発生します。適切に実行するには、おそらくサンプルにアクセスするための仮想サーバーを設定する必要があります。これは、Vagrantボックスで改善されたホームステッドのインスタンスで行うのが最善です。5分間で稼働します。 
<span>git clone https://github.com/Swader/processing</span>
p5.js

この場合、スケッチコードと実行されるindex.htmlファイルを含むsketch.jsファイルが必要です。 Sketch.jsコードは次のとおりです

index.htmlファイルにはこれのみが含まれています

processing.js

この例では、処理コードを備えたPDEファイルが必要です。私たちの場合、それは次のP5翻訳コードを使用したsketch.pdeです。 

<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>git clone https://github.com/Swader/processing</span>

分析

一見すると、識別可能な違いはありません。両方のサンプルは、ほぼ同じ速度で実行され、パフォーマンスが良く、同様の構文があります。ただし、Google Chromeを使用してChrome：// Flagsに移動してから、フレームレートカウンターをアクティブにします（下の画像を参照）約58〜60、P5は描画時に50になり、アイドル状態で60に戻ります。もう1つの興味深い事実は、処理がハードウェアアクセラレーションを使用しているを使用して、カーソルがキャンバスエリアの外側にある場合でも。一方、P5は、キャンバスへの変更が保留されていない場合（カーソルが描画領域の外側にある）場合、レンダリングを一時停止します。

Processing.js vs P5.js-違いは何ですか？

デモ2

今すぐ別のデモを行いましょう。単純な粒子効果です。この粒子エミッターは、ランダムな方向に重力に敏感な粒子を生成し、フレームレートをもう一度見ます。使用する例（P5に翻訳する）はこれです。

processing.js

p5

上記から翻訳した場合の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>

分析

もう一度、Processing.jsでフレームレートがわずかに優れていることがわかります。 P5は56程度で維持されますが、Procession.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コードを書くと、おそらくすでに

に精通しています

処理財団によって正式にサポートされています

HTML DOM Library Addonによる操作 - P5スケッチなどに一般的なHTML要素を追加

    描画しないときのリソースのライター
    • process.jsを使用することの利点：
  • 処理を学習し、より速く、非WEB環境よりも携帯可能な環境で使用できます
  • フレームレートが安定しているようで、両方のデモでより良くパフォーマンスを発揮しました

このライブラリに目を光らせ、定期的に遊んでいます。しますか？いくつかの興味深い例を盛り上げたら、私たちはそれらについて書きたいと思っています！

処理に関するよくある質問（FAQ）とp5.js

処理とp5.js？

処理。Jsとp5.jsの主な違いは、両方とも視覚化、アニメーション、およびインタラクティブなコンテンツの作成に使用されるJavaScriptライブラリです。ただし、いくつかの重要な違いがあります。 Processing.jsは、JavaScriptにJavaで書かれた元の処理言語のポートです。既存の処理コードと互換性があるように設計されています。つまり、処理スケッチを変更していないことを意味します。一方、P5.JSは、Webのためにゼロから設計された処理原則の新しい解釈です。よりシンプルでJavaScriptのような構文と、メディアやインタラクティブ性を処理するためのよりモダンでWebに優しいアプローチを備えています。 、P5.jsは一般に、特に初心者向けのProcessing.jsよりも学習しやすいと考えられています。これは、P5.JSには、標準のJavaScriptに近い、よりシンプルで直感的な構文があるためです。また、マウスやキーボード入力、画像と音の読み込み、キャンバスの描画などの組み込み関数を備えた、メディアやインタラクティブ性の取り扱いにより、よりユーザーフレンドリーなアプローチがあります。さらに、P5.JSには非常に活発なコミュニティがあり、チュートリアル、例、フレンドリーなフォーラムなど、豊富な学習リソースがあります。

同じプロジェクトでProcessing.jsとP5.jsの両方を使用することは技術的には可能ですが、一般的には推奨されません。これは、2つのライブラリに異なる構文とメディアとインタラクティブ性の取り扱いにアプローチがあるため、混乱と互換性の問題につながる可能性があるためです。代わりに、通常、1つのライブラリを選択してプロジェクトの期間中それに固執することをお勧めします。 Processing.jsは、既存の処理コードとの互換性です。 Webで実行したい処理スケッチがある場合は、Process.jsを使用して最小限の変更でこれを行うことができます。さらに、Processing.jsには、より伝統的なJavaのような構文があります。これは、一部のプログラマにとってよりよく知られている可能性があります。処理よりもいくつかの利点があります。まず、標準のJavaScriptに近い、よりシンプルで直感的な構文があり、学習と使用が容易になります。第二に、メディアやインタラクティブ性を処理するためのよりモダンでウェブフレンドリーなアプローチがあり、マウスやキーボード入力、画像とサウンドの読み込み、キャンバスの描画などの機能が組み込まれています。最後に、P5.JSには非常に活発なコミュニティがあり、利用可能な豊富な学習リソースがあり、初心者や経験豊富なプログラマーにとっても素晴らしい選択肢になります。

商用プロジェクトにProcess.jsまたはP5.jsを使用できますか？

​​

はい。ただし、商用プロジェクトで使用するライブラリまたはツールの特定のライセンス条件を確認して、コンプライアンスを確認することをお勧めします。私のプロジェクトのためのJS

Processing.jsとP5.jsの選択は、あなたの特定のニーズと好みに大きく依存します。 Webで実行する既存の処理コードがある場合、またはより伝統的なJavaのような構文を好む場合は、Processing.jsがより良い選択かもしれません。一方、新しいプロジェクトをゼロから始めている場合、またはよりシンプルでJavaScriptのような構文と、メディアやインタラクティブを処理するためのよりモダンでWebに優しいアプローチを好む場合、P5.JSはより良い選択。

Process.jsとP5.js？

の両方のProcessing.jsとP5.jsには、複雑な視覚化とアニメーションを実行できるパフォーマンスの違いはありますかスムーズに。ただし、JavaScriptライブラリのパフォーマンスは、コードの複雑さ、コードを実行しているデバイスの機能、Webブラウザー内のJavaScriptエンジンの効率など、さまざまな要因の影響を受ける可能性があります。そのため、最適なパフォーマンスを確保するために、さまざまなデバイスとブラウザでコードをテストすることをお勧めします。はい、はい、Process.jsとP5.jsの両方を、他のJavaScriptライブラリまたはフレームワークと組み合わせて使用​​できます。ただし、潜在的な互換性の問題を認識し、すべてが予想どおりに機能するようにコードを徹底的にテストすることが重要です。 > Processing.jsとP5.JSの両方に、豊富な学習リソースが利用可能です。 Processing.jsについては、チュートリアル、例、リファレンスガイドがある公式処理Webサイトから始めることができます。 P5.JSの場合、チュートリアル、例、リファレンスガイド、フレンドリーなフォーラムがある公式P5.JS Webサイトから始めることができます。さらに、両方のライブラリで利用可能な多くのオンラインチュートリアル、ビデオ、コースがあります。

以上がProcessing.js vs P5.js-違いは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Java JavaScript ajax chrome html define if for while include try Error break using JS dom this transition canvas input github idea vagrant everything Access Foundation Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：4ダークライトの背景jQueryプラグインを検出します次の記事：4ダークライトの背景jQueryプラグインを検出します

関連記事

続きを見る