CG関連

プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】


Warning: Trying to access array offset on value of type bool in /home/mochaccino8/coinbaby8.com/public_html/wp-content/themes/mag_tcd036/functions/short_code.php on line 36

Warning: Trying to access array offset on value of type bool in /home/mochaccino8/coinbaby8.com/public_html/wp-content/themes/mag_tcd036/functions/short_code.php on line 36

Warning: Trying to access array offset on value of type bool in /home/mochaccino8/coinbaby8.com/public_html/wp-content/themes/mag_tcd036/functions/short_code.php on line 36

Warning: Trying to access array offset on value of type bool in /home/mochaccino8/coinbaby8.com/public_html/wp-content/themes/mag_tcd036/functions/short_code.php on line 36

遊ぶようにプログラムできる『P5.js(ProcessingのJavaScript版)』には、

円や四角形など最初からいくつかの図形が使えるようになっているのですが、

ちょっと慣れてくると、

アオキ
自分の好きなように形をつくりたい・・っ!

と思うようになってきまして。

と言うわけで今回は、

『P5.js』を使った図形の作り方をいくつかまとめてみることにしました。

Sponsored link

プログラムで図形の描き方 頂点(Vertex)を使ってみる

『P5.js』には、

グラフィック系のプログラマーにはお馴染みの、

『頂点(Vertex(バーテックス))』を指定する機能があります。

『頂点(vertex)』を使うには3つのメソッドを使う必要があります。

  • beginShape()・・開始
  • vertex(x, y)・・頂点を指定
  • endShape(CLOSE)・・終了(CLOSEで始点とつなぐ)

例えば平行四辺形を描くとこんな感じになります。

See the Pen
p5.js vertex-test1
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

function setup() {
  createCanvas(250,250);
}

function draw() {
  background(200);
  beginShape(); // 描画開始
  vertex(30, 100); //頂点を指定
  vertex(200, 100);
  vertex(230, 200);
  vertex(60, 200);
  endShape(CLOSE); //描画終了
  
}

頂点が4つあるのでそれぞれ、
横軸をx、縦軸をyで4箇所指定しています。

アオキ
頂点の箇所を変えればいろんな形がつくれそうですな。

参考
Processing で描ける図形まとめ

プログラムで図形の描き方 バラ曲線の使い方

『P5.js』に限らず、

数学を使って図形をつくる

という事は昔から行われていたようで。

今回は『バラ曲線』を使って図形をつくってみます。

  • バラ曲線・・英語だとRose CurveもしくはRose Pattern(ローズパターン)

こちらの動画がとってもわかりやすかったので参考にさせていただきました。

『バラ曲線』で使う数式はこれ。

$r = \cos(k\theta)$

参考記事
Wikipedia Rose Curve

『バラ曲線』は『極座標(きょくざひょう)』で考えられているので、

『直交座標』に変換して使う必要があります。

『極座標』についての参考記事

三角形の1片の長さを『$r$』とすると、変換の式はこうなります。

$x = r * \cos\theta $
$y = r * \sin\theta $

これを組み込んでいきます。

Sponsored link

プログラムで図形の描き方 バラ曲線を使ってみる

先ほどの動画を参考につくってみます。

See the Pen
p5.js rose-curve-test1
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

function setup() {
  createCanvas(250,250);
}

function draw() {
  background(200);
  translate(width / 2, height / 2 );

  beginShape();
  stroke(200);
  strokeWeight(1);
  
  for (var a = 0; a< TWO_PI; a += 0.1){ //角度0から360度分繰り返す
  var r = 100;  // 三角形の一片の長さ (円の半径)
  var x = r * cos(a);
  var y = r * sin(a);
  vertex(x, y);
  }
  endShape(CLOSE);
}

角度は 360 ではなくて『ラジアン』で、 TWO_PI (2π) で指定しています。

『ラジアン』についての参考記事

この状態だとただの円なんですが、

『バラ曲線』の凄いところは、『r』の値を変えるとどんどん図形が変わるというところ。

See the Pen
p5.js rose-curve-test2
by aoki_monpro (@suica)
on CodePen.

コードはこう。

function setup() {
  createCanvas(250,250);
}

function draw() {
  background(200);
  translate(width / 2, height / 2 );

  beginShape();
  stroke(200);
  
  for (var a = 0; a< TWO_PI; a += 0.01){
  var r = 100 * cos(7 * a); //バラ関数 ここを変更してます。
  var x = r * cos(a);
  var y = r * sin(a);
  vertex(x, y);
  }
  endShape(CLOSE);
}
アオキ
思わずおーっていっちゃいますな。

『r』の値を 5/ 8 に変えるとこんな図形も描けます。

See the Pen
p5.js rose-curve-test3
by aoki_monpro (@suica)
on CodePen.

コードはこう。

var k = 5/8; //変数で指定してみる

function setup() {
  createCanvas(250,250);
}

