目次● インストール● とりあえず使ってみる● 動かしてみる● 函数の作り方● クラス● プログラムの慣習● まとめ

1. インストール● “processing”で検索● “processing.org”というサイトにアクセス

1. インストール● “Download Processing”をクリック● 自分の環境にあったものをダウンロード

1. インストール● Windowsの人はzipファイルを適当な場所に展

開するだけ● Macの人は.dmgファイルを使っていつも通り

にインストール

→ 　　　をダブルクリック

→ それでは使ってみよう！

2. とりあえず使ってみる● 左上の再生みたいなボ

タンを押してみよう！● これがプログラムを走

らせるボタン。一番良く使う

● “Ctrl+R”(Windows)● “Command+R”(Mac)

これ

2. とりあえず使ってみる● こんなのが出たらOK● ここに色々、絵を書いていきます

● プログラムを書いてみよう

2. とりあえず使ってみる

void setup(){ background(0); //背景を黒に size(300,300); //ウィンドウを300x300に smooth(); //きれいに表示させるための呪文}void draw(){ fll(255,0,0); //RGBで塗りつぶしの色指定 noStroke(); //輪郭線なし ellipse(100,100,50,50); //中心(100,100)幅高さが50の楕円(この場合は正円)を描く noFill(); //塗りつぶしなし stroke(0,0,255); //輪郭線の色指定 rect(200,150,80,100); //左上の頂点が(200,150)の幅80,高さ100の長方形を描く}

＊これを打ち込んで、走らせてみてください。＊走らなければ何かミスがあります。

※　数学とは違い、コンピュータではy軸が下向きなので注意

2. とりあえず使ってみる● こんな感じな画面が出

ましたか？

● 数字の部分をいろいろ弄ってみてください

● どの数字がどこに対応してるか分かると思います

3. 動かしてみる● Processingでは

● setup()を一度だけ実行● draw()を繰り返し実行しています。

void setup(){ ...}

void draw(){ ...}

3. 動かしてみる● それじゃ、さっきのプログラムを変えて、

円を回転させてみよう。foat phase = 0;void setup(){ background(0); size(300,300); smooth();}void draw(){ fll(255,0,0); noStroke(); ellipse(150+100*cos(phase),150+100*sin(phase),50,50); phase += TWO_PI / 360; //回転角を1°ずつふやす。 while( phase > TWO_PI ) phase -= TWO_PI; //回転角を0°から360°の間に}

3. 動かしてみる● 表示がおかしい。● コンピュータは

描き直すのではなく上塗りしていく　　　↓

● 一度塗りつぶそう。

3. 動かしてみるfoat phase = 0;void setup(){ background(0); size(300,300); smooth();}void draw(){ Background(0); //塗りつぶし fll(255,0,0); noStroke(); ellipse(150+100*cos(phase),150+100*sin(phase),50,50); phase += TWO_PI / 360; while( phase > TWO_PI ) phase -= TWO_PI;}

3. 動かしてみる● できた！

● 今まで出てきた函数– size(), background(),

smooth(), fll(), noFill(),stroke(), noStroke(),ellipse(), rect(), cos(), sin()

– これ以外にもいっぱい函数あります。

3. 動かしてみる● 函数をドラッグして選択して

Ctrl(Command)+Shift+F● するとリファレンス(説明書)が出てきます

4. 函数の作り方● 函数とは

● いくつかの処理をまとめたもの– 同じ処理を何回も書いてもいいんだけど面倒– 処理を読みやすい

例えば、– 「赤く塗りつぶす」「輪郭線をなくす」「円を描く」

という3つの処理ではなく、「赤い輪郭線のない円を描く」という1つの処理にまとめると、何回も書くときに楽だし、読みやすい。

4. 函数の作り方● 函数を作るには次のようにかきます。

型　函数名(引数1, 引数2, ...){処理.....return 返り値;

}

● 例えば、– 整数aと整数bを受け取って、足し合わせる函数

int add(int _a, int _b){int c = _a+_b;return c;

}

4. 函数の作り方● 型とは

コンピュータが扱うデータはいろいろある。e.g.) 整数、実数、文字、真偽値 etc.

それぞれを型と呼ぶ。具体的には

整数型:　int型など実数型: foat型など文字型: char型, ( String型 )など真偽値: bool型

● さっきの函数は整数の足し算で、整数を返すので函数の型としてint型がつかわれている。

4. 函数の作り方● 一度函数を作ってしまえば、そのプログラム内

では、用意されてる函数(ellipseとか)と同じように使えます。

● 昔、作った物で「何をやってるんだ？」ってなることが結構ある。一つのまとまった処理を函数にまとめておくと、後から見ても見やすい。

5. クラス● クラスとは

いろんな数値や函数をもったモノを作る「設計図」

● 具体的には● 車(car)という物には燃料(fuel)という数値や走る

(run)という機能を持っている。– 車の燃料→car.fuel– 車が走る→car.run()

● クラスの中の函数のことを特にメソッドという

5. クラス● クラスはあくまで設計図● 設計図をもとにモノを作らないといけない

– このモノをインスタンスという– このモノを作ることをインスタンス化という

● 逆にいうと、– 一度、設計図を作ると同じ物を大量生産できる

5. クラス● クラスの作り方

class クラス名{修飾子 型 変数...コンストラクタ修飾子 型 メソッド(引数){

}...}

5. クラス● 修飾子とは

public, private, protectedの三つある– public　→　全体に公開– private　→　公開しない– priotectedについては最初のうちは必要ないので省略

– 公開するとクラスの外から変数を書き換えることができて便利

– でも書き換える必要がないものを公開してしまうと、間違えて書き換えてしまい、バグがおきることがある。

– イメージとしては時計● 使ってる人は針だけ見えればいい。● 中の構造は隠しておかないと、間違って壊してしまう。

5. クラス● コンストラクタ

コンストラクタとは初期化するための函数で、クラスをもとにインスタンスが作られるときに実行されます。

● コンストラクタの作り方クラス名(引数){

処理...}

5. クラス● だいたいこんな形になる。

class Car{public foat fuel;...Car(int _fuel){

fuel = _fuel;...

}public void run(){vel += 1;pos += vel;fuel -= 1;...

}...

}

5. クラス● インスタンス化の仕方

Car car1;void setup(){

car1 = new Car(100); // 最初の燃料が100}

● 流れとしては– 「car1っていうのはCarである」– 「Carに100を入れて新しく作ってcar1とする」

● ちょっと冗長ですが。

5. クラス● メソッドの使い方

car1.run();　のように使う。

● 変数の変更の仕方car1.fuel = 200;のように使う。

6. プログラムの慣習● インデント

{ }のまとまりがわかりやすいように字下げする。● 例

void draw(){for(int i=0; i<10; i++){

if( i > 5 ){print(i);

}}

}● こうすると括弧の数を間違えたりしにくいし、どこ

までが条件分岐で、どこまでが繰り返しかなどが分かりやすい。

6. プログラムの慣習● 変数名、函数名は小文字から始める。

● 例foat fuel;int add(int _a, int _b){

...}

● クラスの名前は大文字から始める● 例

class Car{...

}

6. プログラムの慣習● 単語の区切れ目は大文字にして表す

● 例class SuperCar{

...}

int posX;

int addNumbers(int _a, int _b){...

}● こうすると単語として読みやすくなる。

6. プログラムの慣習● 函数の引数に_(アンダーバー)をつける

● 例int add(int _a, int _b){

...}

● 分かりやすくするために、名前を付けると名前がぶつかることがある。

● そんなとき、こうすると、同じ名前の変数があったときに区別することができる。

7. まとめ● これだけ分かってれば、あとは自分で調べて勉強できると思います。

● 勉強に役立つサイト– OpenProcessing(http://www.openprocessing.org/)

● Processing関連のサイトはProce55ingで検索するとよく引っかかります。

● ProcessingのサイトでReferenceに行くと、どんな函数があるのか調べられます。

7. まとめ● 絵を出すだけでなく、音を出したり、電子工作

と組み合わせたりするために「ライブラリ」と呼ばれる物もあります。

● いろいろ組み合わせると楽しい作品が作れると思います。

● それでは　Enjoy Processing!