yuga のすべての投稿

第4回 – IF(条件分岐)

if文とは、大抵のプログラミング言語に存在する構文で、「AならばBする、AでないならばCする」という考え方を基本とする、命令の実行の有無や順番などを制御するための構文です。
 
if文は ifというキーワードと、条件を決める条件式、そして条件に合致した時に実行される内容を記すブロックの3つからできています。

 if(条件式){
 実行する内容
}

例えば、xという変数の値が100よりも大きい時だけもう一つ円を描いて欲しい、という場合

 if(x > 100){
 ellipse(50,50,50,50);
}

となります。

条件式とは

条件式はその式が正しい true か、間違っている false かの2値によってそのブロックを実行するかどうかを決定します。
なので、
if( true ) { }
と書けば、必ず{ }の中が実行されますし、
if( false ){ }
と書けば、{ } の中は絶対に実行されません。(こんな条件分岐をいつ使うのかはわかりませんが)

また、条件分岐専用にboolean型という変数の型が用意されています。
boolean型は trueか falseの2種類の値のみを格納する事が出来る変数で、int型のように数値を入れたりすることは出来ません。
boolean型についてはまたのちほど詳しくお伝えします。

比較演算子って?

条件式には、true false boolean型の変数の他に、比較演算子を使うことが出来ます。

比較演算子には
a < b (aがbより小さい) a > b (aがbより大きい)
a == b (aがbと等しい)
a >= b(aがbと等しいか大きい)
a <= b(aがbと等しいか小さい) などがあります。 例えば、 10 > 100
の場合、この条件式の結果はfalseとなります。
なので、ifの条件式に 10 > 100 と書くのと、 falseと直接書くのは同値です。
これでは条件式の意味がないので、通常は変数を使って何かと比較する事が多いでしょう。
また、比較演算子を複数使って
10 > 100 == false
と書けば、この条件式の結果はtrueになります。(よって、if文の中身が実行されます)。
10 > 100の結果が falseになり、 false == falseという条件式は trueだからです。

例を見てみよう

例はこのままprocessingのウインドウに貼り付けて実行してみることが出来ます。
コピーでも良いですが、自分の手で書き写してみると大きな学習効果が期待できます。


int ellipseSize = 50; // int型(整数だけが入る型)の変数を、ellipseSizeという名前で宣言する。

void setup(){
  size(800,800); //サイズ800x800で、背景黒のウインドウを作成。
  background(0); //setupの中身は、プログラムをスタートした時に1度だけ実行される。

}

//その後draw(){ から}までの間を秒間30回程度繰り返し実行する。
//その1回1回の事をフレームと呼ぶ。


void draw(){

  background(0);//まず最初に背景を黒で塗りつぶす

  ellipse(400,400,ellipseSize,ellipseSize);//次に左から400、上から400の位置に円を書く。
  					//大きさは、最初に宣言した変数のサイズ。

  if(ellipseSize < 200){//ここでif文が出てくる。
    			//もしも、ellipseSizeという名前の変数が、
    			//200よりも小さかったら、この{}の中が実行される。
    			//実行されると変数に1が足される。
    ellipseSize = ellipseSize + 1;
  }
  
    if(ellipseSize >= 200){//もしも、変数ellipseSizeが200よりも大きかったら、ellipseSizeの中身を50にする。
    ellipseSize = 50;
  }

}


問題

 例1に倣って、最初200の大きさの円が毎フレーム1ずつ小さくなり、50より小さくなったら200に戻る、というプログラムを書きなさい。

第3回 – 変数について

変数 というのは、値を格納しておくことが出来る箱のようなもので、型と名前を順番に書くことで宣言(作成)する事が出来ます。

変数を使えると何が嬉しいのかというと、命令によって描いたオブジェクト(図形)を、時間経過やイベントに応じて移動させたり変化させたりということが比較的簡単に出来きます。(嬉しい)

最近では変数を使わない(すべて定数にしてしまう)プログラミング手法が注目されていますが、とりあえず入門の間はそのことは考えずに進めていきたいと思います。

processingには様々なデータ型が存在します。
int(整数の値を入れておける箱)
float(小数点の付いている値を入れておける箱)
String(文字列を入れておける箱)

などです。
int型に小数点付きの数値を入れようとするとエラーが起こります。これは、箱の型と実際に入れようとしている値の型が合っていないからです。
つまり、型は変数にだけあるのではなく、値にもあるということです。
が、ちょっとややこしいのでまだ考えなくても良いでしょう。

例を見てみよう

int x = 0;

これを、void setup(){}の前に書く。そして、400をxに置き換える。

int x = 0;

void setup(){

size(800,800);

}

void draw(){

ellipse(x,400,100,100);

}

これだけだと、円が半分ちょん切れたような状態で表示されるだけだと思います。

では、ellipseの前に、

x = x+1;

という一行を挟んでみてください。

processingにおいて = とは、「同じ」という意味ではなく、右辺を左辺に「代入」するという意味になります。

今回の場合、最初に宣言した変数 x は 自分自身 x の値に + 1 した数を、自分の中に代入せよ、という意味になります。

つまり

最初宣言された時点ではxの中には0が入っている。

x = x + 1;

上の行は、0であるxに、1を足した数を代入します。

1周めのdrawの命令が全て実行された時に、xの中は1になっています。

次に

