Mod:Coding Challenge #19: Superellipse
これまでの連続回に比べると相当軽め。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; } }