Help us understand the problem. What is going on with this article?

オブジェクト指向のProcessing入門

More than 1 year has passed since last update.

はじめに

この記事は東京理科大学Advent Calendar 2017の9日目の記事です。前日はnisshii_YさんのVulcanについての記事、明日はkt-tsutsumiさんの記事です。

Processingとは?

https://processing.org/

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

公式のホームページを見てみると、Processingはビジュアルアートのための言語である、と説明されています。Javaをベースに作られていますが、よりシンプルに初心者でも使いやすく学習したいようになっているもので、視覚的なフィードバックもあり、学習をより容易にしています。
実際、僕が書く記事は画像や動画などを生み出すものです。今回は触れませんが、画像を読み込んで変化を加えたり、音声と連動させるようなことも可能のよう。一時期、巷で「ジェネラティブ・アート」というワードが流行っていたと思いますが(気のせいかもしれないです)、実際にそれを実現する手段としてProcessingは有力な選択肢の一つになると思います。

Introduction

公式のダウンロードページに進んで、エディタをダウンロードしてください。これはエディタでありながら開発環境でもあるので、面倒な環境構築なしにすぐに手を動かして学習を開始することができます。

スクリーンショット 2017-12-09 17.44.21.png

Processingの実際の画面

さてここからの記事は、基本的には上記で一度説明した「ジェネラティブ・アート」のChapter 6の内容です。この本、非常に噛み砕かれているので理解しやすくとってもおすすめです()

オブジェクト指向

オブジェクトが「モノ」と訳されるように、プログラミングの世界においても「モノ」としての概念を導入するものが一般的に「オブジェクト指向プログラミング」と呼ばれるものです。
つまり、例えば「岩」というオブジェクトを想像したときに、属性として「色」「重さ」「粗さ」などが挙げられます。また、その岩を投げたりする「機能」がそのオブジェクトには備わっっていることもあります。
これらをプログラミング上で再現するのがオブジェクト指向プログラミングです。

やってみよう

長々と説明するのも面倒なので、実際にここに例としてソースコードを乗せました。

int _num = 10;
Circle[] _circleArr = {};

void setup() {
  size(500, 300);
  background(255);
  smooth();
  strokeWeight(1);
  fill(150, 50);
  drawCircles();
}

void draw() {
  background(255);
  for (int i=0; i<_circleArr.length; i+=1) {
    Circle thisCirc = _circleArr[i];
    thisCirc.updateMe();
  }
}

void mouseReleased() {
  drawCircles();
}

void drawCircles() {
  for (int i=0; i<_num; i+=1) {
   Circle thisCirc = new Circle();
   thisCirc.drawMe();
   _circleArr = (Circle[])append(_circleArr, thisCirc);
  }
}

class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;
  float xmove, ymove;

  Circle () {
    x = random(width);
    y = random(height);
    radius = random(100) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alph = random(255);
    xmove = random(10) - 1;
    ymove = random(10) - 1;
  }

  void drawMe() {
    noStroke();
    fill(fillcol, alph);
    ellipse(x, y, radius*2, radius*2);
    stroke(linecol, 150);
    noFill();
    ellipse(x, y, 10, 10);
  }

  void updateMe() {
  x += xmove;
  y += ymove;
  if (x > (width + radius)) {x = 0 - radius; }
  if (x < (0 - radius)) {x = width+radius;}
  if (y > (height+radius)) {y = 0 - radius;}
  if (y < (0 - radius)) {y = height + radius;}
  drawMe();
  }
}

これの実行結果としての画面は以下のようになります。

circles03.gif

途中で円が増えたのがわかると思いますが、これは画面をクリックしてdrawCircles()が呼ばれたことで円が増えた、ということです。

setup(), draw()

Processingにおいて、 setup()関数とdraw()関数は少し特別なものです。

setup()関数は名前の通り、初期設定としてセットアップをしてくれる関数です。
draw()関数はフレームごとに呼び出される関数です。何度も呼び出したい関数はこの中に記述します。

これらの特別な関数を用いて、自分で定義したCircleクラスを使い倒してあげる、ということです。

Circleクラスの中でどんなことが書かれているかをもう少し詳しく見てみましょう。

class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;
  float xmove, ymove;

  Circle () {
    x = random(width);
    y = random(height);
    radius = random(100) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alph = random(255);
    xmove = random(10) - 1;
    ymove = random(10) - 1;
  }

  void drawMe() {
    noStroke();
    fill(fillcol, alph);
    ellipse(x, y, radius*2, radius*2);
    stroke(linecol, 150);
    noFill();
    ellipse(x, y, 10, 10);
  }

  void updateMe() {
    x += xmove;
    y += ymove;
    / ifのいろんな条件
    drawMe();
  }
}

すごくざっくり説明しましょう。
まずは、円を構成する各要素が定義されます。円の中心座標、半径、色、透過度、一度にどれくらい動くのか等々。
次に実際に円を表示する、という機能をdrawMe()で記述しています。
最後に、updateMe()で円の中心座標を動かす(移動する)という機能が実装されました。

これが、この実装におけるCircleクラスの属性、および機能であり、オブジェクト指向プログラミング的な部分だと言えそうです。

おわりに

僕がProcessingに興味を持ったのはTwitterでDaveさんという人の作品を見たことがきっかけでした。それから視覚的なアートに対する興味が再燃し(かつてアートがとても好きでした)自分もクリエイターの側にまわってみたい、と思い実際に初めてみました。
Processingには利点が本当に多いと思います。

  • 始めるのが簡単
  • コードがシンプル
  • 視覚的なフィードバックがすぐに得られる
  • ソースコードが落ちていることも多い
  • 良い入門書がある
  • ステップアップのための中級書がある
  • (当然)他の言語にも通じる基礎を学ぶことができる

Processingだけでできることには限りはありますが、ビジュアルアートを実際にやってみる上では極めて適している言語の一つだと思います。

個人的には、クリエイティブだと言われる小・中学生こそProcessingでビジュアルアートに触れてみて欲しいなと思ったりします。

実用性皆無じゃん、無価値

とおっしゃる方も少なくないと思います。あくまでプログラミングは手段で、何をやりたいか、何を開発したかこそが全て、という発想です。
一定理解はするのですが、実用性だけが尊ばれるべきではないと個人的には思います。余白を持って生きていきたい人生ですね。
僕は普段RailsでWebの開発をしているのですが、Processingを通したジェネラティブ・アートにはまた別の面白さがあると思います。決して大きなコミュニティではないかもしれませんが、面白いかも?と思った方がもしいればぜひProcessingに触れてみて欲しいと思います。
僕はまだ本当に初心者でペーペーなんですが、Twitterでたまに自分でやったGifをあげたりしていますのでよかったらマサカリをお待ちしています!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした