こんちゃっす、ダイブツです。
いよいよ本格的なプログラミングに入っていきますよ！
ここではプログラミング学習で使用するProcessingというプログラミング言語の実行環境作り、そしてこんな四角や丸を描画するプログラム作成方法まで説明していきます。
そんなに難しくない内容なので、身構えずにいきましょう！
目次
Processingとは
まず簡単に、Processingってどんなプログラミング言語なのかっていうことを説明しておきます。
Processingとは、アートな映像を作り出す時に使われるプログラミング言語です。
そう、例えばこんな動画みたいにね。
[arve url=”https://www.youtube.com/watch?v=GhecqqCQsvU” aspect_ratio=”4:3″]
この動画を見てもらえれば分かるように、Processingって、プログラムの動きが目に見えるのでわかりやすいんですよ。
だからプログラミング初心者にとっても、理解しやすくてピッタリなんです。
そしてWindowsを使ってても、Macを使ってても関係無い！
だからこのプログラミング入門として、Processingを選びました。
Processingの開発環境準備の流れ
さぁ、それじゃあ実際にProcessingの開発環境を準備していきましょう！
下に書いている手順通りに進めれば5分で準備できちゃいますよ♪
１、ダウンロードページから使用しているPCに合っているものをダウンロードする。
何といっても、まずはProcessingがなきゃ始まらない！
ってことで下のリンクからダウンロードページに飛びましょう。
リンク先に飛んだら、自分の環境にあったものをダウンロードしてください。
もし、あなたがWindowsを使っていて、自分のPCが32bitか64bitか分からなければ、こちらを参考に確認してみてくださいね。
⇒(Windows10向け)自分のPCが32bitか64bitか調べる方法
⇒(Windows10以外向け)自分のPCが32bitか64bitか調べる方法
２、ダウンロードファイルを解凍し、processing.exeを実行する
Processingをダウンロードしたら、いよいよ起動していきますよ！
先程ダウンロードしたzipファイルを解凍してフォルダを取り出しましょう。(僕はLhaplusというフリーソフトで解凍しています)
そしたら、取り出したフォルダ内にあるProcessing.exeをダブルクリック！
そうすると、Processingの画面が立ち上がります。
この全面に出ているウィンドウを消したものが、Processingの開発画面です。
画面構成はこうなってます。
ここまでは大丈夫ですね？
それじゃあ続いて簡単な初期設定をしていきましょう。
Processingのカンタン初期設定
Processingを使うのに、ここで説明する初期設定は必ず行ってください。
この設定ができていないと日本語の表示ができなくなっちゃいます。
Processingの初期設定を行うには、まずウィンドウの左上にある「ファイル」タブから「設定」を選択します。
すると、こんな画面が表示されるので、下の画像のように、エディタとコンソールのフォントとコード補完を設定してください。
・エディタとコンソールのフォント：MSゴシック
・コード補完：チェック
これでオッケーです。
さぁいよいよProcessingを実行する準備が整いました！
それじゃあ実際に実行してみましょう。
試しに実行してみよう
Processingを実行してみるのはとても簡単です。
既にコードの入力画面が開いていると思うので、何も考えずに次の一行をコピペして貼り付けてみてください。
rect(20,20,50,50);
そして、実行ボタンをクリックしてみてください。
（コードを入力した所のすぐ上にある再生ボタンのようなものが、プログラムの実行ボタンです）
このような四角形が描かれたウィンドウが表示されれば成功です！
こんな感じで、プログラムを書き込んだら実行ボタンを押して確認していくようにしましょう！
図形を簡単なプログラムで描画する！
最初にも書いた通り、Processingでは四角や丸の描画、色の塗分けが簡単にできます。
まぁとりあえず実感を得る為に表示してみましょっか。
下のコードをコピペして実行してみてください。
size(600,400);
fill(0,0,255);
rect(50,50,200,200);
fill(255,0,0);
ellipse(400,180,180,300);
で、実行するとこの画面が表示されましたね。
それじゃあこのプログラムの説明をしていきます。
と、その前に、Processingの画面表示の考え方を知っておく必要がありますね。
まずはそこから説明しましょう。
Processingでの画面表示は座標？！
Processingの画面は、XY平面の座標で構成されています。
昔数学の授業で出てきた2次元の座標みたいなやつですね。
→がｘ方向。↑がｙ方向ってやつですね。
でもProcessingでは、少し考え方が違います。
ｘ方向は同じ→なんですが、ｙ方向が↓になります。
座標の方向と数字を図に書くとこんな感じですね。
単位は画像で使われているpx（ピクセル）が使われています。
これを基準にプログラムの説明をしていきます。
ウィンドウサイズの設定
最初に記述しているsizeは、ウィンドウのサイズを設定するものでした。
size(600,400);これはx方向に600ピクセル、y方向に400ピクセルのウィンドウにするという命令を表しています。
分かりやすく書き換えるとこうなりますね。
size(x方向のウィンドウサイズ, y方向のウィンドウサイズ);
なので、まずこの命令で600×400pxのウィンドウを作成しているんです。
図形の書き方
最初に出した例では、四角形と円を書いているので、その2つの書き方を説明していきます。
□四角形
四角形を描く処理はこれです。
rect(50,50,200,200);この数字の部分を変えることで、四角形を描く位置を変えたり、大きさを変えることができます。
それぞれの数字の指定を置き換えるとこうなりますね。
rect(左上頂点のx座標,左上頂点のy座標,x方向の幅,y方向の幅);
図でいうと、それぞれこの値のことを言ってるんです。
Processingで図形を表示する時は、基本的にこの流れで設定することができますよ。
1、座標を指定する。
2、図形の大きさを指定する。
実際に値を変えたら結果がどうなるか見てみましょう。
例1
rect(50,50,200,200);
例2
rect(400,200,50,100);
○円
円を描く時の指定の仕方も、四角形の時と似てます。
ellipse(400,180,180,300);
今回も同じように数字の部分を文字に置き換えてみましょう。
ellipse(円の中心x座標,円の中心y座標,x方向の直径,y方向の直径);
円を描く時は、四角形と違って中心の座標を指定するというのがポイントです。
じゃあ円でも同じように実際の表示を見てみましょっか！
例1
ellipse(100,100,80,80);
例2
ellipse(400,180,180,300);
こんなんで描けちゃうんです。
これで四角形と円の描き方は完璧ですね！
色の塗り方
図形が描けるようになったら、あとは色を塗るだけです！
この色を塗る処理もすっごく簡単。
下の処理を図形を描く前に指定するだけです。
fill(0,0,255);
rect(50,50,200,200);
これは、これから描く図形をこの色で染めるよ。という指定になるんですね。
なので、こう書くと、どちらの図形も同じ色で染めることになります。
fill(0,0,255);
rect(50,50,200,200);
ellipse(400,180,180,300);
で、このfillでの色の指定方法は、RGBという指定の仕方になっています。
なので、左から順番にこんな指定になるんです。
fill(赤色の輝度,緑色の輝度,青色の輝度);
fill(0,0,255);だと、青色で染めるという意味ですね。
だから、例に出したこのプログラムで青色の四角形と赤色の円を表示することができたんです。
size(600,400);
fill(0,0,255);
rect(50,50,200,200);
fill(255,0,0);
ellipse(400,180,180,300);
じゃあ、ここまでの内容のまとめとして、この問題を解いてみてください。
問題：600×400pxのウィンドウに下記画像を同じ図形を描け
【描画情報】
・白色の指定は(255,255,255)でできる。
・正方形の一辺、円の直径は共に300pxである。
お疲れ様でした！
すごいです！これでプログラムを自分で作って図形を表示できるようになりましたね！
自分でプログラムを入力して実行ができるっていうのは一般の人にはできないことなので、自信を持っていきましょう！
さぁ、次はプログラムを書く時によく出るエラーの対処法を紹介していきます。
絶対に抑えておきたい内容を紹介するので、次の内容も取り組んでくださいね！
気軽にコメントどうぞ！