function draw() {
  background(50); //背景を黒に
  translate(width / 2, height / 2 );

  beginShape();
  noFill(); //塗りつぶしなし
  stroke(200);
  strokeWeight(1);
  
  for (var a = 0; a< TWO_PI * 10; a += 0.01){ //1周だと足りないので10周
  var r = 100 * cos(k * a);
  var x = r * cos(a);
  var y = r * sin(a);
  vertex(x, y);
  }
  endShape(CLOSE);
}
アオキ
ちょっと変えただけなのにだいぶ雰囲気変わりますな・・!

『バラ曲線(別名:正葉曲線』の数値の対応表はこのページが詳しいです。

花の曲線を描く

Sponsored link

プログラムで図形の描き方 バラ曲線で桜吹雪

『バラ曲線』といくつかのメソッドを使いこなす事で、

こんな『桜吹雪』もつくれるようです。

See the Pen
p5.js rose-curve-sakura
by aoki_monpro (@suica)
on CodePen.

参考記事
p5.js(Processing)で桜吹雪を描く

コードはこう。

var sakuraNum = 300;

var fubuki = [];

var colors = [];

function setup() {
  createCanvas(windowWidth, windowHeight);

  for (var i = 0; i < sakuraNum; i++) { //花びらの数だけSakuraを生成
    fubuki.push(new Sakura());
  }

  noStroke();

  colors.push(color(244, 191, 252, 150)); //いくつかの色のパターン
  colors.push(color(255, 219, 248, 150));
  colors.push(color(246, 204, 252, 150));
}

function draw() {
  background(360);

  for (var i = 0; i < sakuraNum; i++) { //花びらの数だけ描画
    fubuki[i].draw();
    fubuki[i].move();
  }
}

function Sakura() { 
  var n = 4;
  var A, md, r, x, y;

  this.xDef = random(width); //座標をランダムで指定
  
  this.xAmp = random(50,100);
  this.xSpeed = random(1,2);
  this.xTheta = random(360);
  
  this.ox = this.xDef + this.xAmp * sin(radians(this.xTheta));
  this.oy = random(height);
  this.rotateT = random(360);
  this.size = random(20, 50);

  this.ySpeed = this.size / 20;
  this.sizeYScale = 1;
  this.sizeYT = random(360);
  this.sizeYSpeed = this.size / 30;
  this.c = floor(random(3));

  this.draw = function() {
    fill(colors[this.c]);

    push();
    translate(this.ox, this.oy);
    rotate(radians(this.rotateT));
    beginShape();
    for (var t = 0; t < 360 / 4; t++) { //この辺からバラ関数の出番
      A = n / PI * radians(t);

      md = floor(A) % 2;

      r = pow(-1, md) * (A - floor(A)) + md;

      R = r + 2 * calcH(r);

      x = this.size * R * cos(radians(t));
      y = this.size * this.sizeYScale * R * sin(radians(t));

      vertex(x, y);
    }
    endShape(CLOSE);
    pop();
  };

  this.move = function() {
    this.ox = this.xDef + this.xAmp * sin(radians(this.xTheta));
    this.xTheta += this.xSpeed;
    
    this.oy += this.ySpeed;
    this.sizeYT += this.sizeYSpeed;
    this.sizeYScale = abs(sin(radians(this.sizeYT)));

    if (this.oy > height + this.size) {
      this.oy = -this.size;
    }
  };
}

function calcH(x) {
  if (x < 0.8) {
    return 0;
  } else {
    return 0.8 - x;
  }
}
アオキ
ちょいややこしいけど、こんなキレイな桜がつくれるなら読み解く価値ありますな・・!

プログラムで図形の描き方 スピログラフを再現する

『バラ関数』は使っていませんが、

子供の頃に遊んだ『スピログラフ』を再現することもできるようです。

スピログラフってこんなの。

できる図形はこんなの。

参考記事

p5.jsで追憶の「スピログラフ」を再現する

アオキ
子供の頃に夢中で遊んでました、懐かしいわー。
Sponsored link

プログラムで図形の描き方をまとめてみて

遊ぶようにプログラムができる『P5.js』を触っているうちに、

子供の頃の記憶というか、

無邪気でピュアでイノセントワールドだったあの頃を思いだす事になりました。

生涯学習なんて言われている時代だからこそ、

プログラム使いつつ、子供心を忘れず、楽しんでスキルアップしていきたいもんですね。

アオキ
い〜つの日も〜この〜胸に〜なが〜れてる〜メロディー♪

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

3. プログラミング実況をやってみた その1【P5.js】

4. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

5. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

6. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

7. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

8. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

9. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

10. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

11. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

12. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

13. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

14. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

15. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

『アート(視覚美術)』関係ではこんな記事も読まれています。

1. 【アート】がわからないから読んだオススメ本【めっちゃ読みやすい】

2. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

3. 【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.js】

4. 『デザインあ』展 熊本 2019の感想〜ちょっとだけ視野が広がった感〜

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【JavaScript】初心者向けの動画をリリースしました【Udemy】
  2. オンライン教材

    【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】
  3. CG関連

    【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【U…
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. STEAM教育

    熊本市東区でプログラミングのワークショップやります〜夏休み特別企画 こども向けス…
PAGE TOP