Language Settings

Processing fun times JavaScript quirkiness

Processing simplicity times JavaScript flexibility

Processing intuition times JavaScript power

Processing creativity times JavaScript dynamism

Processing community times JavaScript community

the power of Processing times the reach of JavaScript

入門

このページでは、p5.jsプロジェクトの設定と最初のスケッチの作成について説明します。 If you'd like to start with the new p5.js Web Editor, you can jump down to Your First Sketch.

ダウンロードとファイルの準備

最も簡単な方法は、 ダウンロードしたp5.js に付属されている空のサンプルを使用することです。

index.htmlを開くと、p5.jsファイルにリンクしていることがわかります。 もし、圧縮版(ページの読み込みを高速化するために圧縮)を使用する場合は、リンクをp5.min.jsに変更してください。

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

また、オンラインでホストされているp5.jsファイルにリンクすることもできます。 p5.jsのすべてのバージョンは、CDN(コンテンツデリバリネットワーク)に格納されています。 これらのバージョンの履歴は、 p5.js CDNを参照してください。 この場合、リンクを次のように変更することができます。

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

サンプルのHTMLページは次のようになります。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

codepenのテンプレートを使用して開始することもできます。

環境

任意の エディタ を使用できます。 Sublime Text 2 でセットアップする方法は以下の通りですが、他の素晴らしいエディタはBrackets, AtomOpenProcessing. があります。If you are a screen reader user and not using the p5 web editor, you may want to use Notepad++ or Eclipse.

まずSublimeText 2を開きます。[File]メニューの[Open...]を選択し、htmlファイルとjsファイルが格納されているフォルダを選択します。左側のサイドバーには、上部にフォルダ名が表示されて、下にファイルが表示されます。

sketch.jsファイルをクリックすると、右側の編集エリアが開きます。 p5 starter code opened up in sublime editor.

ファイルマネージャでindex.htmlファイルをダブルクリックするか、アドレスバーに 「file:///htmlファイルのパス」 と入力することでスケッチを表示します。

最初のスケッチ

Processing users may want to check out the Processing transition tutorial.

エディタで次のように入力します。


function setup() {

}

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

このコードは、「左から50ピクセル、上から50ピクセルに幅と高さが80ピクセルの楕円を描く」という意味です。

スケッチを保存し、ブラウザでページビューを更新します。正しくプログラムが動作した場合は、ブラウザに次のように表示されます。

Note: If you are using a screen reader, you must either turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn about using p5 with a screen reader click here and to learn more about the accessibility library here.

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

正しく動作しなかった場合は、何も表示されないことがあります。 この場合は、先ほどのコードを正確にコピーしているか確認してください。数字を括弧で囲み、数字の間にカンマを入れ、行末にセミコロンを付ける必要があります。

プログラミングを始める際に最も難しいことの1つは、構文について非常に厳密に書かなければいけないという点です。 ブラウザは、あなたがしたいことを常に正しく理解してくれませんし、記号の配置などについて非常に厳格です。少し練習すればすぐに慣れます。 使用しているブラウザによっては、JavaScriptの「コンソール」でエラーの内容を表示することもできます。 たとえば、Chromeの場合は、[表示]> [開発者 / 管理]> [JavaScript コンソール]の順に選択することで表示されます。

次に、もう少しエキサイティングなスケッチに進みましょう。先ほどの例を削除して、これを試してみましょう:


function setup() {
  createCanvas(640, 480);
}

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

このプログラムは、幅640ピクセル、高さ480ピクセルのウィンドウを作成し、マウスの位置によって白い円を描きます。 マウスのボタンを押すと、円の色が黒に変わります。 このプログラムの要素については後で詳しく説明します。 今のところ、コードを実行し、マウスを移動してクリックすることで、それを体験できます。

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

次はどうする?

このチュートリアルの一部は、Lauren McCarthy、Casey Reas、Ben Fry、O'Reilly / Make 2015によるp5.jsの入門から修正されました。Copyright © 2015 Lauren McCarthy, Casey Reas, and Ben Fry. All rights reserved.

 

*

Processing p5.js Processing.py Processing for Android Processing for Pi

Processing Foundation