GIF动图系列-Test38

发生特殊事件，于是在特殊时刻写了这一篇.....

言归正传，这期的生成过程并不重要，所以一张动图足以说明问题。

不难发现，图案是由两个作圆周运动的点，相连而成的。区别仅仅是半径，以及运行速率有差异。

如果改变更多的变量会发生什么？

看看下面的图形～

思路浅析

上面的图形可能会超出某些人的想象，它们仅仅是由两个作椭圆运动的点相连而成的，因此生成原理与动图是完全一样。并且在同一段代码中，便可衍生出所有效果。你只需要修改其中的 6 个核心变量。

• 点 A 的运动速率
• 点 A 在 x 轴的运动范围
• 点 A 在 y 轴的运动范围
• 点 B 的运动速率
• 点 B 在 x 轴的运动范围
• 点 B 在 y 轴的运动范围

参数设定好后，程序会将AB两点用半透明的直线相连，残留的轨迹就会生成图形。

源代码

• 代码如下

float aX,aY,bX,bY,angleA,angleB,speedA,speedB,aXR,aYR,bXR,bYR;

color c;

void setup(){

size(700,700);

background(0);

speedA = 0.025;

speedB = 0.006;

aXR = 320;

aYR = 320;

bXR = 320;

bYR = 80;

}

void draw(){

translate(width/2,height/2);

angleA += speedA;

angleB += speedB;

aX = cos(angleA) * aXR;

aY = sin(angleA) * aYR;

bX = cos(angleB) * bXR;

bY = sin(angleB) * bYR;

c = color(255,50);

stroke(c);

line(aX, aY, bX, bY);

}

void mousePressed(){

saveFrame(frameCount + " speedA-" + speedA + " speedB-" + speedB + " aXR-"+aXR + " aYR-"+aYR + " bXR-"+bXR + " bYR-"+bYR +".png");

}

• 点击鼠标即能保存图案，同时关键的6个数值也会保存在文件名中，方便复原代码

• 若想更直观地了解生成过程，可将以下代码拷贝到 processing 中
  

Gif Tips

• 这是典型从法则本身出发的生成思路
• 寻找简洁有力的表达式，就能“以一敌百”，一劳永逸。懒人的最佳选择～～

点击阅读原文传送到 openProcessing