Processingで円を描こう

トミー


Processingで円を描こう

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

まずは、起動!

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);
}

b

円を回転させる

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;
}

a

値を変えて実行してみる

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

b
c

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

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

Generative Gestaltung from onformative on Vimeo.

いかがでししたでしょうか。Processingでは、コードを描いて実行までできるので結果がすぐ帰ってきて楽しいですね。pngやgifに保存できたりもするので、どこかWebでも使える場面があるかもですね。それではまた。

トミー
この記事を書いた人
トミー

デザイナー

おすすめ記事

Recommended by