[数学之美]利用p5js动态绘制花朵

create by dejavu

---

• 
  
  
  

r = 5 (1 + sin(11 u / 5)) - 4 sin4(17 u / 3) sin8(2 cos(3 u) - 28 u)
 . . . where 0 <= u <= 21 pi


x = r cos(u)
y = r sin(u)

• 利用以上公式可绘制二维平面上，如下的图像

  
  
  
  
  
  

z的公式可以自定义
这里为了美观利用如下式子
z = (r/20+.2)*sin(r*2*PI/7);

• 将z带入可以得到如下图像

  
  
  

• p5js 代码

function setup() {
    createCanvas(1024,720,WEBGL);
}

var angle,beta = 0,0;
var rate = 40;
var z_rate=0.01;


function draw() {
    rotateY(angle);
    rotateZ(angle);

    var u = beta*21.0*PI/3000;
    var p4 = sin(17*u/3);
    var p8 = sin(2*cos(3*u)-28*u);
    var r = _rate*(5*(1+sin(11*u/5)) - 4*p4*p4*p4*p4 * p8*p8*p8*p8*p8*p8*p8*p8);

    var x = r*cos(u);
    var y = r*sin(u);
    var z = ((r*z_rate)*20+.2)*sin((r*z_rate)*(2*PI)/7);

    beta += 1;

    beginShape();
    fill(255,0,0);
    torus(0,0,0,0);
    for(var i=0;i

原理---- 参考 paulbourke