not good but great

プログラミング、アート、映画・本の感想について書きます。

Processingで円の境界をぐにゃぐにゃ動かす


円の境界を動かしましたが、つなぎ目のところがうまく合いませんでした。

参考にしたもの

イメージではこんなふうに綺麗に動かしたいと思っています。
http://www.flyingfrying.com/

しかし上の例ではおそらく、境界が規則的に動いています。もう少し不規則に動かすために、今回コードを書きました。

参考にしたのはこれです。
https://processing.org/examples/noisewave.html
これを円で実現させようとしました。

code

void draw(){
  background(255);
  noFill();

  float xoff = 0;
  float radius = 100;
  float px,py;
  int centx = width / 2;
  int centy = height / 2;
  float chaos = 10;

  //drawing polygon
  beginShape();
  for(float ang = 0;ang <= 360 * 5;ang += 1){
    float rad = radians(ang);
    
    px = centx + radius * cos(rad);
    py = centy + radius * sin(rad);
    
    float x = map(noise(xoff,yoff),0,1,px - chaos,px + chaos);
    float y = map(noise(xoff,yoff),0,1,py - chaos,py + chaos);    
    
    xoff += 0.05;
    vertex(x,y);
    
  }
  yoff += 0.01;
  endShape(CLOSE);
}

境界のつなぎ目がうまくいきませんでした。y座標だけ動かすようにしたら、つなぎ目はうまくいきますが、動きが少なくなってしまいました。

解決法を思いついたらまた取り組んでみます。