Processing

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

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

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

●
Windowsの人はzipファイルを適当な場所に展
開するだけ
●
Macの人は.dmgファイルを使っていつも通り
にインストール

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

→ 　　　をダブルクリック

2. とりあえず使ってみる
●
左上の再生みたいなボ
タンを押してみよう！
これ ●
これがプログラムを走
らせるボタン。一番良
く使う
●
“Ctrl+R”(Windows)
●
“Command+R”(Mac)

●
こんなのが出たらOK
●
ここに色々、絵を書いていきます

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


＊これを打ち込んで、走らせてみてください。
＊走らなければ何かミスがあります。
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軸が下向きなので注意

●
こんな感じな画面が出
ましたか？

●
数字の部分をいろいろ
弄ってみてください
●
どの数字がどこに対応
してるか分かると思い
ます

3. 動かしてみる
●
Processingでは
●
setup()を一度だけ実行
●
draw()を繰り返し実行
しています。

void setup(){
... void draw(){
} ...
}

●
それじゃ、さっきのプログラムを変えて、
円を回転させてみよう。
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°の間に
}

●
表示がおかしい。
●
コンピュータは
描き直すのではなく
上塗りしていく
　　　↓
●
一度塗りつぶそう。

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;
}

●
できた！

●
今まで出てきた函数
– size(), background(),
smooth(), fll(), noFill(),
stroke(), noStroke(),
ellipse(), rect(), cos(), sin()
– これ以外にもいっぱい函数
あります。

●
函数をドラッグして選択して
Ctrl(Command)+Shift+F
●
するとリファレンス(説明書)が出てきます

4. 函数の作り方
●
函数とは
●
いくつかの処理をまとめたもの
– 同じ処理を何回も書いてもいいんだけど面倒
– 処理を読みやすい

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

●
函数を作るには次のようにかきます。
型　函数名(引数1, 引数2, ...){
処理.....
return 返り値;
}

●
例えば、
– 整数aと整数bを受け取って、足し合わせる函数
int add(int _a, int _b){
int c = _a+_b;
return c;
}

●
型とは
コンピュータが扱うデータはいろいろある。
e.g.) 整数、実数、文字、真偽値 etc.
それぞれを型と呼ぶ。
具体的には
整数型:　int型など
実数型: foat型など
文字型: char型, ( String型 )など
真偽値: bool型
●
さっきの函数は整数の足し算で、整数を返すので函
数の型としてint型がつかわれている。

●
一度函数を作ってしまえば、そのプログラム内
では、用意されてる函数(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);
}
}
}
●
こうすると括弧の数を間違えたりしにくいし、どこ
までが条件分岐で、どこまでが繰り返しかなどが分
かりやすい。

●
変数名、函数名は小文字から始める。
●
例
foat fuel;
...
}
●
クラスの名前は大文字から始める
●
例
class Car{
...
}

●
単語の区切れ目は大文字にして表す
●
例
class SuperCar{
...
}

int posX;

int addNumbers(int _a, int _b){
...
}
●
こうすると単語として読みやすくなる。

●
函数の引数に_(アンダーバー)をつける
●
例
...
}
●
分かりやすくするために、名前を付けると名前がぶ
つかることがある。
●
そんなとき、こうすると、同じ名前の変数があった
ときに区別することができる。

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

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

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

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

7. まとめ
●
絵を出すだけでなく、音を出したり、電子工作
と組み合わせたりするために「ライブラリ」と
呼ばれる物もあります。

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

●
それでは　Enjoy Processing!

Processing

More Related Content

What's hot

Similar to Processing

Processing