人工言語入門 A 2010

Processing入門

April 14, 2010

人工言語(= プログラミング言語)とは何か?

なぜプログラミングを学ぶのか

もしプログラミング言語がなかったら…

コンピュータはただの箱と化す
コンピュータだけでなく現代文明を構成するほとんどの機器が使えなくなる
電話、ATM、飛行機、電車、CD、
いまこうして便利な生活ができるのはプログラミング言語のおかげ

プログラミング言語の誤解

数学ができないから無理? → そんなことはない。プログラミングはロジック(論理)を組み立てる作業。考えようによっては、文系寄りの知識。
将来役に立たない? → プログラミングをする際の思考法は様々な分野に応用可能。
プログラミングはつまらない、無味乾燥 → プログラミングはとても楽しい作業! 自分の書いたプログラムが思い通りに動いた時の感動は大きい。

プログラミング言語を学ぶと

コンピュータをもっと根本から理解できる
コンピュータがもっと好きになる
プログラミング自体が楽しい!
論理的、抽象的な思考法が身に付く

人工言語(= プログラミング言語)とは

コンサート、運動会などで用いられる進行表(プログラム)

運動会のプログラムの特徴

一連の行動を記述
上から下へ、活動する順番に並んでいる
条件分岐：「雨天の場合は〜」
運動会に必要な手続をわかりやすく記述している
これがプログラム
手続 = アルゴリズム
記述方法 = プログラミング言語

プログラミング言語の歴史

ENIAC (1946)

世界最初のコンピュータとされるENIAC (1946) にはプログラミング言語がなかった
毎回配線をやり直して特定の計算を行っていた！

EDSAC(1949)、EDVAC(1951)

ジョン・フォン・ノイマンが、自分の名前でEDVACの仕組みについて発表
その仕組みに刺激されて、EDSAC誕生(1949)
実際にEDVACが完成したのはその後(1951)
世界最初の実用的なプログラム内蔵方式の電子計算機

人工言語 (= プログラミング言語) とは何か

一連の手順を記述したもの(運動会のプログラムと同様)
一連の手順 = アルゴリズム (algorithm)
アルゴリズムをコンピュータに伝えるための記述がプログラミング言語(= 人工言語)
運動会のプログラムの書き方がいろいろあるように、プログラミング言語はいろいろある
しかし、基本的な手続 (アルゴリズム) はみな共通

プログラミング言語と自然言語の違い

プログラミング言語 = 人間がコンピュータに命令を指示するために作られたもの
曖昧さがない (コンピュータが理解できない)
厳密な文法、合理的
自然言語：自然に発生して、時代と共に変化していく(誤用、流行)
プログラミング言語：言語設計者によって設計され、設計者の意図と作業によってのみ変更される

アルゴリズムの基本

基本となる3つのアルゴリズム：連続、分岐、反復

プログラミング言語の種類1：低級言語

低級言語：コンピュータ(CPU)自身が理解できる言語

機械語

機械(CPU)が直接理解し実行する言語
ビット(0, 1)だけで表現される
人間が理解することは困難：CPU毎に異なる
もっと分かり易い言語に変換する必要あり

アセンブリ言語

機械語を直接記述するのではなく、機械語の意味を表す略語で機械語を記述する
代表的な低級言語 → 機械語に近い言語 (劣っているという意味ではないので注意!)
機械語をそのまま変化しているので、機械語と同様CPU毎に異なる

コンパイラ、インタプリタ

機械語を人間が理解するのは非常に困難
より人間にわかりやすく翻訳する言語が必要 → 高級言語 (= 人間寄りの言語)
わかりやすいプログラミング言語でプログラミングをして、それを機械語に翻訳してコンピュータに実行させる
コンパイラ：プログラミング言語で書かれたプログラムを、コンピュータが直接実行可能な機械語のプログラムに変換する。高速
インタプリタ：プログラミング言語で書かれたソースコードを逐次解釈しながら実行する。速度はコンパイラと比較すると劣る

高級言語

記述レベルが実行レベルに比べて抽象度の高いプログラミング言語
人間にとってわかりやすい
CPUに依存した処理を書かなくてよい
メモリ制御、IO制御等CPUレベルの操作を意識しなくてよい

プログラミング言語の種類

手続き型：一連の手続きとして表現 – FORTRAN, COBOL, PL/I, Pascal, C, BASIC など
関数型：関数呼び出しの形で定義 – LISP, Haskell, Scheme, LOGO など
論理型：規則と事実に基づいて推論を行う – Prolog など
オブジェクト指向：オブジェクトを基本要素とする – SmallTalk, Java, Objective-C, C++, Python, Ruby, Javascript, C# など

プログラミング言語発展の歴史

Processing入門

プログラミング上達の近道

よくできた他人のプログラムを読む、盗む： Processingに付属してくるサンプルは、とても良い教材
トライ&エラー、失敗 (バグ) を恐れない：プログラムを書いて、そのまま動くことはめったにない、プログラムを書く → 実行 → 修正 → 実行 → 修正…. → 完成、熟練したプログラマーでも一緒
読みやすく、明快に：しばらく経ってからでも意味がわかるように、コメント、インデント、命名の規則など

さっそくサンプルプログラムを眺めてみる

サンプルの中身(プログラム)を観察してみる
何か法則はあるか?
文字の種類は?
文末は?
色の規則
いろいろな括弧
本文とコメント

Processingプログラミングの基本

実行の順序：上から順番に読みこまれていく
半角の英数字 (全角はダメ) のみを使用すること
文末にはセミコロン “;” を入れる
いろいろな括弧が入れ子構造になっている
おなじ括弧に囲まれている部分がひとつのブロック

関数

