カテゴリー: 教材：プログラミング

Processingには、あらかじめ基本的な図形を描く関数が用意されています。以下に基本的な図形の描画方法を記載します。

点
point(x座標, y座標);

線
２つの座標(x座標1, y座標1)と(x座標2, y座標2)を結ぶ１本の直線を描きます。
line(x座標1, y座標1, x座標2, y座標2);

方形
方形（正方形や長方形）は、４つのパラメータで設定します。方形の左上の角を基準点にx座標, y座標で指定し、幅と高さを指定します。
rect(x座標, y座標, 幅, 高さ);

円形
円形（正円や楕円）は、４つのパラメータで設定します。円形の中心を基準点にx座標, y座標で指定し、幅と高さを指定します。
ellipse(x座標, y座標, 幅, 高さ);

三角形
三角形は６つのパラメータを指定して描きます。
triangle(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3);

四辺形
四辺形は８つのパラメータを指定して描きます。
quad(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3, x座標4, y座標4);

描線の太さ
図形の描線の太さを変更できます。描線のデフォルトは1ピクセルですが、strokeWeight()関数を使って変更できます。strokeWeight()関数のパラメータは１つで、太さをピクセル数で指定します。
以下のように記述します。

size(400,400);
strokeWeight(8);
ellipse(200,200,200,200);

描画の順序
プログラムはコードの先頭１行目から順に読み込まれていくため、コードを書く順番は図形の重なり順などに大きく影響します。
重なり合う複数の図形がある場合は、最後に描かれた図形が一番上に重なって表示されます。

描画モード
図形を描画する際に、描画の基準点を設定することができます。
方形の記述ではrectMode()関数を使用して以下のように基準点を設定できます。

rectMode(CORNER) rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ);　//デフォルトではこの基準点を使う
rectMode(CORNERS) rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標);
rectMode(CENTER) rect(中心のx座標, 中心のy座標, 幅, 高さ);
rectMode(RADIUS) rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分);

円形の記述ではellipseMode()関数を使用して以下のように基準点を設定できます。

ellipseMode(CENTER) ellipse(中心のx座標, 中心のy座標, 幅（直径）, 高さ（直径）); //デフォルトではこの基準点を使う
ellipseMode(RADIUS) ellipse(中心のx座標, 中心のy座標, 幅（半径）, 高さ（半径）);
ellipseMode(CORNER) ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 幅（直径）, 高さ（直径）);
ellipseMode(CORNERS) ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 円が収まる四角い領域の右下角のx座標, 円が収まる四角い領域の右下角のy座標);

コードは以下のように記述します。

size(400,400);
rect(100,50,80,80);
ellipse(100,50,80,80);
ellipseMode(CORNER);
rect(200,50,80,80);
ellipse(200, 50, 80, 80);

画面サイズの設定
Processingでは、画面（実行ウィンドウ）のサイズを以下の関数*を使用して設定することができます。

size(画面の幅, 画面の高さ);

*関数とはプログラミングの構成単位であり、パラメータと呼ばれる数値などで定義することができます。

それでは、幅800ピクセル*、高さ600ピクセル*のウィンドウを以下のようにテキストエディタに記述して作成してみましょう。

size(800,600);

*パラメータで扱う単位はコンピュータの画面上で画像を扱う際の最小単位であるピクセル（Pixcel）です。

練習課題　数値を変えて様々なサイズの画面（実行ウィンドウ）を作成してみよう。

座標について
座標とは空間上の１点を指定するための方法です。画面に図形を描くためには、図形の位置を決める必要があり、座標を利用します。Processingの画面（実行ウィンドウ）では以下のようにして画面上の１点を指定します。

画面の左上を基準点とし右に移動した距離xと下に移動した距離yで１点を指定する。

それでは、サイズが幅400ピクセル、高さ４００ピクセルの画面（実行ウィンドウ）を作成し、x座標が200ピクセル、y座標が200ピクセルの位置に点を描画してみましょう。

点の描画にはpoint()関数を用います。
point(x座標,y座標);

size(400,400);
point(200,200);

練習課題03:　幅400ピクセル、高さ400ピクセルの画面（実行ウィンドウ）の四隅に点を描画してみよう。

Processingでサウンドデータを扱う際に使われるサウンドライブラリminimを使ってみましょう。

minimの解説ページ（英語）

