プログラミング初心者におすすめ！Processingとは？

「Processing（プロセッシング）」は、簡単に言えば
「めちゃくちゃ簡単に本格的なアート作品を作れるプログラミング言語」です。
グラフィックス、アニメーション、音声処理、センサー、ハードウェアなど、
様々な分野で利用されています。
初心者でも簡単に学べるように設計されており、
コードを書いた結果をすぐに見ることができます。
視覚的な表現を作成することができるため、プログラミング学習に最適です。
プログラミングはもちろんのこと、デザイン・クリエイティブに興味のある方にもおすすめです！

Processingを始めてみよう

まずはProcessingを触るための準備をします。
以下のリンクからProcessingをダウンロードしてきましょう。
ダウンロードしたらProcessingを起動します。

Sketchを作成する

Processingでは一つの作品の単位を「Sketch」と呼びます。
まずはSketchを用意してみましょう。

Processingを起動すると、新しいスケッチが用意された状態になります。
まずこの新しいSketchに名前をつけて保存しましょう。保存するときはCtrl + sで保存できます。

コードを書いてみよう

まずは、図形を描くための画面を用意します。
エディタ内に以下のようにコードを記述して実行してみましょう。

実行すると真っ白なウインドウが表示されます。


以下はこのコードの解説です。


setup()

setup()の中はProcessingを実行したときに最初に一回だけ実行されます。
この関数の中には画面サイズや背景色、色の設定など最初に設定しておきたいものを入れておくことが多いです。


size([横幅], [縦幅])

sizeはスケッチの画面幅を指定します。数値は整数で指定をします。


background([グレースケール],[透明度]);

backgroundは背景色を指定します。白黒で指定する場合は0〜255の間の数値で指定します。0が黒、255が白です。
2番目の値は透明度を指定します。透明度は0〜100で指定します。0が透明、100が完全に表示されている状態になります。
カラーで指定する場合はbackground([赤], [緑], [青],[透明度]);の順番で指定します。赤、緑、青の数値は0〜255の間です。

図形を書いてみよう

いよいよ、図形を書いてみます。
draw()の中に以下のようなコードを記述してみましょう。

実行すると、画面の真ん中に青い線の丸が表示されるはずです。


draw()

setup()は実行したときに１回だけ起動するのに対し、
draw()は１秒間の間にフレームレートの数(初期値は60)だけ繰り返し実行されます。


ellipse([円の中心のx座標], [円の中心のy座標], 縦の半径, 横の半径)

ellipseで円を描くことができます。今回は画面の中央に描きたかったので画面サイズの半分の値をいれ、
縦、横の半径は同じにして正円を描くようにしています。


fill([赤], [青], [緑], [透明度])
stroke([赤], [青], [緑], [透明度])

fill()は塗りつぶし、stroke()は線の色をそれぞれ示します。
noFill()、noStroke()とするとそれぞれ、塗りつぶしなし、線なしになります。

変数を使って値を保持する

次は円を動かしてみます。
動かす前に円の描くときの数値を変数に入れておきましょう。


変数

変数とは、データを置いておく箱のようなイメージです。
float、intというのは変数の中に入るデータの型を示しています。
型の後ろに変数名をいれることで、変数を用意することができます。
floatは小数、intは整数を入れることができます。

『=』は普通の計算式のイコールではなく、プログラムでは代入を意味します。
変数に=で指定した値をしまうことができます。

では先ほどのコードを以下のように変えてみましょう。

変数、x、y、rをそれぞれ用意してellipseの中身を置き換えてみました。 x、y、rの値を変えて実行をすると、円のサイズや位置が変わるのがわかると思います。


円を動かしてみよう

いよいよ円を動かしてみましょう。 ellipseの下に一つコードを追加してみます。


円が右に伸びていくように見えると思います。
draw()が実行されるごとに、xの値が1増えるため、実行ごとに円が描かれた円は消えずに残るためこのようになります。

でもこれだと円が動いている感じがしないので、こんな風に変えてみましょう。


rect([始点のx座標],[始点のy座標],[終点のx座標],[終点のx座標])

rect()は四角形を描くことができます。
最初に背景と同じ色の四角を画面いっぱい書いて、draw()が実行されるたびに画面を一度まっさらにしています。


もっと変わった動きにしてみよう

先ほどのコードでも円は動いてるのですが、普通すぎてちょっとつまらないですね。
次はぶるぶると動かしてみましょう。


random()

random()はプログラム内で適当な数字を作ってくれます。今回の場合は-2から2の間の値を自動で返してくれました。
実行されるたびに違った値が入るので、不規則な動きになります。


さらに動いた円の残像を残してみましょう。


fill()の値にさらに追加してみました。グレースケールの後ろの値は透過度を表します。
透過度は0〜100の値を指定することができます。


さらに色もランダムにしてみましょう。



円を複数書いてみよう

さらにさらに変更を加えて円を複数書いてみましょう。
以下のようにコードを変更してみます。


while文

繰り返しはwhile文を使用します。while()のカッコの中身には条件式を書きます。
今回は、変数iが10より小さい場合は中身を繰り返すという意味になります。
whileの中身が実行されるたびにiが一つずつ増えます。
iが10になると中が処理されなくなります。

さらにellipseのx座標、y座標にはrandomを使用して一つ一つ位置のずれた円が描かれます。


今回の体験ではこれで完成です。お疲れさまでした！

もっとProcessingを使ってみよう

Processingにもっと触れてみて、自分のオリジナルの作品を作ってみましょう！
使える関数一覧など、以下リンク先を参考にしてみてください。

就労までの道のりをこころより応援いたします。