x = x+1;

が、実行される時には、xの中身は既に1になっているので、

1 + 1がxに入れられて、xの中身は2になります。

これが秒間に60回行われた結果、円が少しずつ右に移動していく、という事が起きます。

しかし、このままでは円は何かを引きずったような跡が残ってしまっています。

これは、前のフレーム(drawの中が1回実行されて画面が更新される事を、フレームと呼びます)に描写された円が消されずに残ってしまっているからです。

そこで、

x = x + 1;

の前にこの一文をいれてあげましょう。

background(0);

background(0)は、()の中の数字の明るさで全ての画面を塗りつぶす、というメソッドです。0だと真っ黒、255だと真っ白です。その中間は灰色になります。

これによって、毎フレーム真っ黒に上書きされ続けるため、円は円だけで真っ黒な空間を移動していく、というわけです。

練習問題

問題 1

2つの同じ大きさの円が、右端と左端から出現し、真ん中で交差して端に消えていく、というプログラムを書きなさい。

問題 2

ウインドウの4隅から円が出現し、ウインドウの真ん中で重なって、端に消えていくプログラムを書きなさい。

問題 3

ウインドウが徐々に黒から白になっていくプログラムを書きなさい。

第2回 – 設定をしよう

基本的な設定

さて、前回ダウンロードしたProcessingを立ち上げると、このような画面が表示されます。(mac版)

sketch_160724a___Processing_3_1_1.png

この白い部分にコードを書いていくわけだけれど、まず最初にしておいた方が良い設定があります。

メニューバーの環境設定から、チェックを画像のようにしてください。

設定.png

特に、複雑なテキスト入力を有効にする
と、
コード補完
にチェックを入れるのを忘れないでください。
これでコード補完が有効になって、生産性がかなり向上します。

ためしに、sと入力してcontrol + spaceを押してみてください。
sで始まるprocessingの予約語や命令がズラっと並びます。
この機能は、自分でかってにつけた変数名なども補完してくれるので、長い変数名を気軽に使うことが出来るようになります。
また、
//
と入力してその後日本語で何か打ってみてください。
多分表示されたのではないでしょうか。
Windowsの人は、コンソールのフォント をMSゴシックか何かにしないと文字化けしてしまうかも知れないので、同じく設定画面の「コンソールのフォント」をMSゴシックに変更してください。

ためしに何か表示させてみよう。

早速、以下のコードを白い部分に書いてみてください。

void setup(){

size(800,800);

}
void draw(){

ellipse(400,400,100,100);

}

そして、command + r (macの人) control + r (windowsの人)を押してみてください。
灰色のウインドウが現れて、真ん中に円が描かれているだけのウインドウが開いたと思います。

 では次に、ellipse(400,400,100,100)の400の数字を変えてみたり、他の部分の数字を変えてみたりしましょう。
 もう大体なんとなく、このプログラムが何を示しているか解ってきたと思います。

size(横幅、縦幅);
ellipse(横の位置(画面の左端から何ピクセル離れているか),縦の位置(画面の上から何ピクセル離れているか、)円の横幅,円の縦幅);

 まず、最初に void setup(){}の { と }の間に書かれた命令が、一度だけ実行される。
その中に記述されている命令は、

size(800,800)

だけではあるのだけれど、これがウインドウの大きさを決めています。
size()という命令(Method/メソッドと呼ぶ)は、setupの中でだけ有効なメソッドで、drawの中に書いても無視されるので必ず void setup(){ } の中に書きましょう。

そして、{}の中に書かれた命令文などは、行の最後に ; (セミコロン)を付ける、という約束があります。
必ずつけましょう。そうしないと、パソコンが行の終わりを認識出来なくてエラーが起きます。

そして、その後でvoid draw(){}の{と}の間に書かれた命令が、おおよそ秒間に60回連続で実行され続けます。
秒間に60回実行され続ける、の意味が少し解りづらいと思うので、次回わかりやすい方法を試していきます。

第1回 – Processingとは

Processingとは

Processingは、Javaというプログラミング言語を単純化して、ヴィジュアルやアーティスティックな表現に特化したものです。

Javaのややこしい部分は隠されていて、さらに便利な機能が沢山追加され、プログラマでなくとも使いやすい言語に仕上がっています。

これはJavaの特徴でもあるのですが、ProcessingはMacでもWindowsでもLinuxでも同じように動作します。

そして環境を構築するのがとんでもなく簡単で、そのうえ無料です。

作品例

私の作った作品をいくつか紹介します。
これは私の代表作…などではなく、基本的には1時間以内で作った遊びのようなものです。
少し慣れれば、誰でもこのくらいは1時間以内に作ることが出来るようになります。

花火の映像から音楽を作成。

ただし、映像は長久手納涼祭で撮影したものですし、音はサンプリング音源を使っています。

こちらキーボードの演奏情報をビジュアライズしたもの。

midiを受け取ってビジュアライズしています。

インストール

まず、公式サイトからProcessing本体をダウンロードしてきましょう。
https://processing.org/
上記のサイトに行き、Download Processing → No Donation(寄付をしたい人は金額を選んでください!)→ Download

そして、自分の使っているパソコンのOSを選択してください。
Macの人が多いでしょうか。
現在(2016/07/1)最新版は3.1.1です。

ソフトをインストールしたら、環境構築はそれで完了です。