簡単に楽しくカッコいいデジタルアートを作りた～い

高井です。

プログラミングって難しいですよね。
個人的に勉強するにしても、何作ったらいいかよくわかんないし～・・・
というあなた！おすすめの言語があります！

Processing

初心者にも超おすすめのプログラミング言語「Processing」を紹介します。
Processingは図形描画やアニメーションが得意な言語で、文法も簡単です。

なんとなく円を描いたりするだけでそれっぽい作品ができちゃって超楽しいです。
例えばこんな感じ

さまざまな大学やプログラミング教室でも初心者向け言語として採用されており、
ネット上にもサンプルがたくさんあります。
Twitterではハッシュタグ「つぶやきProcessing」で素晴らしい作品がたくさん見られます。

ではさっそくやってみましょう！

導入方法

Processingは専用の開発環境で開発します。
ここからダウンロードします。

※ダウンロード後、寄付依頼の画面が表示されますが、無視して問題ありません。

ダウンロードしたzipを解凍したら準備完了！

いざ実践

解凍したフォルダの中にある、processing.exeを起動してみます。

この画面でプログラミングしていきます。
大きな白いエリアにコードを書いていきます。
このエリアを「スケッチブック」と呼びます。（かっこい～）

画面下部の黒いエリアは「コンソール」と「エラー」があり、タブ切り替えできます。
Javaなどと同じように、コンソールに文字を出力したりできます。

円を描いてみよう

スケッチブックにさっそくコードを書いていきます。

// 実行時、最初に一度だけ実行される
void setup(){
  size(600, 400); // 幅600px 高さ400pxの画面を作る
  background(255); // 背景を白で塗りつぶし
}

// 1秒に60回、繰り返し実行される
void draw(){
  noStroke(); // 枠線無し
  fill(0, 0, 255); // 青で塗りつぶし
  ellipse(300, 200, 180, 150); // 横300px 縦200px の位置に 幅180px 高さ150pxの円を描く
}

書きましたら、スケッチブックの左上にある再生ボタンを押します。

やった～円が描けました！（楕円ですけど）

解説

ProcessingはJavaを単純にしたような文法になっています。
※JavaScriptやPython版もあります。

・スラッシュ2つでコメントアウト
・関数の書き方（次の例でやりますが、引数も渡せます）
などJava言語でも共通する書き方になっています。

setup, drawはProcessingであらかじめ用意されている関数です。
setupは最初に一度だけ、drawは指定した時間間隔で実行されます(デフォルトは1秒に60回)。
つまり、今回のサンプルでは実感できませんが、毎秒60回、円が描画されています。

円を動かす

// 実行時、最初に一度だけ実行される
void setup(){
  size(600, 400); // 幅600px 高さ400pxの画面を作る
  background(255); // 背景を白で塗りつぶし
}

// 円の座標に使う変数
int x=0;
int y=200;

// 1秒に60回、繰り返し実行される
void draw(){
  fill(255); // 白で塗りつぶし
  rect(0, 0, 600, 400); // 左上座標(0, 0)の位置に幅600px 高さ400pxの四角形を描く
  drawEllipse(x,y); // 円を描く
  
  x++; // xの値を1増やす
}

// 円を描く関数
void drawEllipse(int x, int y){
  noStroke(); // 枠線無し
  fill(0, 0, 255); // 青で塗りつぶし
  ellipse(x, y, 50, 50); // 中心座標(x, y)の位置に幅50px 高さ50pxの円を描く
}

うごきました～！
drawの力を実感できましたね！

さらにかっこよくするなら

・draw内の白塗りつぶしを半透明にして円の軌道を残してみる
・グラデーションを使ってみる
・Processingはオブジェクト指向が使えます！ 色やサイズが異なる円を大量生成してみる

今回はProcessingの基本機能の紹介がメインでしたので
次回、もっとカッコいいアートを本格的に描きたいと思います。

最後に、今回の例では伝えきれなかったProcessingの特徴をまとめておきます。

Processingの特徴

できること・得意なこと

• アニメーション
  Processingにはムービーメーカーという機能がデフォルトで入っています。「円を動かす」のような作品を動画で保存するのが簡単にできます。
• マウス・キーボード入力
  マウス座標の取得やクリックイベント、キーボード入力などを検知できます。簡単なゲームも作れちゃいます。
• 画像処理
  画像を読み込んで表示したり、色を調整したりできます。
• ライブラリ
  複雑な画像処理や物理演算などがしたい場合、さまざまなライブラリが公開されているのでそれを利用できます。
• 音声処理
  ライブラリが必要ですが、音声ファイルを読み込んで波形を表示したりできます（かっこいい…）

苦手なこと

• 処理に時間がかかる
  大きい数字を処理する場合など、描画に時間がかかることがあります
• 文字列入力
  キーボードのどのキーを押したのかの検知はできますが、「あいうえお」のような文字列として受け取ることは難しいです

高井でした。