Processingで円を描こう

トミー

2016.08.09

こんにちは。デザイナーのトミーです。
前回、「Processingをはじめよう」にて、インストールまでをご紹介しました。今回から、実際に図形を書いていきます！

Processingをはじめよう

トミー

2016.08.08

まずは、起動！

Processingを起動すると、sketch〜からはじまるプロジェクトが開きます。試しにそのまま保存してみましょう。Processingでは、ファイルを保存すると、そのファイル名のフォルダができ、そのなかに同じファイル名.pdeが生成されます。少し慣れないのですが、ファイル名と同じフォルダで作業するのがお約束です。たとえば、sketch_A.pdeというファイル名の場合、

sketch_A
　　└─ sketch_A.pde

といった具合。保存するだけで勝手にフォルダができるので、そのまま作業していれば何も問題はないですね。

はじめに

日本語でコメントアウトしたいので、まず最初に日本語を使用できる設定にしましょう。Processing -> 環境設定 -> 設定：複雑なテキスト入力を有効にするにチェックをしたら、エディタとコンソールのフォントを日本語フォントに変更しましょう。

settings

基本のキ

1.セットアップで初期設定をして、2.描画する。簡単なものだとこれで絵（図形）が描けます。すこし内容が複雑になってきたら、関数やクラスを使っていく感じです。

// 1.セットアップで初期設定をする
void setup() {
}

// 2.描画する
void draw() {
}

// 3.関数を使う
void function {
}

// 4.クラスを使う
class className {
}

図形を描こう

基本の流れがなんとなく分かってきたところで、実際に図形を描いていきましょう！　まずは円ですね、円。

円を描く

float radius;
int size = 40; 

void setup() {
  size(610, 610); // スクリーンサイズ (width,height)
  frameRate(60);  // フレームレート
  background(0);  // 背景色 
  smooth();       // 線を綺麗に表示
}

void draw() {
  fill(240, 240, 240); // RGBカラー(白)塗りつぶし
  noStroke(); // 線無し
  translate(width / 2, height / 2); // スクリーンの中心へ移動
  ellipse(0, 0, size, size); // 円(座標x, 座標y, width, height);
}

円を回転させる

PVector location;
float phase, velocity, radius;
int size = 40;

void setup() {
  size(610, 610);
  frameRate(60);
  background(0);
  noStroke();
  phase = 0.0;
  velocity = 8.0; // 速力度
  radius = height / 4.0;
  location = new PVector(0, 0);
}
void draw() {
  stroke(240, 240, 240);
  fill(0, 15);
  rect(-1, -1, width+1, height+1);
  translate(width / 2.0, height / 2.0);
  location.x = cos(radians(phase)) * radius;
  location.y = sin(radians(phase)) * radius;
  noFill();
  ellipse(location.x, location.y, 40, 40);
  phase += velocity;
}

値を変えて実行してみる

値を変えて実行してみましょう。思いがけない軌跡を描いたりを確認してるだけで、面白いし理解も深まりそうです。丸→四角形にして、少し書き換えてみました。

みんな大好きジェネラティブ・デザインをチェック

値を変えてみて、面白いと感じたらジェネラティブ・デザインもチェックしておきたいですね。サンプルもダウンロードできるのでとても勉強になります。ダウンロードしたら、スケッチ -> ライブラリをインポート -> ライブラリを追加から、GenerativeDesignのライブラリをインポートしておくとサンプル見るとき良いかもしれません。