【Processing】プログラミング未経験者でも"夢中になれる"プログラミング言語

はじめに

小中学校でもプログラミングの授業が始まるなど、プログラミングの注目度が高まっています。私もプログラムを書きはじめて4~5年ほどの時間が経過し、現在はPythonやJavascriptで業務アプリケーションを作成しています。そんな私がプログラミングを始めたきっかけになったプログラミング未経験者でも"夢中になれる"プログラミング言語を紹介します。

未経験者に立ちはだかる壁

プログラミング未経験者にとって、最も難易度が高いことは何でしょうか？言語の仕様を理解すること？バグを出さないこと？何千行のソースコードを書くこと？これはあくまで私の意見ですが、目的をつくることだと思います。作りたいものや達成したいことがない場合、プログラミングによって得られる達成感や満足感がなく、夢中になることもなくPCを閉じてしまいます。

なぜProcessing?

目的よりも可能性を感じること
Processingを始めるとわかるのですが、構造が非常に簡単かつ直感的です。すべてのソースコードが画面描画と直結しており、白いキャンバスと絵の具のような感覚です。幼かったころ何の目的を持たずとも、可能性を感じて夢中になることができました。プログラミング未経験者が感じていた壁が、Processingには一切ありません。

インストール・実行が簡単
https://processing.org/download/からzipファイルをダンロードし、展開したファイルをダブルクリックするだけで開始することができます。通常プログラミングをやっていると、ソースコードは専用のエディタで書き、実行はコマンドラインといった構成が多いですが、Processingではエディタでかいたソースコードを画面上部の三角ボタンで実行するだけなので、そのあたりがシンプルになっている点も魅力的です。

実際に試してみる

基本編

アプリケーションを起動すると、上記のようなエディタが現れます。ここにソースコードを書いていきます。

Processingでは大きく2つのメソッドを実装します。1つは初期化処理をするsetupという関数です。最初に一度だけ呼ばれます。もう一つは毎フレーム呼ばれる描画イベント関数drawという関数です。

まずはsetup関数の実行してみます。以下のソースコードを貼り付けて画面上部の三角形のボタンをクリックします。

void setup() {
  size(540, 360);
  rect(40, 80, 160, 120);
}

sizeは画面の横幅と縦幅を指定します。この場合は、横540px、縦360pxとなります。rectは四角形です。左から40px、上から80pxの位置に横160px、縦120pxの四角形を描画しています。簡単に四角形を描画することができました。続いてこの四角形を動かしてみます。

void setup() {
 size(540, 360);
}

void draw() {
 background(0);
 rect(frameCount * 2, frameCount, 160, 120);
}

frameCountは何フレーム目を知るための変数です。draw関数は毎フレーム実行される関数で、1フレームごとに四角形が右に2px、下に1pxづつずれていきます。

かなり簡単に動かすことができました。空行を除けばたったの7行です。

応用編

3Dを用いるとこんなこともできます。

float boxSize = 20;
float margin = boxSize*2;
float depth = 400;
color boxFill;

void setup() {
  size(640, 360, P3D);
  frameRate(60);
  noSmooth();
  noStroke();
}

void draw() {
  background(255);
  translate(width/2, height/2, -depth);
  rotateY(frameCount * 0.01);
  rotateX(frameCount * 0.01);

  for (float i =- depth/2+margin; i <= depth/2-margin; i += boxSize){
    for (float j =- height+margin; j <= height-margin; j += boxSize){
      for (float k =- width+margin; k <= width-margin; k += boxSize){
        // Base fill color on counter values, abs function 
        // ensures values stay within legal range
        boxFill = color(abs(i), abs(j), abs(k), 50);
        pushMatrix();
        translate(k, j, i);
        fill(boxFill);
        box(boxSize, boxSize, boxSize);
        popMatrix();
      }
    }
  }
  
  fill(0);  
}

ソースコードの詳細な解説はしませんが、rotateX, rotateYが回転を表し、translateで座標をずらしています。先程の四角形のときとフレームごとに少しずつ回転する量が大きくなっていくことがわかります。これもたったの35行です。

最後に

Processingは視覚的なアウトプットが簡単に得れるように設計されてたプログラミング言語です。言語の構造はJavaと等しいため型などの基本的な文法を学ぶこともできます。このNoteを通じて一人でも多くの人がプログラミングに夢中になってもらえると嬉しいです。

参考

チートシート
https://processing.org/