首页 > 未分类 > 文盲角度代码分析《高级催眠(作者:Jacob Joaquin)》
2017
09-25

文盲角度代码分析《高级催眠(作者:Jacob Joaquin)》

这是来自openprocessing首页展示的一段代码(https://www.openprocessing.org/sketch/164071——原文链接),很简洁效果很好,初学者也能看懂

首先观察:

因为转的快有点眼花,可以在size下一行插入frameRate(x)降低帧数,达到慢放效果

1,有黑圈白圈

2,黑圈白圈都是运动的,且是有周期的

3,同色圈不相交

4,所有圆圆心不重合,但都在画布中心附近周期运动

5,鼠标可与图像互动

6,鼠标在x轴的正方向运动使圈数变少,负方向运动使圈数变多

7,鼠标在y轴正方向运动使圆圈运动幅度变大,负方向运动使圆圈运动幅度变小

下面根据现像做出一些主观推测:

1,根据1不能推断画的就是描边的圆圈,也可能是黑白两种圆叠加产生的现象

2,根据2推断会用到周期函数,还会用到translate函数来进行变动

3,根据5推断会用到mouseX,mouseY来获取鼠标坐标

4,根据6,7推断鼠标坐标参与一些参数的运算

下面上代码分析:

 

int c = 255;
float angle = 0;

void setup() {
size(500, 500);
frameRate(1);
noStroke();
}

void draw() {
//背景白色
background(0);
//位移:右移画布一半宽度,下移画布一半宽度
translate(width / 2, height / 2);
//貌似是颜色的一个赋值
c = 255;
//设定几个数,rSub应该是设定总的圆的半径
float rSub = map(mouseX, 0, width, 5, 20);
//aAdd角度递增,为下文的x与y数值计算服务
float aAdd = map(mouseY, 0, height, PI / 2.0, PI / 48.0);
//这里给出一个函数,一个自定义函数,便于后面大规模重复使用,
//意思就是我要电脑你按一个叫做cic的函数画这么个东西
//然后在下文void cic中再告诉电脑怎么算这玩意
//简而言之就是,开始画图吧,画图方法详见下文
cic(width / 2, rSub, angle, aAdd);
//设定数angle的步幅
angle += PI / 23.0;
}
//这里告诉电脑cic函数是什么,怎么算,也就是图形cic的图纸
//解读一下cic函数,这个函数是让电脑画一个复合型的图案,就是很多圆,
//圆心都是在(0,0),但是有个translate位移函数使圆位置发生变动,
//函数中radius参数设定函数内圆的初始半径,
//rSub参数参与设定了函数内r的值
//r与angel和rSub参与设定x与y,这两个函数决定了圆心的移动状况
//radius的值与循环的次数有关,radius又与rSub有关因此也与鼠标坐标有关
//也就是说鼠标坐标与radius有关,与循环次数有关
//又因为循环次数与圆圈个数有关所以鼠标坐标与圆的个数有关
//图中的黑圈白圈并不是ellipse nofill stroke画成的,
//而是fill(0)与fill(255)的圆互相不完全重叠而形成的
//rSub越大圆之间大小差距也越大,radius也越容易小于1,圆的数量也就越少
//因为c=255,c=255-c,所以循环时一次白一次黑,造成了黑白相间
void cic(float radius, float rSub, float angle, float aAdd) {
//开始启动变换矩阵,入栈
pushMatrix();
//开始一个do……while循环语句,在检查while()条件是否为真之前,
//该循环首先会执行一次do{}之内的语句,
//然后在while()内检查条件是否为真,如果条件为真的话,
//就会重复do…while这个循环,直至while()为假。
do {
//填充一个值为c的颜色
fill(c);
//告诉电脑,c的值怎么算,c=225-c的值一直在0和255两个数中跳
//这就是有白圈有黑圈的原因
c = 255 – c;
//告诉电脑要画一个圆,圆的半径怎么算
ellipse(0, 0, radius * 2, radius * 2);
//告诉电脑值radius怎么变动,radius与rSub关联,
//rSub又与鼠标且是鼠标的x轴关联
radius -= rSub;
//此处开始为圆圈们的位移做准备
//值angle与aAdd关联,值aAdd又与鼠标的y值关联
angle += aAdd;
//x与y是圆们平移具体要用到的参数,而这里的r则是
//告诉电脑怎么算x与y的参数
//r与rSub关联,也就是说与鼠标x轴关联
//进一步说就是x与y随鼠标x轴变动而变动
//也就是圆圈们的位移随鼠标x轴的变得而变动
float r = rSub * 0.6;
//以下给出如何算出x与y的方法,与aAdd关联,
//并且用到了周期函数,也就是说是与鼠标y值相关,
//围绕鼠标y值做周期变动
//aAdd与r也参与其中,就说明x与y是与鼠标的x轴与y轴都相关的
float x = cos(angle + aAdd) * r;
float y = sin(angle + aAdd) * r;
//告诉了电脑x与y如何变动,填入参数就可以让电脑执行平移了
translate(x, y);
//while数值radius大于等于1时为真,也就是说radius小于1时为假
//此时停止执行
} while(radius >= 1);
//出栈
popMatrix();
}
//圆运动的因素:
//运动是因为帧数,每帧出一个图像看起来才会运动
//每帧图案不一样的原因在于构成图案的参数根据帧数变化而变动
//构成图案的参数变动原因与周期函数和鼠标位置有关
//因为有周期函数,所以鼠标不动时图案自己也会动
//又因为有鼠标位置因素,所以鼠标移动时不但会周期运动,
//还会在此基础上增加与鼠标位置相关的变动
//

 

这段代码主要用到了这样几个函数/知识点:

鼠标数据mouseX,mouseY;

自定义函数——重点

控制变换矩阵:pushMatrix(推栈),popMatrix(入栈)

变换:translate

do…while循环语句(重点)

 

这段代码主要体现了两种“循环”draw循环与循环语句的循环

循环语句的循环将所有结果一次性体现在一张纸上,从时间角度来说,是将所有结果体现在一个时间点上

而draw循环则是根据时间(帧数)推进,一步一步将结果体现出来,是将结果体现在一段时间里。

点时间和段时间,一帧中形成了无数图案,而每一帧形成的图案都是不一样且连续的,这种“复合式”的循环造就了更深层次的美感

感谢iprocessing群里耐心为我解答疑问的各位,谢谢!



最后编辑:
作者:DurianBomb
这个作者貌似有点懒,什么都没有留下。

文盲角度代码分析《高级催眠(作者:Jacob Joaquin)》》有 1 条评论

  1. DurianBomb 说:

    这段代码比较进阶,而我懂得也很少,肯定还有很多错误,希望大家能指出来

留下一个回复

你的email不会被公开。