第二期boss代码学习笔记

按照惯例，先上代码和注释。

int R = 100;//花瓣的半径,以窗口的中心为圆心
int r = 5;//小球半径
float x;//坐标x
float y;//坐标y
 
float t = -8;//计算坐标的参数
int num = 5;//花瓣数
 
float mt = 0;//控制t值的参数
 
void setup() {
  size(430, 430);//设置窗口大小
  colorMode(HSB, 360, 100, 100);//设置色彩模式
  background(0);
 
  noStroke();
  frameRate(30);//设置帧率
}
 
void draw() {
  fill(0, 80);//设置窗口颜色
  rect(0, 0, width, height);//绘制举行，大小与窗口等大
 
  for (int j = 0; j < num; j++) {//绘制过程，num代表了花瓣次数，那从这个结构可以看出来，花瓣的绘制是一瓣一瓣顺序绘制的
    pushMatrix();//保存当前坐标系统，也就是存储坐标系的相关信息：坐标原点，角度等
    translate(width/2, height/2);//原点变换
    rotate(radians(-90));//姿态调整
    pushMatrix();//保存改变过的坐标系统
    //下面均用到了j，是因为j表示当前是哪个花瓣，也是均分计算角度来旋转的依据
    translate(R*cos(radians(360*j/num)), R*sin(radians(360*j/num)));//原点变换
    rotate(radians(360*j/num));//旋转
    for (int i = 0; i < 4000; i++) {
      x = R * sin(13.234 * t) * sqrt(cos(cos(11.12 * t)));
      y = R * pow(cos(13.234 * t), 5)* sin(sin(11.12 * t));
 
      fill(100*sin(t)+100, 100, 100, 10);//((i*t)%200+100, 100, 100, 10);
      ellipse(x, y, r, r);
 
      t += 0.005;
      if (t > 8 * abs(sin(mt))) {//判断t是否大于某个值，如果大于就反向
        t = -8 * abs(sin(mt));
      }
    }
    popMatrix();//恢复坐标系相关信息
    popMatrix();
  }
  mt += 0.005;
}
 
void mousePressed() {//按下鼠标键就重设参数重新开始
  t = -8;
  mt = 0;
 
  background(0);
 
  draw();
}

代码分析：
从头到尾浏览整个代码，会发现代码结构并不难理解。但是深究其背后的数学含义还是很有意思的。首先说一个疑惑，和processing有关。
processing的draw（）函数的绘制流程是怎样的？因为在程序运行时，第一个花瓣处有个虚影，没明白是怎么出来的，还有，五个花瓣是同时绘制的，这和逻辑不符，所以我觉得和processing有关。

好，正式开始分析，简单起见，我将以一个花瓣来进行分析。在draw（）函数当中，有两个循环，外层循环是控制花瓣个数绘制的，即第几个花瓣。内层循环是真正绘制构成花瓣的那个点的，很多点在某个轨迹上就形成了花瓣。所以说外层循环没什么好说的，最有意思的还是这个内层循环。

内层循环一开始计算了两个值，一个x一个y,这是什么？（x,y），是的，这是坐标，再观察计算公式的形式，有没有熟悉的感觉？这是参数方程，绘制的是一个椭圆，当然，加上了一些变化，使得椭圆扭曲以相似花瓣（原谅我不懂扭曲的原理）。再往下呢，是颜色填充，注意看，颜色是随着t值变换的，t是以很小的步长（0.005）变化的，这就有了一个颜色渐变的过程。之后呢，便是将点绘制出来。

再往下，会遇见什么？一个if判断，和t，mt有关。意思是当t大于某个值时，就将t变为这个值的相反数，为什么这样做呢？

这是很有意思的，经过分析之后，这个图是这样绘制的

点的轨迹是绘制一个椭圆，转着圈来绘制，当形变之后，我们就能看到花瓣了。那t在这里变化有什么用呢？让我们的注意力回到前面，初始化时t=-8，mt=0；而用来做判断的某个值是什么？是8*abs（sin(mt)）；那这个值的范围是多少？是（0,8）。这就限制了t的变换范围最大是（-8,8）。也就是说，随着循环次数的增多，t值也是会循环的，那我们看到的图像也是循环的。

关于这里我依旧是有疑惑的，t随着mt的变化而被限制了范围，是不是有个最小范围，保证了椭圆恰好被绘制？
第二期boss

最后编辑：2017-07-29

作者：fishVD

知识就是金钱

站内专栏