こんにちは、店長です。
秋ですね。秋といえば芸術の秋。ということで、今回はProcessingを使ってアートなプログラミングをしてみたいと思います。
今回はものすごくシンプルなコードで作るので、プログラミングをしたことない人もこの機会にぜひチャレンジしてみてください！
目次
Processingとは
Processingとは、電子アートとビジュアルデザインのためのプログラミング言語とその総合開発環境を指します。Javaをベースとしていて、グラフィックを書くためのメソッドなどが豊富に用意されているため、比較的簡単にビジュアルプログラミングを楽しめます。
実際にProcessingを使ってこのような作品が作られています。
見てるとワクワクしますね！
今回は初めてプログラムを触る人にもわかりやすいように、簡単に図形を動かすプログラムを書いてみました。
それでははじめましょう！
Processingを始めてみよう
まずはProcessingを触るための準備をします。
以下のリンクからProcessingをダウンロードしてきましょう。
ダウンロードしたらProcessingを起動します。
https://processing.org/download/
Sketchを作成する
Processingでは一つの作品の単位を「Sketch」と呼びます。
まずはSketchを用意してみましょう。
Processingを起動すると、新しいスケッチが用意された状態になります。
まずこの新しいSketchに名前をつけて保存しましょう。保存するときはcmd + sで保存できます。
コードを書いてみよう
ここまでできたら、いよいよコードを書いていきます。
図形を描く準備をする
まずは、図形を描くための画面を用意します。
エディタ内に以下のようにコードを記述して実行してみましょう。
void setup(){
size(600, 400);
background(255);
}実行すると真っ白なウインドウが表示されます。
以下はこのコードの解説です。
setup()
setup()の中はProcessingを実行したときに最初に一回だけ実行されます。この関数の中には画面サイズや背景色、色の設定など最初に設定しておきたいものを入れておくことが多いです。
size([横幅], [縦幅])
sizeはスケッチの画面幅を指定します。数値は整数で指定をします。
background([グレースケール],[透明度]);
backgroundは背景色を指定します。白黒で指定する場合は0〜255の間の数値で指定します。0が黒、255が白です。
2番目の値は透明度を指定します。透明度は0〜100で指定します。0が透明、100が完全に表示されている状態になります。
カラーで指定する場合はbackground([赤], [緑], [青],[透明度]);の順番で指定します。赤、緑、青の数値は0〜255の間です。
図形を書いてみよう
いよいよ、図形を書いてみます。
draw()の中に以下のようなコードを記述してみましょう。
void setup(){
size(600, 400);
background(255);
}
void draw(){
noFill();
stroke(0, 0, 255);
ellipse(300, 200, 180, 180);
}実行すると、画面の真ん中に青い線の丸が表示されるはずです。
draw()
setup()は実行したときに１回だけ起動するのに対し、draw()は１秒間の間にフレームレートの数(初期値は60)だけ繰り返し実行されます。
ellipse([円の中心のx座標], [円の中心のy座標], 縦の半径, 横の半径)
ellipseで円を描くことができます。今回は画面の中央に描きたかったので画面サイズの半分の値をいれ、縦、横の半径は同じにして正円を描くようにしています。
fill([赤], [青], [緑], [透明度])
stroke([赤], [青], [緑], [透明度])
fill()は塗りつぶし、stroke()は線の色をそれぞれ示します。
noFill()、noStroke()とするとそれぞれ、塗りつぶしなし、線なしになります。
変数を使って値を保持する
次は円を動かしてみます。
動かす前に円の描くときの数値を変数に入れておきましょう。
変数
変数とは、データを置いておく箱のようなイメージです。
float、intというのは変数の中に入るデータの型を示しています。型の後ろに変数名をいれることで、変数を用意することができます。
floatは小数、intは整数を入れることができます。
『=』は普通の計算式のイコールではなく、プログラムでは代入を意味します。
変数に=で指定した値をしまうことができます。
では先ほどのコードを以下のように変えてみましょう。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
noFill();
stroke(0, 0, 255);
ellipse(x, y, r, r);
}変数、x、y、rをそれぞれ用意してellipseの中身を置き換えてみました。
x、y、rの値を変えて実行をすると、円のサイズや位置が変わるのがわかると思います。
円を動かしてみよう
いよいよ円を動かしてみましょう。
ellipseの下に一つコードを追加してみます。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
noFill();
stroke(0, 0, 255);
ellipse(x, y, r, r);
x = x + 1;
}
円が右に伸びていくように見えると思います。
draw()実行されるごとに、xの値が1増えるため、実行ごとに円が描かれた円は消えずに残るためこのようになります。
でもこれだと円が動いている感じがしないので、こんな風に変えてみましょう。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
fill(255);
noStroke();
rect(0, 0, 600, 400);
noFill();
stroke(0, 0, 255);
ellipse(x, y, r, r);
x = x + 1;
}rect([始点のx座標],[始点のy座標],[終点のx座標],[終点のx座標])
rect()は四角形を描くことができます。
最初に背景と同じ色の四角を画面いっぱい書いて、draw()が実行されるたびに画面を一度まっさらにしています。
もっと変わった動きにしてみよう
先ほどのコードでも円は動いてるのですが、普通すぎてちょっとつまらないですね。
なので今度はもっとごにょごにょと動かしてみましょう。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
fill(255);
noStroke();
rect(0, 0, 600, 400);
x = x + random(-4, 4);
y = y + random(-4, 4);
noFill();
stroke(0, 0, 255);
ellipse(x, y, r, r);
}random()
random()はプログラム内で適当な数字を作ってくれます。今回の場合は-2から2の間の値を自動で返してくれました。
実行されるたびに違った値が入るので、不規則な動きになります。
さらに動いた円の残像を残してみましょう。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
fill(255, 10);
noStroke();
rect(0, 0, 600, 400);
x = x + random(-4, 4);
y = y + random(-4, 4);
noFill();
stroke(0, 0, 255);
ellipse(x, y, r, r);
}fill()の値にさらに追加してみました。グレースケールの後ろの値は透過度を表します。透過度は0〜100の値を指定することができます。
さらに色もランダムにしてみましょう。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
fill(255, 10);
noStroke();
rect(0, 0, 600, 400);
noFill();
x = x + random(-2, 2);
y = y + random(-2, 2);
stroke(random(255), random(255), 255);
ellipse(x, y, r, r);
}
円を複数書いてみよう
さらにさらに変更を加えて円を複数書いてみましょう。
以下のようにコードを変更してみます。
void setup(){
size(600, 400);
background(255);
}
float x = 300;
float y = 200;
int r = 180;
void draw(){
fill(255, 10);
noStroke();
rect(0, 0, 600, 400);
x = x + random(-5, 5);
y = y + random(-5, 5);
int i = 0;
while(i < 10){
noFill();
stroke(random(255), random(255), 255);
ellipse(x + random(-10, 10), y + random(-10, 10), r, r);
i = i + 1;
}
}while文
繰り返しはwhile文を使用します。while()のカッコの中身には条件式を書きます。
今回は、変数iが10より小さい場合は中身を繰り返すという意味になります。
whileの中身が実行されるたびにiが一つずつ増えます。
iが10になると中が処理されなくなります。
さらにellipseのx座標、y座標にはrandomを使用して一つ一つ位置のずれた円が描かれます。
今回はこれで完成です。
おわりに
最後に自分が過去にちょこっと作ったやつを載せておきます。
もうちょっといろいろ勉強してみるとこんな感じのものがさくっと作れます。
もっと試してみたい方は、Processingのサイトのサンプルをみながらいろいろといじってみてください。
また以下の書籍なども参考になります。
今回はプログラム書いたことがない人にも、プログラムを触って楽しいと感じてほしいという気持ちで書きました。
初めての人はまずは数字を変えたり、中身のコードをちょっと変えたりしながらぜひプログラミングに触れてみてください。
少しでも興味を持ってくれる人がでてくれれば幸いです！ ではまた。
「デジタルハリウッドSTUDIO 上野 by LIG」
個別相談会に参加する！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