サウンドファイルの再生
はじめに、サウンドファイルを再生するコードを作成してみましょう。
再生するサウンドファイルはmp3形式とします。フリー素材などをダウンロードしてファイル名をsound.mp3としましょう。
SketchメニューからAdd File…メニューを選択しsound.mp3をdataフォルダに読み込んでおきます。
それでは以下のコードを記述してみましょう。

import ddf.minim.*;
 
Minim minim;
AudioPlayer sound;
 
void setup(){
  size(400, 400);
  minim = new Minim(this);
  sound = minim.loadFile("sound.mp3");
  sound.play();
}
 
void draw(){
  background(0);
}
 
void stop(){
  sound.close();
  minim.stop();
  super.stop();
}

このコードではimport ddf.minim.*;の行でサウンドライブラリminimを呼び出しています。Minim型変数のminimを宣言し、AudioPlayer でサウンドファイルを格納する変数soundを宣言します。sound = minim.loadFile(“sound.mp3”);の行でサウンドファイルsound.mp3を読み込み、sound.play();でサウンドファイルを再生しています。またプログラム終了時にサウンドファイルの再生を止めるため、void stop(){ 〜 }を記述しておきます。

サウンドファイルの巻き戻し
サウンドファイルを巻き戻すことで再生したサウンドファイルを何度も再生することができます。以下のコードを記述してみましょう。

import ddf.minim.*;
 
Minim minim;
AudioPlayer sound;
 
void setup()
{
  size(400, 400);
  minim = new Minim(this);
  sound = minim.loadFile("sound.mp3");
  fill(0, 255, 0);
}
 
void draw()
{
  background(255);
}
 
void stop()
{
  sound.close();
  minim.stop();
  super.stop();
}
 
void mousePressed() { 
    sound.play();
    sound.rewind();
}

このコードではsound.play();の行でサウンドファイルを再生した後に、sound.rewind();でサウンドファイルを巻き戻すことでマウスを画面上でクリックするごとにサウンドファイルを無限に再生させています。

ミリ秒
Processingでは時間の経過をプログラムで扱うことができます。まずはじめにmillis()関数を使ってみましょう。millis()関数はプログラムが起動してからの経過時間をカウントしています。単位はミリ秒（千分の１秒）です。（1000ミリ秒で１秒）
それでは以下のコードを記述してみましょう。

void setup(){
  size(400,400);
}

void draw(){
  background(255);
  int timer = millis();
  translate(200,200);
  rotate(timer/1000.0);
  line(0,0,100,100);
}

秒、分、時
Processingではシステム（コンピュータのOS）に設定された時刻を取得することができます。
秒の取得は second()関数、分の取得は minute()関数、時の取得は hour()関数を使用します。
はじめに、second()関数を使ったコードを作成してみましょう。

void setup() {
  size(600,200);
  frameRate(60);
}

void draw() {
  background(255);
  int s = second();
  int time = s*10;
  line(time,0,time,400);
}

上のコードでは線のX座標をsecond()関数に対応させています。

それでは、second()関数に加えて、minute()関数とhour()関数を使ったコードを記述してみましょう。

void setup() {
  size(600,200);
  frameRate(60);
}

void draw() {
  background(255);
  int s = second()*10;
  int m = minute()*50;
  int h = hour()*50;
  for(int i=0;i<600;i+=50){
    line(i,0,i,200);
  }
  ellipse(s,50,20,20);
  ellipse(m,100,20,20);
  ellipse(h,150,20,20);
}

上のコードは、second()関数、minute()関数、hour()関数を使って、図形（円）で秒、分、時を表現しています。

Processingで描画することができるオブジェクトにはそれぞれ座標が存在します。Processingの実行ウィンドウの座標（グローバル座標）は常に左上が座標の原点になりますが、個々のオブジェクトの座標（ローカル座標）は移動、回転、伸縮することができます。

座標の移動
それでは、まず座標の移動について解説します。はじめに座標の移動を実行せずに図形を描画します。

void setup(){
  size(400,400);
}

void draw(){
  rect(0,0,50,50);
}

このプログラムでは図形（正方形）の原点（図形の左上）をX座標=0,Y座標=0（以下(0,0)と記述）としているため、実行ウィンドウの左上から描画されています。

次に図形（正方形）のローカル座標をtranslate()関数を使って移動させてみましょう。

void setup(){
  size(400,400);
}

void draw(){
  translate(200,200);
  rect(0,0,50,50);
}

