首页 > 未分类 > 文盲角度代码阅读《Sea Shell(作者:Micheal Pinn)》
2017
09-26

文盲角度代码阅读《Sea Shell(作者:Micheal Pinn)》

代码来自于openprocessing.org

作品链接:    https://www.openprocessing.org/sketch/402526

首先观察现象:
1,整体上由很多矩形组成一个类圆的形状;
2,矩形都是圆角矩形;
3,两个矩形为一组
2.1,一组中的两个矩形中点重合
2.2,转速相同
2.3,组中的矩形相对静止
2.4,其中一个矩形有与背景色相同的较粗的描边
2.5,所有组的中点平均分布在一个看不见的圆上
2.6,每组矩形周期性旋转
3,颜色根据角度变化

然后根据现象猜想:
1,根据1,与2.6和3可以得出要用到三角函数
2,圆角矩形需要五个及五个以上的参数

void setup(){
size(640, 640);
strokeWeight(9);
//设定绘图模式:中点与长宽模式
rectMode(CENTER);
}

//开始进行帧循环绘图
void draw(){
//背景为白
background(255);
//给电脑说好要进行一个变形操作,要变形的对象写在下方
//变形内容为,右移画布一半长度,下移画布一半高度
translate(width/2, height/2);
//开始一个for循环,准备绘制一系列机械的,重复的,繁多的图形
//给出一个整数i,i应该小于360,如果i大于等于360则结束循环,绘制结束
//i每次循环加20,步幅为20
for(int i = 0; i < 360; i+=20){
//设定一个浮点数x,x的值应该这么算:
//先用radius函数将i转换成弧度制,为嵌入三角函数做准备
//将弧度化后的i放入sin函数中,得出来的值乘以150
//得出的结果即为x的值
float x = sin(radians(i))*150;
//此处原理同上,角度转弧度使之能够用于三角函数进行处理
float y = cos(radians(i))*150;
//启动变换矩阵,入栈(感觉像启动了什么超级武器一样)
pushMatrix();
//开始变换,x轴方向移动x,y轴方向移动y
translate(x, y);
//rotate为旋转函数,默认使用的值为弧度
//该处的旋转弧度为帧序号-i
//帧序号在一帧的循环绘图中是固定的
rotate(radians(-i+frameCount));
//无描边
noStroke();
//这里教电脑怎么填充颜色
//fill函数中默认情况下颜色模式为RGB,
//用sin函数结合i让颜色在每一次循环中根据角度变化
fill(sin(radians(i/2))*255, 50, 100);
//给出一个基本的矩形(中点为(0,0),长120,宽20,
//第五个参数是用来制造圆角矩形的圆角的,写一个就是为四个角
//共用的圆角参数)
rect(0, 0, 120, 20, 25);
//出栈,变换结束
popMatrix();
}
//这里的绘图思路是用矩形,然后每次循环变换一次位置,
//并不是循环一次画一个矩形,矩形是固定好了的,循环的作用是
//将矩形旋转,平移
//从0度开始(i=0),每次动20度,接下来的其他行动跟着它走
//i走到360度时for判定为假,循环结束,一圈完成,这一帧也画完了

//这段是画带描边的矩形,画法和上面一样
for(int i = 0; i < 360; i+=20){
float x = sin(radians(i))*150;
float y = cos(radians(i))*150;
pushMatrix();
translate(x, y);
//此处的-i+frameCount后面还加了个90,
//意思就是始终比无描边的矩形多90度
//但是转速依然相同
rotate(radians(-i+frameCount+90));
stroke(255);
fill(sin(radians(i/2))*255, 50, 100);
rect(0, 0, 120, 20, 25);
popMatrix();
}
}

//这段代码主要用到了这几个函数:
//translate,平移函数,将代码中的矩形平移到指定的位置
//rotate,旋转函数,该函数默认使用弧度制,
//并且以坐标轴原点为中心将目标旋转

//核心思路是,一帧中,i每走一步画矩形,平移,旋转,
//i走到360这一帧绘制完成
//下一帧在上一帧的绘制方法上继续绘制,又因为帧序号发生变化,
//新一帧的图案又变得和上一帧不同,但变化的参数是连续的,密集的
//所以图案的变化也是连续的,这就形成了一幅”动画“

//并没有一个函数能直接生成动画,所有的动画都是配合draw函数逐帧循环的动作来实现的
//也就是说没有动画这个概念,只是密集的逐帧的绘图产生的“幻觉”

 

感谢iprocessing群里的各位为我指点迷津,谢谢!

肯定有很多错误,希望大家指出,谢谢~



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

文盲角度代码阅读《Sea Shell(作者:Micheal Pinn)》》有 1 条评论

留下一个回复

你的email不会被公开。