首页 > 未分类 > 文盲角度代码阅读《星间飞行1(作者:konrad jünger)》
2017
09-28

文盲角度代码阅读《星间飞行1(作者:konrad jünger)》

首先观察现象:
1,有点,很多点
1.1,点随机分布
1,2,点随帧数变多
2,鼠标参与互动
2.1,鼠标于画布中心,则点静止
2.2,点的移动与鼠标向量有关
鼠标于x轴正方向,点沿着于y轴垂直的方向向外移动
反之相反
2.3,鼠标于y轴正方向,点沿着于x轴垂直的方向向x轴聚拢
反之相反
2.4鼠标离原点距离越远,点运动速度越快
3,点的移动速度越快,轨迹越长
//声明一个数组,aArayList,动态数组,与Array(普通的)数组有区别
//区别详见官网或者iprocessing中的说明
//这是一个名字叫stars(群星)的动态数组
//Pvector是存储向量,声明一组和向量有关的动态数组
ArrayList<PVector> stars = new ArrayList<PVector>();
float h2;//=height/2
float w2;//=width/2
float d2;//=diagonal/2

void setup() {
size(600, 600);

w2=width/2;
h2= height/2;
d2 = dist(0, 0, w2, h2);
noStroke();
}
void draw() {
//给下面一个长宽等于画布的矩形填充颜色,注意:
//map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5)
//是一个数,这里的fill函数一共有两个参数,一个是0,还有一个是map
fill(0, map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5));
//与屏幕右上角原点创建一个长宽等于画布的矩形
rect(0, 0, width, height);
//给下面for循环中的东西填充灰度为255的颜色(白色)
fill(255);

//用for循环在一帧图像中创建多个东西
//i小于20为真,i等于20则结束,
//给出19个数
for (int i = 0; i<20; i++) { // star init(开始处理星星)
//此处开始给名为stars的动态数组添加内容,
//添加向量数
//Pvector,向量的三个参数
//宽度上的随机数,高度上的随机数,随机数1-3
stars.add(new PVector(random(width), random(height), random(1, 3)));}

//此处要讲一下,size,
//size和length差不多,但是区别还是有的,
//size指的是元素数量,length指的是元素位置,
//19个元素,位置是0-18
//这里开始准备用for循环调用群星动态数组中的数值
//给一些变量赋值
for (int i = 0; i<stars.size(); i++) {
//数组中的xyz位置上的数分别赋值给x,y,d
float x =stars.get(i).x;//local vars
float y =stars.get(i).y;
float d =stars.get(i).z;

//翻译:移动+闪烁
/* movement+”glitter”*/
//精髓就在这里,看上去只有5行代码
//可能里面藏了50句话都不止
//好了,我们慢慢阅读
//首先,数组是啥我也是现度现学的,至于这个set是啥意思,
//我还没仔细研究,不过不管这么多
//下面着一长串代码应该是给电脑讲好两个参数
//一个是i,for循环计数用的,另一个是向量
//这个向量有来头了,首先他有三个值,向量中的x,y,d来自于
//上一个for循环中循环出来的值x,y,d
//首先这第一个参数i,是来自于for循环中用来计数用的,
//i每次循环加1,i等于群星数组的元素数时,for循环条件判定为假
//则停止循环,此处群星数组的元素个数怎么算,这个问题存疑
//这里的第二个参数就复杂了,它是一个向量
//向量的第一个参数与鼠标的x轴有关
//向量的第二个参数与鼠标的y轴有关
//向量的第三个参数与帧序号有关,
//而且还是一个与帧序号有关的noise随机的关系
//也就是说这个向量的一系列参数告诉我们,
//它是和根据鼠标的位置,还有帧数来发生变化的
//通过这些外界变化引发数组内元素变动,
//从而在一帧内画出繁多的图形
//同时又让每一帧的图形不一样
stars.set(i, new PVector(x-map(mouseX, 0, width, -0.05, 0.05)*(w2-x), y-map(mouseY, 0, height, -0.05, 0.05)*(h2-y), d+0.2-0.6*noise(x, y, frameCount)));

//这里给出三个if条件判断语句
//如果d大于3或者d小于3,则群星数组进行set,
//set内容为for循环中国用于计数的i
//和一个新向量,只和x与y有关的向量,第三个参数是固定的
if (d>3||d<-3) stars.set(i, new PVector(x, y, 3));
//如果x小于0或者x大于宽度,
//又或者y小于0或者y大于高度,
//则群星数组中移除i
if (x<0||x>width||y<0||y>height) stars.remove(i);
//如果群星数组的元素个数大于了9999,
//则群星数组移除1
if (stars.size()>9999) stars.remove(1);
//最后以圆心坐标(x,y),半径d,
//来画圆,也就是星星
ellipse(x, y, d, d);//draw stars
}
}
//这段代码非常简洁美丽,
//和它最终生成的图像对比,更能凸显其中的美感
//这是一种只有processing才能营造的美感
//processing的作品都具有二相性,
//即语言与图像
//这部作品之美在于它将极简与极繁神奇地融合在一起
//代码简洁之又简洁,而其中诞生的图案则是繁复之又繁复
//短短34行代码而且,其中竟好似看到了宇宙星辰!

//这段代码主要用到了这样几个知识点:
//1,数组,动态数组,ArrayList
//2,以及动态数组中的种种操作,例如:add,remove,set
//3,数学,向量Pvector
//4,for循环中的if语句
//5,if语句中运用到的一个逻辑概念“或”

//一个几天前从“怎样为一段代码添加注释”开始学起的初学者,
//又加上权威指南中并没有对动态数组的一些详细介绍,
//和官网与iprocessing的reference中也没有对ArrayList做太多介绍
//权威指南上也没有对Pvector的介绍
//就导致对这段代码的一些知识点的学习变得不是那么唾手可得,
//通过一天的独自研究,对于真正意义上的阅读还是差很远
//事实上,将向量添加到数组中的操作,就让我有些难以想象了,
//也就是到这里,后面的主干部分我就有些读不懂了,
//基本全靠猜了
//刚刚在iprocessing中找到动态数组的更多介绍了,那就明天研究,
//争取弄懂这段代码的第二个版本吧!



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

文盲角度代码阅读《星间飞行1(作者:konrad jünger)》》有 4 条评论

  1. DurianBomb 说:

    代码来自于openprocessing,作品地址:https://www.openprocessing.org/sketch/96938
    晚上吃完饭看了眼权利的游戏,然后头一抬发现已经深夜了……
    即使权利的游戏再好看,只要一不小心瞥上一眼processing的容颜,就会想放下一切要把它搞定~

  2. 城墙 说:

    fill(0, map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5));
    我觉得这句话才是精髓

  3. 城墙 说:

    stars.set(i, new PVector(x-map(mouseX, 0, width, -0.05, 0.05)*(w2-x), y-map(mouseY, 0, height, -0.05, 0.05)*(h2-y), d+0.2-0.6*noise(x, y, frameCount)));
    这句只是改变了点的位置,导致下次图像的点的位置有变化。

  4. 城墙 说:

    感觉不好的点在于点数会越来越多。如果能加个生命周期的话,电脑会轻松许多0.0
    来自全网站最菜人的理解。

留下一个回复

你的email不会被公开。