Skip to content

Language Settings

はじめよう!

このページでは、p5.jsプロジェクトのセットアップと最初のスケッチの作成方法を説明します。 最も簡単な方法は、 p5.js editorを使うことです。Webエディタを開き、 はじめてのスケッチまでスクロールダウンしてください。p5.jsのデスクトップ版で作業したい場合は、 次の項目までスクロールして下さい (p5.jsライブラリのダウンロード).

はじめてのスケッチ

Code snippet with ellipse

p5.js web editorに、以下のコードがあるはずです:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

background(220);の後に、次の行を記述します: ellipse(50,50,80,80);.

これで、あなたのコードは次のようになるはずです:

Code snippet with ellipse


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

先ほど追加した行は、中心が左から50ピクセル、上から50ピクセルで、幅と高さが80ピクセルの楕円を描画します。

エディターで再生ボタンを押すと、あなたのコードが表示されます!

Note for screenreader users

スクリーンリーダーを使用する場合は、p5オンラインエディターでアクセシブル出力をオンにし、 エディター以外ではhtmlにアクセシビリティライブラリーを追加する必要があります。 詳しくは、p5をスクリーン・リーダーで使うチュートリアルをご覧ください。 using p5 with a screen reader tutorial.

正しく入力されていれば、表示ウィンドウにこのように表示されます:

canvas has a circle of width and height 50 at position 80 x and 80 y

何も表示されない場合は、エディタが入力した内容を処理するのに時間がかかっている可能性があります。 数字は括弧の中に入れ、その間にカンマを入れ、行末はセミコロン、ellipseは正しいスペルであるか確認しましょう。

プログラミングを始めるにあたって最も難しいことの1つは、構文について非常に細かく指定しなければならないことです。 ブラウザは常にあなたの言いたいことを理解できるほど賢くはありませんし、 句読点の配置についてもかなりうるさくなります。少し練習すれば、慣れるでしょう。 エディターの左下には、コンソールセクションがあります。 ここでは、エディタが発見したエラーの詳細を含むメッセージを見ることができます。

Code snippet with interaction

次に、ちょっと刺激的なスケッチに飛びます。前回の例を修正して、次のように試してみましょう:


function setup() {
  createCanvas(400, 400);
}

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

このプログラムは、幅400ピクセル、高さ400ピクセルのキャンバスを作成し、マウスの位置に白い円を描き始めます。 マウスのボタンが押されると、円の色が黒に変化します。 コードを実行し、マウスを動かし、クリックすると体験できます。

canvas has multiple circles drawn on it following the path of the mouse

次は何をする?

自分のコンピュータにエディタを使ってp5.jsをセットアップする

自分のコンピュータでp5.jsを実行するには、コードエディタが必要です。 あなたの好きな コードエディタ を選んでください。 セットアップの例として Sublime Text 2 のセットアップ手順を以下に示しています。 その他に,次のようなエディタも使用できます。 BracketsAtom. もしスクリーンリーダーを使用していて、p5 Webエディタを使用していない場合は、 次の様なエディタの使用もお勧めします。 Notepad++Eclipse.

p5.jsライブラリのダウンロード

p5.jsを初める最も簡単な方法は、 p5.jsライブラリの完全版 に付属している空のサンプルを使用することです。

ダウンロード後、ローカルサーバを設定する必要があります。ローカルサーバの設定方法は こちら 。ダウンロードしたフォルダ内でローカルサーバを起動し、ブラウザで次のURLにアクセスして下さい http://localhost:{ポート番号}/empty-example

index.htmlを見ると、p5.jsというファイルへのリンクがあることがわかります。 もし、縮小バージョン(ページの読み込みを速くするために圧縮されたもの) を使用したい場合は、リンクをp5.min.jsに変更します。

<script src="../p5.min.js"></script>

オンラインで公開されているp5.jsライブラリを使用する

あるいは、オンラインで公開されている p5.js ファイルにリンクすることもできます。 p5.js のすべてのバージョンは、CDN (コンテンツデリバリーネットワーク) に保存されています。 これらのバージョンの履歴は p5.js CDNから見る事ができます。CDNを使う場合、リンクを以下のように変更できます:

HTMLのサンプルは次の様になります:


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>
        

開発環境

Sublimeを開きます。FileメニューからOpen...を選び、htmlとjsのファイルがあるフォルダを選びます。 左側のサイドバーには、一番上にフォルダ名、その下にフォルダに含まれるファイルのリストが表示されているはずです。

sketch.jsファイルをクリックすると、右側に表示され編集することができます。 p5 starter code opened up in sublime editor."

ファイルマネージャーからindex.htmlファイルをダブルクリックしてブラウザで開くか、 ブラウザのアドレスバーに次のように入力してください: file:///the/file/path/to/your/html (ローカルサーバを使用している場合は http://localhost:{ポート番号}/empty-example と入力してください。) これにより、ブラウザでindex.htmlが開かれスケッチを表示する事ができます。

このチュートリアルの一部は、Lauren McCarthy、Casey Reas、およびBen Fryによる書籍 「Getting Started with p5.js ©2015」から抜粋しています。 著作権は2015年に所有されています。全著作権所有。最終更新は、p5.jsコントリビュータカンファレンス2019で行われました。