JavaScript

初心者でも簡単！JavaScriptのp5.jsでブラウザ上にスケッチを描く完全ガイド

  /

今回は、エンジニアだけでなく初心者の方々にも分かりやすく、ブラウザ上で手軽にグラフィックスを描画できるJavaScriptライブラリ「p5.js」についてご紹介します。コーディングを学び始めたばかりの方や、アーティスト、デザイナーのみなさんにも役立つ内容をまとめました。

Contents

p5.jsとは

p5.jsは、Web上でグラフィカルな表現を手軽に実現できるJavaScriptライブラリです。Processingというプログラミング言語の精神を受け継ぎ、Webの世界に再解釈しています。
公式サイト：p5.js
によると、「アーティストやデザイナー、教育者、初学者向けのコーディング環境」と位置付けられています。つまり、複雑なコーディング知識がなくても、創造的な作品を作成することが可能です。

p5.jsの簡単な使い方

それでは、p5.jsを使って、ブラウザ上でどのように描画を行うのか見てみましょう。まず、p5.jsのライブラリをCDN（Content Delivery Network）から読み込みます。次に、マウスを動かすだけで円を描けるシンプルなJavaScriptのコードを記述します。

p5.jsファイルをCDNから読み込み、ブラウザ上でマウスを動かすと、円（〇）を描画するサンプルJavaScript処理になります。
こちらがサンプルコードです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

<script type="text/javascript">
function setup() {
  createCanvas(1200, 500);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}
</script>

　
このコードを実行すると、ブラウザ内でマウスをクリックしながら動かすことで、白黒の円が描かれます。

p5.jsのさらなる探求

p5.jsは、初心者にも優しいライブラリですが、さまざまな機能やテクニックがあります。
もっと学びたい方は、公式サイトの「p5.js｜get started」セクションをチェックしてみてください。

また、プログラミング環境を自分のPCにセットアップしなくても、Webブラウザ上で直接コーディングができる「p5.js Web Editor」も非常に便利です。

p5.jsライブラリを使った描画サンプルデモページ

言葉だけでは伝わりにくいかもしれません。そこで、実際にp5.jsを使って作成したデモページを用意しました。是非体験してみてください！

p5.jsライブラリを使った描画サンプルデモページ

まとめ

今回は、初心者から上級者まで幅広く楽しめるJavaScriptライブラリ「p5.js」についてご紹介しました。コーディングに興味はあるけど、なかなか一歩が踏み出せない方、創造的な表現に挑戦したいアーティストのみなさんにとって、p5.jsは素晴らしいツールです。この記事が皆さんの創造性を刺激する一助となれば幸いです。

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

p5.js ライブラリ 描画
関連記事