上のコードでは図形（正方形）の座標は(0,0)であるにも関わらず、実際に図形が描画される位置はtranslate()関数によって実行ウィンドウ上の(200,200)の位置に移動しています。

更に、複数のtranslate()関数を使った例を見てみましょう。

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  translate(mouseX,mouseY);
  rect(0,0,50,50);
  translate(50,50);
  rect(0,0,25,25);
}

上のコードでは、複数のtranslate()関数の効果が合成されることが確かめられます。

座標の回転
図形のローカル座標を回転させるためにはrotate()関数を使用します。rotate()関数のパラメータは１つだけで、回転角（ラジアン）を指定します。
それでは、図形の座標を回転させてみましょう。

void setup(){
  size(160,160);
}

void draw(){
  background(0);
  rotate(mouseX/100.0);
  rect(0,0,160,20);
}

上のコードではrotate()関数を使って図形を回転しています。回転角（ラジアン）は０〜３６０度までを0〜約6.28の数値で表します。このコードではX座標を100.0で割ることで回転角（ラジアン）に変換しています。

座標の伸縮
座標を伸縮させるには、scale()関数を使用します。scale(2)とすると画面内の図形はすべて２倍の大きさになります。scale(0.5)とすると、図形はすべて半分の大きさになります。
それでは、以下のコードで確認してみましょう。

void setup(){
  size(400,400);
}

void draw(){
  rect(0,0,100,100);
  scale(0.5);
  rect(0,200,100,100);
  scale(4);
  rect(0,100,100,100);
}

座標の復元
座標系の変換（移動、回転、伸縮）は、変換後のすべてのコードに影響を及ぼしますが、その影響の範囲を限定し、変換以前の状態に復元することができます。pushMatrix()関数とpopMatrix()関数を使うことで変換した座標の復元ができます。pushMatrix()関数を実行すると、それ以降に記述した座標系変換の情報が記録され、popMatrix()が使われると変換前の座標系に戻ります。pushMatrix()関数とpopMatrix()関数は常にペアで使う必要があります。
それでは、以下のコードを使って確認してみましょう。

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  pushMatrix();
  translate(mouseX,mouseY);
  ellipse(0,0,50,50);
  popMatrix();
  ellipse(200,200,200,200);
}

上のコードでは１つめの図形（円）の座標系の移動をマウスの座標に合わせていますが、pushMatrix()関数とpopMatrix()関数を使って、座標系の移動が復元されるため、２つめの円は座標系の移動の影響を受けません。

生成される予測できない数列の要素を乱数と呼びます。Processingではrandom()関数を使って乱数を擬似的に生成することができます。
ランダムな線の描画
random()関数は呼び出すたびに異なる数値を返します。パラメータで値の上限あるいは値の範囲を指定することができます。たとえばrandom(10)とすると、0以上、10未満の乱数が生成されます。生成される数値は浮動小数点になるため、変数は float型を使います。
それでは、乱数を使って線を描画してみましょう。線の配色も乱数で生成しています。

void setup(){
   size(400, 400);
   background(255);
}

void draw(){
  for(int i = 0; i < 100; i++){
    stroke(random(255), random(255), random(255));
    line(random(width), random(height), random(width), random(height));
  }
}

ランダムな円の描画
次に円を乱数を使って描画してみましょう。

float speed = 5;
float x = 200;
float y = 200;

void setup(){
   size(400, 400);
   background(255);
}

void draw(){
    x += random(-speed, speed);
    y += random(-speed, speed);
    noStroke();
    fill(random(255), random(255), random(255));
    ellipse(x, y, 100, 100);
}

課題：画像（PNGやJPEG)を移動や、乱数の生成を使って変化させる作品を作成してみましょう。

Processingを使った動きの表現を学んで行きましょう。

図形の水平移動
図形を水平移動させます。以下のコードを記述してみましょう。

float speed = 0.5;
float x = 0;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed;
  ellipse(x,100,40,40);
}

このコードで変数宣言に使ったデータ型である float 型は小数点を持つ数値を扱うことができるため細かな動きが表現できます。

画面から出ていった図形が反対から入ってくる
上のコードでは画面の右端から図形が出て行ったら、それっきり戻ってくることはありません。コードを改良して右端から出ていった図形が左端から入ってくるように変更してみましょう。

float speed = 0.5;
float x = 0;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed;
  if(x>400){
    x = 0;
  }
  ellipse(x,100,40,40);
}

このコードでは、先ほどのコードに加えてif文を使ってxの値が画面サイズの幅（この例では400）より大きくなった場合に、xの座標を0に戻すことで、右端から出ていった図形が左端から入ってくるように処理しています。

図形の跳ね返り１
次のコードでは図形が右端まで行ったら、まるで壁に当たって跳ね返ったかのように左に戻るというように変更してみましょう。

float speed = 0.5;
float x = 100;
int direction = 1;

void setup(){
  size(400,200);
}

void draw(){
  background(0);
  x += speed*direction;
  if((x>400-20)||(x<0+20)){
    direction = -direction;
  }
  ellipse(x,100,40,40);
}

上のコードでは　direction　という変数を使って、図形のx座標の位置が画面の幅より大きい場合と小さい場合に direction の符号を反転させて図形の進行方向を変えています。

図形の跳ね返り２
次のコードでは斜め方向に図形が移動し、壁に跳ね返って戻るという表現を実装してみましょう。

float xpos = 100;
float ypos = 100; 
float xspeed = 0.5;
float yspeed = 1;
int xdirection = 1;
int ydirection = 1;

void setup() 
{
  size(400, 400);
}

void draw() 
{
  background(0);
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );
  if ((xpos > 400-20) || (xpos < 0+20)) {
　　xdirection *= -1; 
　} 
　if ((ypos > 400-20) || (ypos < 0+20)) {
　　ydirection *= -1;
  }
  ellipse(xpos, ypos, 40, 40);
} 

上のコードでは、先ほどのコードに加え、x座標、y座標それぞれの進行方向に対して壁に当たると符号が反転し逆方向に進行する表現を実装しています。

Processingでは各種フォントを読み込んで扱うことができます。

フォントを使う
TrueTypeフォントをdataフォルダに格納して使用する方法を学びましょう。はじめにProcessingの新規スケッチ(sketch_）を開きます。「Tools」メニューより「Create Font…」を選択すると、下のようなウィンドウが開きます。

Create Font ウィンドウの中のフォント一覧から使用したいフォントを選択し、Sizeを選び（48ポイントより大きい場合に設定すると良い）、プレビューで確認したら「OK」ボタンを押します。「Sketch」メニューの「Show Sketch Folder」を実行し、dataフォルダの中に作成したフォントデータが格納されているか確認しておきましょう。以下のプログラムでは Helvetica-Bold-48.vlw という名称のフォントを使用します。

それではProcessingでフォントを表示するプログラムを記述してみましょう。

PFont font;

void setup(){
  size(800,400);
  font = loadFont("Helvetica-Bold-48.vlw");
}

void draw(){
  background(0);
  textFont(font,32);
  text("Good!",20,200);
}

まず、PFont変数を作成します。この例では font という変数名にしました。loadFont()を使用して、変数 font に作成したフォント Helvetica-Bold-48.vlw を格納します。textFont()を使用してフォントの表示サイズを決めます。text() を使用して表示するテキスト（文書）と座標を指示します。それでは、フォントを使った別のプログラムを記述してみましょう。

float x1,x2,x3,x4,x5;
float y1,y2,y3,y4,y5;
float easing1 = 0.1;
float easing2 = 0.2;
float easing3 = 0.3;
float easing4 = 0.4;
float easing5 = 0.5;

PFont font;

void setup(){
size(800,400);
font = loadFont("HelveticaNeue-Bold-48.vlw");
}

void draw(){
background(0);
float targetX = mouseX;
float targetY = mouseY;
x1 += (targetX - x1)*easing1;
x2 += (targetX - x2)*easing2;
x3 += (targetX - x3)*easing3;
x4 += (targetX - x4)*easing4;
x5 += (targetX - x5)*easing5;
y1 += (targetY - y1)*easing1;
y2 += (targetY - y2)*easing2;
y3 += (targetY - y3)*easing3;
y4 += (targetY - y4)*easing4;
y5 += (targetY - y5)*easing5;
textFont(font,32);
text("G",x1,y1);
text("o",x2+40,y2);
text("o",x3+80,y3);
text("d",x4+120,y4);
text("!",x5+160,y5);
}

課題３：画像とフォントを組み合わせたプログラムを作成してください。これまでに学んだ内容を自由に組み合わせて作成してください。