Processingのインストール方法と例題から学ぶプログラミング超基礎講座

パソコン
スポンサーリンク

早速Processingのインストール方法をご紹介します。とても簡単で時間もかからないので読みながら進めていただけたらと思います。

また後半ではサンプルプログラムを使って実際にプログラムコードを書いて動かしてみます!

スポンサーリンク

Processingのインストール方法

 

1.下記のリンクから公式ページを訪問します。

  https://processing.org/

 

2.「Download Processing」をクリックします。

 

3.ここでご自身のパソコンの環境にあったものをクリックします。

自分のパソコンが「Windousの64bit」ならば、左上の「Windous 64-bit」をクリックします。

ご自身のパソコン環境の確認は

「コントロールパネル→システムとセキュリティ→システム」

から確認できます。

 

4.ダウンロードか開始されますので、終わるまで待ちましょう

(ダウンロード時間はそこまで長くないです。)

 

5.Zipファイルがダウンロードフォルダに保存されているので、ダブルクリックします。

 Processing-〇.〇.〇-Windous64.zip(Windousの64bitの場合)があると思います。

 

6.デスクトップにProcessing-〇.〇.〇(〇はバージョンです)ができるのでこのフォルダを開きます。

 

7.フォルダの中にある「processing.exe」をダブルクリックします

以下の画面が表示されます。起動までしばらくお待ちください。

立ち上がると以下の画面が表示されます。ここにプログラムを書いていくことになります。この画面をエディター画面(編集画面)といいます。

以上でインストールは完了です。Processingを使うときは「processing.exe」をクリックしてくださいね。

 

次にサンプルプログラムを用いて、実際にプログラムを書いて動かしてみます!

 

Processingでプログラムを動かしてみよう!

 

では実際にプログラムを書いて動かしてみます。

できるだけわかりやすくコードの解説もしていきたいと思います。

 

今回は下記リンクのページのサンプル1を使用させていただきました。

Ryoichiro Debuchi : Processing Samples

今回取り上げたサンプル1以外にもたくさんあるので参考にしてみてください。

 

プログラムの実行と保存方法

プログラムの実行

プログラムを書き終えたら画面左上の▶ボタンをクリックで実行できます。

 

プログラムの保存

プログラムを保存するときは

  1. ファイル
  2. 新規作成の場合「名前を付けて保存」                  (上書き保存の場合は「保存」をクリック)
  3. 好きなファイル名にして「保存」をクリック

これで保存完了です。

 

保存したファイルを次回使用したいときは

  1. ファイル
  2. 開く
  3. 保存したファイル名のフォルダをクリック
  4. フォルダ内のpdeファイルをダブルクリック

で保存したファイルを開くことができます。

 

サンプル1:四角の物体が横に移動する

以下コードになります。

【コード解説】

1~2行目

だれがいつ書いたプログラムなのか分かるように記述してあります。

プログラム動作には何の影響もありません。

 

ここで一つだけ説明します。

「//」が先頭についてあるものを「コメント」といいます。

コメントの使い方としてコードの役割をメモしたりする場合や忘れないように印をつけるなど、「メモ」のような役割があります。

