人工言語入門 A 2009

プログラミング言語とは何か? Processing入門1

April 17, 2009

授業スライド

Proga09 0420

View more presentations from Atsushi Tadokro.

スライドをダウンロード (PDF形式)

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

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

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

コンピュータはただの箱と化す
コンピュータだけでなく現代文明を構成するほとんどの機器が使えなくなる

電話、ATM、飛行機、電車、CD、

いまこうして便利な生活ができるのはプログラミング言語のおかげ

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

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

数学ができないから無理?

そんなことはない。どちらかといえば文系寄りの知識。

将来役に立たない?

プログラミングをする際の思考法は様々な分野に応用可能

プログラミングはつまらない、無味乾燥

プログラミングはとても楽しい作業! 自分の書いたプログラムが思い通りに動いた時の感動は大きい

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

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

というわけなので、これから半年楽しく学んでいきましょう

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

「プログラム」という言葉から連想されるもの

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

第23回運動会プログラム
9:00 -開会の辞
9:10 - 選手宣誓
9:20 - 競技開始
...
16:00 - 閉会式
(雨天の場合は翌週に順延)

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

一連の行動を記述
上から下へ、活動する順番に並んでいる
条件分岐

「雨天の場合は〜」

運動会に必要な手続をわかりやすく記述している

これがプログラム
手続 = アルゴリズム
記述方法 = プログラミング言語

世界最初のコンピュータENIACのプログラミング環境

fig01

世界最初のコンピュータとされるENIAC (1946) にはプログラミング言語がなかった

毎回配線をやり直して特定の計算を行っていた！

プログラム内蔵方式のコンピュータの誕生

fig02

ジョン・フォン・ノイマンが、自分の名前でEDVACの仕組みについて発表

“First Draft of a Report on the EDV AC”

その仕組みに刺激されて、EDSAC誕生

世界最初の実用的なプログラム内蔵方式の電子計算機

コンピュータのプログラム

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

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

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

アルゴリズムの基本

基本となる3つのアルゴリズム

連続、分岐、反復

fig03

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

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

機械語
機械(CPU)が直接理解し実行する言語
ビット(0, 1)だけで表現される
CPU毎に異る
人間が理解することは困難
より人間にわかりやすく翻訳する言語が必要 → 高級言語

高級言語：人間にとって使いやすように機械語を変更

わかりやすいプログラミング言語でプログラミングをして、それを機械語に翻訳してコンピュータに実行させる

アセンブラ、コンパイラ、インタプリタ

fig04

機械語と一対一で対応しない
数多くの言語が生れてきている
現在ほとんどのプログラムは高水準言語で記述されている
主な高級言語：

Ada, BASIC, C, C++, Objective-C, COBOL,FORTRAN, Java, JavaScript, LISP, Pascal, Perl,PHP, Prolog, Python, Ruby, Smalltalk, SQL ..etc.

パラダイムによる分類

手続き型：一連の手続きとして表現

FORTRAN, COBOL, PL/I, Pascal, C, BASIC など

関数型：関数呼び出しの形で定義

LISP, APL, Ｓなど

論理型：規則と事実に基づいて推論を行う

Prolog, OPS など

オブジェクト指向：オブジェクトを基本要素とする

SmallTalk, Java, Object-C, C++, Visual Basic など

fig05

Processing入門

Processingとは何か

