今回はProcessingとp5.jsについてのお話です。
私はまだ始めたばかりなのですが、とても楽しいのでProcessingとp5.jsの魅力を伝えたいと思い、それぞれのツールの特徴、コードの違い、JavaScriptとの関連性、そして実際にp5.jsを使って作成した作品例を紹介していきます。
Processingとは？
Processingの特徴
- 初心者向け: Processingは、複雑な構文を避けたシンプルな記述で、プログラミング経験がない人でも作品作りを始められます。
- インタラクティブ: Processingは、マウスやキーボード入力、センサーデータなどを利用して、ユーザーとのインタラクションを簡単に実現できます。
- ビジュアル表現: Processingは、2D/3Dグラフィック、アニメーション、画像処理など、様々なビジュアル表現機能を備えています。
- オープンソース: Processingはオープンソースであり、無料で利用できます。また、活発なコミュニティが存在し、情報収集や作品共有などが容易です。
Processingでできること
- アート制作: 図形や色を使ったビジュアルアートの制作が可能です。
- ゲーム制作: シンプルな2Dゲームから複雑なインタラクティブゲームの開発ができます。
- 画像処理: 画像の加工やフィルタリングなど、様々な画像処理が行えます。
- 音声処理: 音声データの解析、変換、合成などができます。音声認識、音声合成、音声エフェクト、音声分析などが含まれます。
このようにProcessingはクリエイティブなプログラミング言語ですが、ウェブサイトで直接実行するためにはいくつかの手順が必要です。
そこで登場するのがウェブブラウザ上で動作するJavaScriptベースのコーディングライブラリp5.jsです。
p5.jsとは？
p5.jsは、ProcessingのJavaScriptライブラリです。 Processingのコンセプトを継承し、Webブラウザ上で動作する作品を作ることができます。 JavaScriptという言語を使うため、Web開発の知識があればより高度な作品制作も可能です。
p5.jsの特徴
- Webブラウザ上で動作: p5.jsは、Webブラウザ上で動作するため、インストール不要で手軽に利用できます。
- Processingとの互換性: p5.jsは、Processingの構文と機能をほぼそのまま再現しており、Processingの経験者はスムーズに移行できます。
- JavaScriptとの連携: p5.jsは、JavaScriptと連携させることで、より高度な作品作りが可能になります。
p5.jsは、Processingよりも手軽に始められること、Webブラウザ上で動作することから、近年人気が高まっています。特に、WebデザインやWebアプリケーション開発の現場で、インタラクティブな要素やビジュアル表現を取り入れるために利用されるケースが増えています。
さて、p5.jsは、Processingの構文と機能をほぼそのまま再現と説明しましたが、文字通りほぼそのままであり、若干違いがあります。どのように違うのでしょうか。
Processingとp5.jsの違い
- Processing:
- 言語: Javaベースのプログラミング言語です。
- 環境: 独自のIDEを使用してデスクトップアプリケーションやインスタレーションを作成します。
- 用途: ビジュアルアート、アニメーション、音声処理など、幅広いクリエイティブプロジェクトに適しています。
- p5.js:
- 言語: JavaScriptベースのライブラリであり、ウェブブラウザ上で動作します。
- 環境: ウェブページ内で直接実行できます。
- 用途: ウェブアプリケーション、インタラクティブなウェブコンテンツ、ビジュアルアートなどに適しています。
p5.jsはJavaScriptライブラリであるため、JavaScriptの知識があればより深く理解することができます。 p5.jsで培った知識は、Web開発全般にも応用することができます。
さて、この投稿ページに私が実際にp5.jsで作ったものを載せようと思ったのですが、どうやらいくつか手順が必要なようです。
その手順についてはまた改めてご紹介します。
とりあえず、リンクは貼れるので、今回はリンク先をご覧ください。
作品はこちら。