コメント部分はプログラムの動作には全く影響がありませんので自由に書いて大丈夫です。(先頭に「//」をつけるのを忘れずに!)

例として27行目から少しコメントを書いてみました。日本語は文字化けするのでローマ字でその行の役割を書いています。

 

4~7行目

プログラム内で使用する変数を用意しています。

変数の前に「float」とありますが、これは「変数の型」と呼ばれるもので、

変数の扱い方(ルール)を示したものになります。

「float」は簡単に言うと、少数点以下の数字も扱える変数ですよという意味があります。

他にも「int」と呼ばれるものもあるのですが、これは整数しか扱えませんよという意味があります。

少々面倒ですが、その変数のルールを決める必要がありますので変数の前にこの「型」を記述してください。

 

9~20行目(void setup())

プログラムを実行したときに最初に一度だけ実行される部分です。

10行目と20行目に“{ }”がありますがこの範囲内に書かれた内容がその対象です。画面のサイズだったり、色の設定や変数に入れる数字など最初に設定しておくべきものを書く場所です。

 

11行目(size(300,300))

画面のサイズを決定します。

以下画像

使い方は「size(横幅,縦幅)」で横幅と縦幅に数値を入れることで画面サイズが決まります。

以下の画像が300,300で設定したときに出てきます。

 

12行目(background(0,0,0))

画面の背景色を決定します。

使い方は「background(赤、青、緑)」それぞれに0~255までの数値を入れることで好きな色を作ることができます。

ここではRGBと呼ばれるRed(赤),Blue(青),Green(緑)の3色を混ぜて幅広い色を作ることができる表現法を使用しています。

background(255, 0, 0)にすると…

 

13行目(rectMode(Center))

指定した座標位置が四角のどこかを示します。ここではCenter(中心)なので指定した座標は四角の中心を指すことになります。

 

14行目(frameRate(30))

1秒間に何回画面が更新されるかを表しています。この場合1秒間に30回画面が更新されることになります。

 

15~18行目

変数に入れる最初の値を決めています。

Xには0、Yには0、Speedには3、YMoveには20を最初に決めることになります。

 

21~32行目(void draw())

実際に四角を書いて動かしている部分になります。22行目と32行目の“{ }”の範囲内に書かれたものが対象です。

 

23行目(background(255,255,255))

ここでまたbackgroundの登場です。ここで白色を指定していることで黒い四角が動いているように見えるのですが、その仕組みはコードの解説が終わったあとに説明します。

 

24行目(X = X + Speed)

ここでは変数Xの値にSpeedの値を足しています。

つまり、「0 + 3 = 3」をしています。

0と3はsetupのところで一番最初に入れた値です。

それを使って計算することで、Xの値を3にしています。

次にXを使うときは0ではなく3になっています。

 

25~29行目(if(X > width))

これは条件式「if文」といいます。

「if」は英語で「もし~だったならば」という意味があり、ここではifの横の()内にその条件を書いていきます。

その条件を満たしたとき26行目と29行目の“{ }”内のプログラムが実行、if文が実行されることになります。

ここでは

「X > width」

なので

「もしXがwidthよりも大きいならば」

という意味になります。

このとき、Xは3で、width(画面の横幅のこと)は300なのでまだ条件を満たしていないためif文は実行されません。

 

もし条件を満たした場合(Xの値が300を超えたとき)、

「X=0」、「Y+=YMove」が実行されます。

Xの値は0に戻ります。

Yの値はYMoveだけプラスされます。つまり「0 + 20 = 20」でYは20になります。

 

つまりこのif文は、

「四角が画面の端に到達したとき、高さをずらしてまた左から四角を描く」

というプログラムになります。

 

30行目(fill(0,0,0))

これは四角を塗りつぶす色を決めています。

ここでもbackgrpundと同様にRGBに従って数値を入れることで好きな色に四角を塗りつぶすことができます。

 

31行目(rect(X, Y, 10, 10))

四角を描くときは「rect」を使います。

使い方は「rect(横座標, 縦座標, 描く四角の横幅, 描く四角の縦幅)」になります。

ここに任意の数値を入れることで好きな大きさの四角が作れます。

 

以上で各コードの説明は終了です。次にどういう仕組みで動いているのか説明します。

 プログラムの仕組み

  1. Setupで画面の大きさ、画面の背景色、四角を描く座標の位置(四角の中心)、画面の更新回数、各変数の値が最初に決まる。
  2.  Draw内の実行が始まる。
  3. 画面の背景が白色になる。
  4. 始めはX座標(横の位置)が3、Y座標(縦の位置)が0の位置に横幅が10、高さが10の四角が描かれる。
  5. 画面が更新され、更新後はX座標が6の位置に四角が描かれる。
  6. 四角が画面端に到達したら、高さをずらしてまた四角を描く。
  7. これを1秒間に30回の画面更新を繰り返すことで四角が動いているように見える。

こういうことです。なんとなく理解できたでしょうか?

まだちょっとわからないという方は数値を自分でいろいろ変えて実行してみて下さい。より仕組みがわかると思います。

例えば、

 18行目のYMoveの数値を変えると…

 23行目のbackgroundを消すと…

など、いろいろやってみてください!

 

終わりに

以上でProcessingのインストール方法とサンプルプログラムを用いた動作説明を終わります。

他にもできることはたくさんあるので、ネットや本で調べてどんどん挑戦してみてください!

スポンサーリンク
パソコン
スポンサーリンク
スポンサーリンク
today's scope

コメント

error:Content is protected !!