【p5js/プログラミング】楕円形。

Art

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

１６日目のテーマは「楕円形」。

とりあえず、点で楕円を作れるように調整して作ってみました。
そこから、noise()関数で変化をもたせると、なんだか宇宙を感じたので、回転させてみました。
最後に、点の大小をランダムにすることで光っているように表現を持たせて完成です。

そんなことをこのコードで表現してみました。

この銀河を複数個Canvas上に作りたかったのですが、for()とtranslate()で試しましたが、ランダムだと常に位置が変わってしまうので、うまく行かず。。。

もしわかる方がいれば教えて下さい。

では、ごらんあれ〜。

// const num = 2;
var angle = 0;
var x;
var y;
var r = 150;


function setup(){
  var p = createCanvas(500,500);
 // noLoop();
}


function draw(){
  background(0);
  translate(width/2,height/2);
  galaxy();
}

function galaxy(){
  stroke(255);
  rotate(angle);
  for (var i = 0; i < TWO_PI; i+=0.05) {
    if (i < HALF_PI) {
      x =r/2 * cos(i);
      y =r  * sin(i);
    }else if(HALF_PI <= i && i < PI) {
      x =r/2 * cos(i);
      y =r * sin(i);
    }else if (PI <= i && i < HALF_PI*3) {
      x =r/2 * cos(i);
      y =r * sin(i);
    }else if (HALF_PI*3 <= i && i <= TWO_PI) {
      x =r/2 * cos(i);
      y =r * sin(i);
    }
    n = noise(x,y);
    point(x*n,y);
  }
  angle += 0.001;
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。

コメント