本講座ではプログラミングを学習するための環境としてProcessing[図1]を使用します。
図１ Processingのウェブサイト
Processingはグラフィックスをプログラムで生成するうえで困難な各種設定などを必要とせず、コーディングに専念できるという特長があります。
また、Processingはグラフィックスだけでなく、音声や動画なども扱うことができ、それらを組み合わせてインタラクティブ（双方向性のある）な表現を可能にしてくれます。
それでは最初にProcessingがどういう経緯で制作されたプログラミング環境なのかを解説します。
Processingは当時マサチューセッツ工科大学メディアラボに在籍していたCasey ReasとBen Fryによって2001年に誕生しました。
その後2002年から2008年まで開発が続き、2008年秋からバージョン1.0がリリースされ、2013年にはバージョン2.0が、つづく2015にはバージョン3.0がリリースされ現在に至っています。
ProcessingはJava(Java日本語サイト)というプログラミング言語の環境を活用してグラフィック機能などに特化したものだと言えます。
Processingの作者であるCasey ReasとBen Fryは著書「Processingをはじめよう」の中で影響を受けた先行するプログラミング環境をあげています。
ひとつはLOGO(LOGOファウンデーション)で、教育のために開発されたプログラミング環境でした。この言語は児童の発達心理学の成果などが活かされており子どもが思考するための道具としての工夫がなされていました。
ふたつめはDesign By Numbers(公式サイト)で、この言語はマサチューセッツ工科大学メディアラボのJohn Maedaによって開発されました。Design By Numbersはデザイナーやアーティストといったプログラミングを専門としていない人でもプログラミングが可能となる環境を目指して作られており、数値によるグラフィックデザインの研究や教育に使われました。
上のような先行するプログラミング環境の思想や特徴の影響を色濃く受けたProcessingは、初心者にもわかりやすく、特にアーティストやデザイナーなどが創造や表現のためにプログラミングを使うことを学ぶ最初の一歩を踏み出すのに最適な言語です。
プログラミングってどんなもの？
プログラミングとは、コンピューターと呼ばれる計算機に、特定の処理をさせるために命令を与えるための記述方法であると言えます。（記述することをコーディング、記述されたプログラムをコードなどと呼びます。）プログラミングは、プログラム言語と呼ばれる「言語」によって記述されます。
プログラミングに似た人間の活動として、「お菓子づくり」を例に説明します。皆さんはお菓子を作ったことはあるでしょうか。お菓子づくりは他の料理に比べると材料の分量や、材料を混ぜ合わせるタイミングなどが厳密で、ちょっと間違えるだけで、お菓子がふくらまなかったり、焦げたりします。筆者もシュークリームづくりに挑戦して、シュー皮がちっともふくらまず、クリームをしぼんだ皮に塗って食べた苦い経験があります。（全部おいしくいただきましたが。。。）この、お菓子づくりの「レシピ」に相当するものがプログラムです。厳密に書かれたレシピに沿って、材料を用意し、分量をはかり、材料を混ぜて加工すれば、完成目標であるお菓子ができあがります。皆さんが、これから学ぼうとしているプログラミングも、このレシピに非常に似ています。
実際には、皆さんはグラフィックスやサウンドを用いた作品をプログラムを用いて制作することになりますが、プログラミング言語を使って命令を書き、コンピューターに計算させて作品を仕上げることになります。
プログラミング言語について
コンピューターと呼ばれる電子計算機は、１９４０年代に戦争の道具として作られたと言われています。海をまたいだ敵国の目標地点に正確にミサイルを撃ち込むための弾道計算に使用されていたそうです。コンピューターは２進法と呼ばれる原理で動作しています。簡単な説明をすると、人間の指を折り曲げるか伸ばすかで、数字を表したり、お父さん指やお母さん指のように家族を表したりできるように、２通りの変化の組み合わせで、この世の多くの事物を表現できるという原理です。コンピューターは、その内部に一種のスイッチのような仕組みを大量に備えており、電気エネルギーを使って高速にスイッチのオンとオフを繰り返して、万物を計算したり表現したりする機械だと考えられます。
ただし、コンピューター内部で起きている、こうしたスイッチのオンとオフの変化は、人間には理解しづらく、コンピューターに命令通りに仕事をさせるためには、特別な言語が必要になります。そのために開発されたのが、コンピューターと人間が対話するために創られたプログラミング言語です。
さて、実はプログラミング言語は一種類ではありません。時代の変化によって、人間がコンピューターに計算させたい内容が変わってきたことなどが影響し、現在では数多くのプログラミング言語が存在します。それは、例えばインターネット用の言語や、スマフォ用の言語、AI（人工知能）用の言語といったように用途によって便利なプログラミング言語が開発されてきました。
プログラミングの開発環境について
プログラミング言語を使ってプログラムを記述するためには、その言語を記述するためのスケッチブックやノートブックに相当する開発環境が必要になります。現在では数多くのプログラミング言語が存在することは、先述したとうりですが、それら数多くのプログラミング言語に適した開発環境が存在します。
p5.jsについて
この授業では第1回で説明したとおり、processingというプグラミング言語を使用して学習を進めていきます。processingは、独自の開発環境を持っていますが、時代の変遷により、JavaScriptと呼ばれる言語環境で、processingを動作させるライブラリと呼ばれる仕組みが実現しています。JavaScriptはインターネット上のWEBサイトの構築などに用いられる言語で、この授業で扱う開発環境であるp5.jsもインターネット上で開発が進めらることが特徴になっています。
以下からp5.js にアクセスしてみましょう。
アクセスできたら、Editorメニューをクリックして、プログラミングを記述するための編集環境を表示してみましょう。
練習 p5.jsのEditorを操作しサンプル・プログラムを動作させて,どのような作品が制作できるのか調べてみましょう。 １）p5.jsのEditorのFileメニューからExamplesを選択する。 ２）サンプル・プログラムのリストが表示されるので、まず、ひとつ選ぶ。（サンプル名をクリックする） ３）再生ボタンを押すとサンプル・プログラムが実行され、実行結果がsketchエリアの右側のPreviewエリアに表示される。
p5.jsのサインアップ
この授業では、プログラミングを記述する（=コーディング）ためにp5.jsという開発環境を使用します。
p5.jsを活用するためには、アカウントを作成するためのサインアップが必要になります。
以下の手順に従ってサインアップしましょう。
１）ウェブブラウザからp5.jsのEDITOR画面にアクセスする。
２）EDITOR画面の右上にあるSign upボタンをクリックしてサインアップ画面を表示する。
３）必要な項目を入力する。
・User Name には開発環境で使用するハンドルネームを記載します。本名を使用する必要はありません。
・Email を入力します。
・Password を入力します。（パスワードは忘れないようにメモしておきましょう。）
・Confirm Password に上で入力したパスワードと同じ記号を確認のため入力します。
・Sign upボタンを押して登録ができれば準備完了です。
４）次回からp5.jsのEDITORを使用するときは、毎回 Log inして使用するようにしましょう。
・Log inにはメールアドレスとパスワードの入力が必要になります。
コーディングの準備
１）Examplesを選ぶ
FileメニューからExamplesを選択し、Examples画面で、Hello P5: shapesを選択します。
２）コードの複製
Hello P5: shapesのオリジナルのコードを複製しましょう。
FileメニューからDuplicateを選択すると、コードの複製が作成されます。
コードを記述するエリアの上部に、コード名が Hello P5: shapes copy として表示されるので、コード名をクリックします。コード名を編集できるので、Hello P5: shapes 0000cmu などのように、名称を変更しておきましょう。
注意：日本語は使用できません。必ず文字入力を半角英数入力に設定を切り替えて名称を入力するようにしましょう。
コードを変更してみる
はじめに、オリジナルのコードの動作確認をしてみましょう。再生ボタンをクリックしコードを実行するとPreviewエリアにコーディング結果が表示されます。
次に、コードを変更してみましょう。コードの８行目 background(200); の数値を以下のように変更して実行してみましょう。
background(255,0,0);
コードの変更によって、背景色が赤く表示されます。（色表示の仕組みについては今後の授業で解説します）
更に、17行目の ellipse(240, 240, 80, 80); の数値を自由に変更してみましょう。
コードの保存
コードの変更が出来たら保存をしてみましょう。FileメニューからSaveを選択するとクラウド上にコードが保存されます。次にコードを使用する際は、FileメニューからOpenを選択し、必要なコードを開きます。
コードのシェア
作成したコードをシェア（他者と共有）することができます。FileメニューからShareを選択すると、コードをシェアするためのウィンドウメニューが表示されます。メニューのPresentの欄に表示されている文字列をコピーしてメモ帳やWordなどにコピーすると、コーディングで作成した作品へのリンクができるようになります。
練習 p5.jsのEDITORで Hello P5: shapes プログラムを複製しコードを自由に書き換えてシェアしてください。 １）p5.jsのEDITORのFileメニューからExamplesを選択し、サンプル・プログラムのリストから Hello P5: shapes を選ぶ。 ２）Hello P5: shapes の名称を変更する。（例 Hello P5: shapes 0000cmu） ３）コード内の数値を自由に書き換えてオリジナルの作品を作る。 ４）作品が完成したら保存のうえ、FileメニューからShareを選択し、ウィンドウメニューからPresentの欄に 表示されている文字列をコピーして、文書作成ソフト（Wordなど）にペーストする。