関数 (function) とは：引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
Processingは、ビジュアルプログラミングのための関数の集合体
関数名とその引数（パラメータ）から構成される
引数の数は関数によって異なる

関数の書式

[code language=”java”]
関数名(引数1, 引数2, 引数3…);
[/code]

コンピュータで絵を描くということ

コンピュータの画面を拡大していくと…
縦横に並んだ点の集合 → ピクセル (Pixel)
一つのピクセルは、赤、緑、青の三原色から成り立っている

コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの
例：1024 x 768 の液晶画面：横に1024列縦に768行ならんだ巨大な表
それぞれのセルにR,G,B,A(アルファ値)が格納されている

座標

座標 (Cordinate)：点の位置を明確にするために与えられる数の組のこと
コンピュータの画面の1点を指定するためには、いくつのパラメータが必要か?
2つの数字 (横と縦)： (x, y) – 2次元平面における直交座標

Processingの座標系

左上が原点 (0, 0)
右に行くほどx座標の値が増える
下に行くほどy座標の値が増える

例：100 x 100の平面の座標系

Processing はじめの一歩

キャンバスを用意する

形を描いていく、画面 (キャンバス) を用意する
size関数：ウインドウの大きさを指定

[code language=”java”]
size(ウインドウ幅, ウインドウ高さ)
[/code]

– 例：幅320pixel, 高さ240pixelのウィンドウを開く

[code language=”java”]
size(320, 240);
[/code]

コメントアウト

プログラムにコメントを入れることで、分かり易く

[code language=”java”]
//一行だけのコメント

/*
複数の行にまたがる
コメント
*/
[/code]

点を描く

point関数：点を描く

[code language=”java”]
point(X座標, Y座標);
[/code]

例：X座業100, Y座標120の位置に点を描く

[code language=”java”]
point(100, 120);
[/code]

直線を描く

line関数：直線を描く

[code language=”java”]
line(X座標始点, Y座標始点, X座標終点, Y座標終点);
[/code]

例：

[code language=”java”]
line(10,10,200,180);
[/code]

長方形を描く

rect関数：長方形を描く

[code language=”java”]
rect(X座標, Y座標, 長方形の幅, 長方形の高さ);
[/code]

例：

[code language=”java”]
rect(10,10,200,180);
[/code]

楕円を描く

ellipse関数：円、楕円を描く

[code language=”java”]
ellipse(Ｘ座標, Ｙ座標, 楕円の幅, 楕円の高さ);
[/code]

例：

[code language=”java”]
ellipse(10,10,200,180);
[/code]

色の指定

R(赤) G(緑) B(青)の三原色で指定する
加法混色 (光の三原色であることに注意) ←→ 色料の三原色

3つの色の属性

背景色 background関数

[code language=”java”]
bacground(background(Rの値, Gの値, Bの値);
[/code]

線に色をつける stroke関数

[code language=”java”]
stroke(background(Rの値, Gの値, Bの値);
[/code]

塗りの色をつける fill関数

[code language=”java”]
fill(background(Rの値, Gの値, Bの値);
[/code]

Processingの色の塗りかたの規則

色や線、塗りつぶしの設定は、それ以降すべての描画に使われる
色を変えるには改めて別の色を設定する命令を入れる
背景色、塗りつぶしの色、ストロークの色の指定の例

[code language=”java”]
//背景色
background(128); //グレースケール

//塗りつぶしの色
fill(128, 64, 32); //RGB

//塗りつぶしの色
stroke(128, 64, 32); //RGB
[/code]

実際に絵を描いてみる

ここまでで学習した関数を駆使して、色をつけた絵を描いてみる

点を描く

[code language=”java”]
size(200,200);
background(0,0,0);

//1つ目の点
stroke(255,0,0);
point(50,100);

//2つ目の点
stroke(0,255,0);
point(100,100);

//3つ目の点
stroke(0,0,255);
point(150,100);
[/code]

直線を描く

[code language=”java”]
size(200,200);
background(0,0,0);

//線1: line(x1, y1, x2, y2);
stroke(255,255,255);
line(0,0,60,60);

//線2: line(x1, y1, x2, y2);
stroke(255,255,0);
line(40,50,190,200);
[/code]

図形を描く

[code language=”java”]
size(200,200);
background(128);
fill(31,63,255);
stroke(255);

//長方形の描画：rect(x,y,width,height);
rect(40,40,140,140);

//楕円の描画：ellipse(x,y,width,height);
ellipse(80,80,80,120);

//三角形の描画：triangle(x1,y1,x2,y2,x3,y3);
triangle(12,180, 120,15, 160,60);
[/code]

クイズ 1

この図形を描いてみましょう
画面の大きさは、400 x 400 pixel

答え

[code language=”java”]
size(400,400);
noFill();

ellipse(200,200,400,400);
ellipse(100,200,200,200);
ellipse(300,200,200,200);
ellipse(200,100,200,200);
ellipse(200,300,200,200);
[/code]

クイズ 2

この図形を描いてみましょう
画面の大きさは、400 x 400 pixel

答え

[code language=”java”]
size(400,400);

fill(0);
rect(40,40,160,160);
rect(200,200,160,160);

fill(255);
rect(40,200,160,160);
rect(200,40,160,160);
[/code]

クイズ 3

この図形を描いてみましょう
画面の大きさは、400 x 400 pixel

答え

[code language=”java”]
size(400,400);
noStroke();

fill(0);
rect(40,40,160,160);
rect(200,200,160,160);

fill(255);
rect(40,200,160,160);
rect(200,40,160,160);

ellipse(120,120,160,160);
ellipse(280,280,160,160);

fill(0);
ellipse(280,120,160,160);
ellipse(120,280,160,160);
[/code]