日常の進捗

主に自分のための,行為とその習慣化の記録

Mod:Coding Challenge #19: Superellipse

f:id:takawo:20170918105807g:plain

これまでの連続回に比べると相当軽め。Superellipseはなんて呼ぶのかわからないけど、極座標系で様々な図形が描画できる公式。Processingの描画でよく使う

float r = 100;
for(float angle = 0; angle < 360; angle += 1){
  float theta = radians(angle);
  float x = cos(theta) *  r;
  float y = sin(theta) * r;
}

この公式も、これに含まれる。

Paul BourkeのSuperFormulaはまたリファレンスになると思われる。

今回はp5.jsでの内容だったのでProcessingで書いた。スライダーは外部ライブラリのControlP5を使った。メソッドチェーン使えるので便利だしこういう実装は参考になる。

関係ないけどチュートリアル内で、正/負/0の判定をする関数sgn()は

float sgn(float val) {
  if (val > 0) {
    return 1;
  } else if (val < 0) {
    return -1;
  } else {
    return 0;
  }
}

こんな風に実装されているけど

float sgn(float val) {
  return val / abs(val);
}

とかでも同じ。

コード

import controlP5.*;

ControlP5 cp5;

// setup関数 : 初回1度だけ実行される
void setup() {
  size(960, 540); // ウィンドウサイズを960px,540pxに
  colorMode(HSB, 360, 100, 100); // HSBでの色指定にする
  
  cp5 = new ControlP5(this);
  
  cp5.addSlider("n")
  .setPosition(20, 20)
  .setRange(0, 10)
  .setValue(2);

  cp5.addSlider("na")
  .setPosition(20, 40)
  .setRange(0, 10)
  .setValue(2);
  
  cp5.addSlider("a")
  .setPosition(20, 60)
  .setRange(0, 400)
  .setValue(200);
  
  cp5.addSlider("b")
  .setPosition(20, 80)
  .setRange(0, 400)
  .setValue(200);
  


}

// draw関数 : setup関数実行後繰り返し実行される
void draw() {
  background(220, 20, 40);
  pushMatrix();
  translate(width/2, height/2);
  stroke(0, 0, 100);
  noFill();
  beginShape();
  float a = cp5.getValue("a");
  float b = cp5.getValue("b");
  float n = cp5.getValue("n");
  float na = cp5.getValue("na")/ n;

  for (float angle = 0; angle < 360; angle += 1) {
    float theta = radians(angle);
    //float x = cos(theta) * r;
    //float y = sin(theta) * r;
    float x = pow(abs(cos(theta)), na) * a * sgn(cos(theta));
    float y = pow(abs(sin(theta)), na) * b * sgn(sin(theta));
    vertex(x, y);
  }
  endShape(CLOSE);
  popMatrix();
}

float sgn(float val) {
  if (val > 0) {
    return 1;
  } else if (val < 0) {
    return -1;
  } else {
    return 0;
  }
}

リファレンス