Processingは、イメージやアニメーションそしてサウンドのプログラミングをする人々のための、オープンソースのプログラミンング言語であり開発環境です。アーティスト、デザイナー、建築家、研究者、または趣味として、プロトタイピングや制作のために使うことができます。視覚的な文脈でコンピュータプログラミングの基礎の教育のため、またはソフトウェアのスケッチブックとして、そしてプロフェッショナルのための制作ツールとして作られています。Processingは、アーティスト達やデザイナー達によって、商業ソフトウェアへの代替手段として開発されています。(http://processing.org/ より）

Processingの特徴

JavaやC++でプログラミングするよりも遥かに容易に、スケッチするようにインタラクティブなビジュアル・プログラミングを構築できる
スレッド、ダブルバッファリングなど、初級者にとってハードルとなる技術的な詳細を外し、アイデアの実現に専念できる
独自のシンタックスで書かれたプログラムをJavaコードに解析する。コードは実行可能なJavaアプッレットとして書き出すことが可能
PostScript、OpenGLの機能セットを利用した、カスタム2D/3Dレンダリングエンジンを使用
既存のJavaライブラリを統合することで容易に拡張が可能
フリー！
Windows、MacOSX、Linuxで実行可能

インターフェイスの使いかた

fig06

実行(play)ボタン：プログラムの実行
停止(stop)ボタン：プログラムの停止
新規作成(new)ボタン：新規ファイル（Processingではスケッチと呼ぶ）の生成
読込み(Opens)ボタン：保存された作品の選択
保存(Saves)ボタン：スケッチを保存 (別名で保存したい場合はファイルメニューよりsave Asを選択)
出力(Exports)ボタン：表示されているスケッチをJAVAアプレットとして出力。 JAVAアプレットを表示するために必要な最低限のHTMLタグも同時に書き出す

Processingのインストールのやりかた

家でもProcessingを使用したい人のために
入手方法

http://processing.org/download/ からダウンロード

インストール方法

プログラミングの心得

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

よくできた他人のプログラムを読む、盗む

Processingに付属してくるサンプルは、とても良い教材

トライ&エラー、失敗 (バグ) を恐れない

プログラムを書いて、そのまま動くことはめったにない
プログラムを書く → 実行 → 修正 → 実行 → 修正…. → 完成
熟練したプログラマーでも一緒

読みやすく、明快に

しばらく経ってからでも意味がわかるように
コメント、インデント、命名の規則など

さっそくサンプルを見てみる

サンプルの中身(プログラム)を観察してみる

何か法則はあるか?
文字の種類は?
文末は?
色の規則
いろいろな括弧
本文とコメント

Processingプログラミングの基本

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

おなじ括弧に囲まれている部分がひとつのブロック

最小単位 → 関数

関数

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

関数名(引数1, 引数2, 引数3...)

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

fig07

コンピュータの画面はどうなっているのか?
コンピュータの画面を拡大していくと…

縦横に並んだ点の集合 → ピクセル (Pixel)
一つのピクセルは、赤、緑、青の三原色から成り立っている

コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの

例：1024 x 768 の液晶画面
横に1024列縦に768行ならんだ巨大な表
それぞれのセルにR,G,B,A(アルファ値)が格納されている

fig08

座標

座標 (Cordinate)：

点の位置を明確にするために与えられる数の組のこと

コンピュータの画面の1点を指定するためには、いくつのパラメータが必要か?

2つの数字 (横と縦)： (x, y)
2次元平面における直交座標

Processingの座標系

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

例：100 x 100の平面の座標系(0,0)(100, 0)

fig09

Processingはじめの一歩

キャンバスを用意する

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

size(<ウインドウ幅＞,＜ウインドウ高さ>);

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

size(320, 240);

fig10

描画画面の生成、コメントアウト

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

//一行だけのコメント
/*
複数の行にまたがる
コメント
*/

点を描く

point関数：点を描く

point(＜X座標＞,＜Y座標＞);

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

size(320, 240);
point(100, 120);

fig11

直線を描く

line関数：直線を描く

line(＜X座標始点＞,＜Y座標始点＞,＜X座標終点＞,＜Y座標終点＞)

例：

size(320, 240);
line(10,10,200,180);

fig12

長方形を描く

rect関数：長方形を描く

rect(＜X座標＞,＜Y座標＞,＜長方形の幅＞,＜長方形の高さ＞);

例：

size(320, 240);
rect(20,20,280,200);

fig13

楕円を描く

ellipse関数：円、楕円を描く

ellipse(＜Ｘ座標＞,＜Ｙ座標＞,＜楕円の幅＞,＜楕円の高さ＞);

例：

size(320, 240);
ellipse(160,120,200,180);

fig14