Processing Fan

    Processingを始めよう

    概要

    Processingのチュートリアルへようこそ
    これからWeb開発でよく使われるプログラミング言語JavaScriptを使ってProcessingを学んでいきます。
    プログラミングを全く経験したことがない方、JavaScriptを使ったことのない方は JavaScriptのチュートリアルも用意していますので、 まずはそちらを学習することをお勧めします。Processingのチュートリアル内では詳しくJavaScriptの説明は行いません。
    このチュートリアルでは、まず基本的な図形の書き方から始め、色の付け方、回転と移動、ランダム値の扱い方を学びます。 最後にユーザのマウスやキー入力を受け取り画面に変化を起こす方法も紹介する予定です。
    チュートリアルを終えるころには、素敵なアート作品・映像作品が自由に自分の手で作れるようになっているはずです。
    また、本サイトではチュートリアルを終えた方へ、チュートリアルのその先も勉強できる書籍を紹介しています。ぜひ参考にしてみてください。

    開発環境

    Processingはさまざまな言語から使うことができますが、JavaScriptはp5.jsという名前のライブラリを読み込むことによって 使えるようになります。
    JavaScriptのチュートリアルではブラウザのコンソールを使って実行していましたが、Processingで作品を作るときはファイルに プログラムを書き込んでいきます。

    では開発環境を準備しましょう。
    まずJavaScriptのファイルを作ります。以下の内容で作成してください。
    ファイル名はindex.jsが良いでしょう 

    
var w = 400;
var h = 400;

function setup(){
  createCanvas(w, h);
}

function draw(){
}

    次にJavaScriptファイルを読み込むhtmlファイルを作成します。
    JavaScriptファイルはhtmlファイルから呼ばれてはじめて動きます。
    ファイル名はindex.htmlが良いでしょう。ただし、index.jsとindex.jsは同じフォルダに入れておいてください。

    
<html>
  <head>
    <meta charset="UTF-8">
    // p5.jsの読み込み
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    // これから作っていくJavaScriptファイルの読み込み
    <script language="javascript" type="text/javascript" src="index.js"></script>
  </head>
  <body></body>
</html>

    templateというフォルダを作り、その中に上記のindex.jsとindex.htmlを入れておくと、 新しく作品を作るときに金型をコピペで作ることができるので便利です。
    このテンプレートファイルはこちらからダウンロードできます。

    setupとdrawとは

    チュートリアルの一番初めに、最も重要な関数setupとdrawを解説します。
    上記のJavaScriptのコードの中にsetupとdrawという関数を宣言しました。
    宣言しただけで使っていないようですが、実はsetupとdrawは特別な名前の関数で、 JavaScriptが読み込まれると自動的に実行されます。
    setupとdrawは必ず記述する関数です。

    setupはJavaScriptが読み込まれると最初に一度だけ実行される関数です。
    キャンバス（描画領域）のサイズや背景色など主に作品全体に関わる設定を記述します。
    createCanvas関数はキャンバスのサイズを設定する関数です。createCanvasも毎回必ず書きます。

    次にdrawです。
    drawはsetupが実行された後に実行され、図形描画の処理を書きます。
    drawは止めない限り永遠に何度も繰り返し実行されるので、アニメーション作品を作ることができます。
    デフォルトの設定では1秒間に60回drawが実行されます。
    1秒間に60回というのはフレームレートと言われていて、アニメーションのきめの細かさを表します。
    フレームレートは変更することもできますし、アニメーションにしないで静止画の作品ももちろん作ることができます。

    それではさっそくプログラムを書いていきましょう！
    まずは基本的な長方形の描画です。

    Next