數(shù)日前、p5.jsは野生にリリースされました。処理の教義に続く視覚的なプログラミングのためのJavaScriptライブラリです。 この投稿に従って
処理は、視覚的でインタラクティブなアプリケーションを非常に簡(jiǎn)単に書(shū)くことができる環(huán)境/プログラミング言語(yǔ)です。子どもたちにコーディングする方法を教えることから科學(xué)データの視覚化まで、あらゆるものに使用できます。このようなウィザードリーの一部に部分的に背後にある言語(yǔ)です：
しかし、以前にpression.jsを持っていた場(chǎng)合、p5.jsは何ですか？
キーテイクアウト
P5.jsは、処理言語(yǔ)の直接的なJavaScriptポートであり、アーティスト、デザイナー、教育者、初心者がコーディングをアクセスできるようにすることを目的としていますが、Process.JSは純粋な処理コードを飛行中のJavaScriptに解釈するコンバーターです。 ??>
- p5.jsは、p5.dom.jsなどのアドオンライブラリを使用して拡張できます。これにより、P5でHTML要素を作成および操作するオプションが追加されます。 >
パフォーマンスの観點(diǎn)から、Processing.jsはフレームレートが安定しており、テキストで試行された両方のデモでパフォーマンスが向上し、58?60の安定したフレームレートが維持されますが、P5は描畫時(shí)に50になります。アイドル時(shí)に60にバックアップします。
- P5.JSは処理基盤によって公式にサポートされており、ユーザーの処理用の移行マニュアルが付屬していますが、Processing.JSを使用すると、処理を?qū)W習(xí)し、環(huán)境をより高速でポータブルな環(huán)境で使用できます。 ??>
- p5.js？
- とは何ですか
を狙うJavaScriptライブラリです
アーティスト、デザイナー、教育者、初心者向けのコーディングをアクセスできるようにし、今日のWebのためにこれを再編成します
それで、それ自體を処理するように聞こえます。しかし、それは本當(dāng)に
？Process.jsとp5.js容易に、読者を混亂させてください、私たちはそれに到達(dá)します！まず、ここで驚くほど熱心な紹介を見(jiàn)てから、戻ってきてください。
クリックしましたか？今それを手に入れますか？いいえ？わかりました。それを分解しましょう。
の違い違い TL; DR：P5は、処理言語(yǔ)の直接JSポートです。 Processing.jsは、純粋な処理コードをその場(chǎng)でJSに解釈するコンバーターです。後者では、処理を?qū)Wぶ必要がありますが、JSではなく、逆も同様です。
ライブコンピレーションvs言語(yǔ)翻訳：Processing.jsは、生の処理コード（Javaに似たタイプなど）を取得し、その場(chǎng)でJavaScriptに変換するライブラリです。 Process.js Webサイトでブラウザで実行されている例は、実際、JSに翻訳された純粋な処理コードです。この変換は、たとえば、DART2JSを使用してBROWSERでDARTコードを組み込まれていない場(chǎng)合に取得したものと同様です。一方、P5はJSコードへの処理の完全な変換です。すべての機(jī)能が最終的に翻訳され、JavaScriptで書(shū)くことができます。
process.jsでは、PDEファイル（処理ソースコードを備えたファイル）につながるデータソースを持つキャンバス領(lǐng)域を定義する必要があります。別のアプローチもありますが、一言で言えば、それだけです。 P5では、JSコードを直接書(shū)き込み、Webサイトに含める他のJSファイルと同じように実行されます。
拡張：もう1つの違いは、P5をアドオンライブラリを使用して拡張できることです。たとえば、P5.dom.jsライブラリの追加は、P5でHTML要素を作成および操作し、スライダー、ボタン、フォーム要素などをスケッチに追加するオプションを追加します。前のセクション。
2つのうち、P5のみがProcessing Foundationによって正式にサポートされており、ここにユーザーを処理するための移行マニュアルもあります。demos
デモの比較を見(jiàn)て、それの完全な要點(diǎn)を取得します。各アプローチで書(shū)かれた同じデモを含むGitHubリポジトリを作成しました。
処理フォルダーには、2つのサブフォルダーがあります。処理とP5です。それぞれにdemo1およびdemo2サブディレクトリが含まれ、index.htmlファイルが含まれます。これは、ブラウザとテストで実行できるものです。最初のサンプルはP5 Webサイトからのものです。マウスがクリックされると黒に変わる楕円形です。
Process.jsはAJAX要求（XHR経由）でPDEファイルをロードすることに注意してください。したがって、index.htmlを?qū)g行してブラウザでそれを開(kāi)こうとすると、クロスオリジンエラーが発生します。適切に実行するには、おそらくサンプルにアクセスするための仮想サーバーを設(shè)定する必要があります。これは、Vagrantボックスで改善されたホームステッドのインスタンスで行うのが最善です。5分間で稼働します。<span>git clone https://github.com/Swader/processing</span>p5.js
この場(chǎng)合、スケッチコードと実行されるindex.htmlファイルを含むsketch.jsファイルが必要です。 Sketch.jsコードは次のとおりです
index.htmlファイルにはこれのみが含まれています
processing.js
この例では、処理コードを備えたPDEファイルが必要です。私たちの場(chǎng)合、それは次の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>
分析
一見(jiàn)すると、識(shí)別可能な違いはありません。両方のサンプルは、ほぼ同じ速度で実行され、パフォーマンスが良く、同様の構(gòu)文があります。ただし、Google Chromeを使用してChrome：// Flagsに移動(dòng)してから、フレームレートカウンターをアクティブにします（下の畫像を參照）約58?60、P5は描畫時(shí)に50になり、アイドル狀態(tài)で60に戻ります。もう1つの興味深い事実は、処理がハードウェアアクセラレーションを使用しているを使用して、カーソルがキャンバスエリアの外側(cè)にある場(chǎng)合でも。一方、P5は、キャンバスへの変更が保留されていない場(chǎng)合（カーソルが描畫領(lǐng)域の外側(cè)にある）場(chǎng)合、レンダリングを一時(shí)停止します。
今すぐ別のデモを行いましょう。単純な粒子効果です。この粒子エミッターは、ランダムな方向に重力に敏感な粒子を生成し、フレームレートをもう一度見(jiàn)ます。使用する例（P5に翻訳する）はこれです。
processing.js
上記から翻訳した場(chǎng)合の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でフレームレートがわずかに優(yōu)れていることがわかります。 P5は56程度で維持されますが、Procession.jsは58程度で地面に立っているように見(jiàn)えます。どちらの場(chǎng)合も、Processing.jsはパフォーマンスの面で勝利を収めました
結(jié)論<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は、これまでの処理よりも親しみやすい方法で視覚的なプログラミングを大衆(zhòng)にもたらすことを目的とした若くて野心的なプロジェクトです。現(xiàn)在、機(jī)能的にはやや愚かにされることを余儀なくされていますが、チームはこのJSカウンターパートに処理言語(yǔ)の殘りの部分を移植するのに苦労しています。
p5を処理よりも使用することの利點(diǎn)は、です
JSコードを書(shū)くと、おそらくすでに
に精通しています処理財(cái)団によって正式にサポートされています
HTML DOM Library Addonによる操作 - P5スケッチなどに一般的なHTML要素を追加
- 描畫しないときのリソースのライター
- process.jsを使用することの利點(diǎn)：
- 処理を?qū)W習(xí)し、より速く、非WEB環(huán)境よりも攜帯可能な環(huán)境で使用できます
- フレームレートが安定しているようで、両方のデモでより良くパフォーマンスを発揮しました
このライブラリに目を光らせ、定期的に遊んでいます。しますか？いくつかの興味深い例を盛り上げたら、私たちはそれらについて書(shū)きたいと思っています！
処理に関するよくある質(zhì)問(wèn)（FAQ）とp5.js
処理とp5.js？
処理。Jsとp5.jsの主な違いは、両方とも視覚化、アニメーション、およびインタラクティブなコンテンツの作成に使用されるJavaScriptライブラリです。ただし、いくつかの重要な違いがあります。 Processing.jsは、JavaScriptにJavaで書(shū)かれた元の処理言語(yǔ)のポートです。既存の処理コードと互換性があるように設(shè)計(jì)されています。つまり、処理スケッチを変更していないことを意味します。一方、P5.JSは、Webのためにゼロから設(shè)計(jì)された処理原則の新しい解釈です。よりシンプルでJavaScriptのような構(gòu)文と、メディアやインタラクティブ性を処理するためのよりモダンでWebに優(yōu)しいアプローチを備えています。 、P5.jsは一般に、特に初心者向けのProcessing.jsよりも學(xué)習(xí)しやすいと考えられています。これは、P5.JSには、標(biāo)準(zhǔn)のJavaScriptに近い、よりシンプルで直感的な構(gòu)文があるためです。また、マウスやキーボード入力、畫像と音の読み込み、キャンバスの描畫などの組み込み関數(shù)を備えた、メディアやインタラクティブ性の取り扱いにより、よりユーザーフレンドリーなアプローチがあります。さらに、P5.JSには非常に活発なコミュニティがあり、チュートリアル、例、フレンドリーなフォーラムなど、豊富な學(xué)習(xí)リソースがあります。
同じプロジェクトでProcessing.jsとP5.jsの両方を使用することは技術(shù)的には可能ですが、一般的には推奨されません。これは、2つのライブラリに異なる構(gòu)文とメディアとインタラクティブ性の取り扱いにアプローチがあるため、混亂と互換性の問(wèn)題につながる可能性があるためです。代わりに、通常、1つのライブラリを選択してプロジェクトの期間中それに固執(zhí)することをお?jiǎng)幛幛筏蓼埂?Processing.jsは、既存の処理コードとの互換性です。 Webで実行したい処理スケッチがある場(chǎng)合は、Process.jsを使用して最小限の変更でこれを行うことができます。さらに、Processing.jsには、より伝統(tǒng)的なJavaのような構(gòu)文があります。これは、一部のプログラマにとってよりよく知られている可能性があります。処理よりもいくつかの利點(diǎn)があります。まず、標(biāo)準(zhǔn)のJavaScriptに近い、よりシンプルで直感的な構(gòu)文があり、學(xué)習(xí)と使用が容易になります。第二に、メディアやインタラクティブ性を処理するためのよりモダンでウェブフレンドリーなアプローチがあり、マウスやキーボード入力、畫像とサウンドの読み込み、キャンバスの描畫などの機(jī)能が組み込まれています。最後に、P5.JSには非常に活発なコミュニティがあり、利用可能な豊富な學(xué)習(xí)リソースがあり、初心者や経験豊富なプログラマーにとっても素晴らしい選択肢になります。商用プロジェクトにProcess.jsまたはP5.jsを使用できますか？
??
はい。ただし、商用プロジェクトで使用するライブラリまたはツールの特定のライセンス條件を確認(rèn)して、コンプライアンスを確認(rèn)することをお?jiǎng)幛幛筏蓼?。私のプロジェクトのためのJS
Processing.jsとP5.jsの選択は、あなたの特定のニーズと好みに大きく依存します。 Webで実行する既存の処理コードがある場(chǎng)合、またはより伝統(tǒng)的なJavaのような構(gòu)文を好む場(chǎng)合は、Processing.jsがより良い選択かもしれません。一方、新しいプロジェクトをゼロから始めている場(chǎng)合、またはよりシンプルでJavaScriptのような構(gòu)文と、メディアやインタラクティブを処理するためのよりモダンでWebに優(yōu)しいアプローチを好む場(chǎng)合、P5.JSはより良い選択。
Process.jsとP5.js？
の両方のProcessing.jsとP5.jsには、複雑な視覚化とアニメーションを?qū)g行できるパフォーマンスの違いはありますかスムーズに。ただし、JavaScriptライブラリのパフォーマンスは、コードの複雑さ、コードを?qū)g行しているデバイスの機(jī)能、Webブラウザー內(nèi)のJavaScriptエンジンの効率など、さまざまな要因の影響を受ける可能性があります。そのため、最適なパフォーマンスを確保するために、さまざまなデバイスとブラウザでコードをテストすることをお?jiǎng)幛幛筏蓼埂￥悉?、はい、Process.jsとP5.jsの両方を、他のJavaScriptライブラリまたはフレームワークと組み合わせて使用??できます。ただし、潛在的な互換性の問(wèn)題を認(rèn)識(shí)し、すべてが予想どおりに機(jī)能するようにコードを徹底的にテストすることが重要です。 > Processing.jsとP5.JSの両方に、豊富な學(xué)習(xí)リソースが利用可能です。 Processing.jsについては、チュートリアル、例、リファレンスガイドがある公式処理Webサイトから始めることができます。 P5.JSの場(chǎng)合、チュートリアル、例、リファレンスガイド、フレンドリーなフォーラムがある公式P5.JS Webサイトから始めることができます。さらに、両方のライブラリで利用可能な多くのオンラインチュートリアル、ビデオ、コースがあります。
以上がProcessing.js vs P5.js-違いは何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
Jul 04, 2025 am 12:42 AM
JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動(dòng)的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場(chǎng)合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時(shí)リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時(shí)間を短縮します。開(kāi)発中、不必要なグローバル?yún)⒄栅虮埭?、パフォーマンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開(kāi)始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡(jiǎn)潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡(jiǎn)素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問(wèn)題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書(shū)くのに役立ちます。
JavaScript Timeオブジェクト、誰(shuí)かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開(kāi)発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭(zhēng)、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開(kāi)発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭(zhēng)は、論爭(zhēng)を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書(shū)を提出しました。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無(wú)料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長(zhǎng)期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
Jul 04, 2025 am 02:42 AM
iife（即時(shí)インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競(jìng)合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見(jiàn)えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開(kāi)発者は、スクリプト、スタイルシート、寫真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場(chǎng)合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
