はじめよう！

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

はじめてのスケッチ

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


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

function draw() {
  background(220);
}

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

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


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

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

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

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

スクリーンリーダーを使用する場合は、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つは、構文について非常に細かく指定しなければならないことです。ブラウザは常にあなたの言いたいことを理解できるほど賢くはありませんし、句読点の配置についてもかなりうるさくなります。少し練習すれば、慣れるでしょう。エディターの左下には、コンソールセクションがあります。ここでは、エディタが発見したエラーの詳細を含むメッセージを見ることができます。

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


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

次は何をする？

詳しい機能について学習とサンプルを見てみる
The Coding TrainとKadenzeのビデオチュートリアルを試す
完全なドキュメントについてリファレンスを確認する
p5をスクリーンリーダーで使用したい場合は次を参考にする、p5 with a screenreader tutorial.
過去にProcessingを使用していた方は、Processing移行チュートリアルを読んで、Processingからp5.jsへの変換方法と、両者の主な違いについて学んでください

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

自分のコンピュータでp5.jsを実行するには、コードエディタが必要です。あなたの好きなコードエディタを選んでください。セットアップの例として Sublime Text 2 のセットアップ手順を以下に示しています。その他に，次のようなエディタも使用できます。 Brackets や Atom. もしスクリーンリーダーを使用していて、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を使う場合、リンクを以下のように変更できます:

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

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が開かれスケッチを表示する事ができます。

Language Settings