语法简单,主要学创意.
先看官网tutorial .
多个圆,可以拖动.当两个圆心距离小于较大圆的半径时候,会彼此连线.以一定速度随机运动.会消失,也会重新出现.
看了下源码 . 注释很详尽. 笔记就写到注释里吧.
/*
PROCESSINGJS.COM HEADER ANIMATION
MIT License - F1lT3R/Hyper-Metrix
Modifed by Casey Reas, 7 Nov 2013
Native Processing Compatible
这段注释说名代码内容. Processingjs 官网页头动画.
使用协议
编辑修改人员, 日期.
能否在原生processing上用. Processing有人写了个js的实现,现在这两个基本都已经集中到了pde里了.所以,算是合并了吧其实.感谢canvas的出现啊.
*/
// Set number of circles
int count = 75;
// Set maximum and minimum circle size
int maxSize = 120;
int minSize = 20;
// Build float array to store circle properties
//我在想,这段算做config从外部引入, 走ajax过来,是不是更帅气了.
float[][] e = new float[count][6];
color[] circleColors = new color[count];
//建了指定数目的数组, 后面的6是元素属性.画的是圆,所以, 有x,y,r三个坐标, 第四个. 五六两个是x,y轴移动速度.
// Set size of dot in circle center
float ds=2;
// Set drag switch to false
boolean dragging = false;
// integers showing which circle (the first index in e) that‘s locked, and its position in relation to the mouse
int lockedCircle;
int lockedOffsetX;
int lockedOffsetY;
//圆心的大小.这个是通用的,所以额外只写了一份,对吧. 是否正在拖动也单独放出来了.他的位置是需要重新计算的.
//Colors taken from the IDE
color[] colors = {
#669933, #256699,#CD6633, #E56498,
#666666
};
//颜色是随机出现的,这是可选颜色的数组.
// Orange #CD6633
// Pink #E56498
// Gray #666666
// Set up canvas
void setup() {
// Frame rate
frameRate(60);
// Size of canvas (width,height)
size(700, 700);
// Stroke/line/border thickness
strokeWeight(1);
background(255,255,255,0);
textSize(150);
textAlign(CENTER);
//帧速60, 尺寸700,700, 线条宽度1, 背景纯白,但透明.文字尺寸是干嘛, 居中,没见到有文字啊
// Initiate array with random values for circles
int colorCounter = 0;
//单独给颜色声明了变量. 其实作用就是从头到尾,逐个放出各个颜色的东西.用下面的 j也是可以的.
//比如用 circleColor[j]=colors[j%colors.length] 完全可以的其实.但是可能还是为了明晰点儿吧.这个算经验,我得记得.
for (int j=0;j< count;j++) {
e[j][0] = random(width); // X
e[j][1] = random(height); // Y
e[j][2] = random(minSize, maxSize); // Radius
e[j][3] = random(-.5, .5); // X Speed
e[j][4] = random(-.5, .5); // Y Speed
circleColors[j] = colors[colorCounter]; // Color
//不理解了. 5个变量都对了,第六个我猜不出是什么东西了.没有设置
colorCounter++;
if (colorCounter == colors.length) {
colorCounter = 0;
}
//刚才说的那段.这里用的判断,没用模.好吧.不理解为什么.
}
}
void draw() {
background(255,255,255,0);
//每次都要把背景给涂掉,全部重画.
// Begin looping through circle array
for (int j=0;j< count;j++) {
// Disable shape stroke/border
noStroke();
// Cache diameter and radius of current circle
float radi = e[j][2];
float diam = radi/2;
//这地方作者似乎把半径和直径弄反了.但是,随它去吧,o()︿︶)o 唉
float opacity = dist(e[j][0], e[j][1], width/2, height/2);
opacity = map(opacity, width * 0.4, 0, 0, 70);
opacity = constrain(opacity, 0, 100);
//这三句.是设定图形透明度的.这么算
//1.算出当前位置离canvas中心有多远,是个递减的效果.
//2.然后, 进行map换算. 就是个比例,相似,等比. Map(a, b,c,d,e) .或者说叫插值? a/(c-b) *(e-d) 算出来大概相当于什么位置
//然后,这里就是化成小数了.
if (sq(e[j][0] - mouseX) + sq(e[j][1] - mouseY) < sq(e[j][2]/2))
fill(#E56498, opacity * 3); // pink if mouseover
//人家的注释真简洁. 大概就是, 判断圆心和鼠标的距离,如果在圆半径以内,视为 点中了, 变成粉红色, 透明度增加三倍
else
fill(circleColors[j], opacity); // regular
if ((lockedCircle == j && dragging)) {
// Move the particle‘s coordinates to the mouse‘s position, minus its original offset
e[j][0]=mouseX-lockedOffsetX;
e[j][1]=mouseY-lockedOffsetY;
}
//然后看看是不是锁定了.锁定的话,上面位置什么的都不算了,全按照鼠标的来.
// Draw circle
ellipse(e[j][0], e[j][1], radi, radi);
// Move circle
e[j][0]+=e[j][3];
e[j][1]+=e[j][4];
//画图.然后移动位置. 没有圆,只有长短轴一样的椭圆.
/* Wrap edges of canvas so circles leave the top
and re-enter the bottom, etc... */
if ( e[j][0] < -diam ) {
e[j][0] = width+diam;
}
if ( e[j][0] > width+diam ) {
e[j][0] = -diam;
}
if ( e[j][1] < 0-diam ) {
e[j][1] = height+diam;
}
if ( e[j][1] > height+diam) {
e[j][1] = -diam;
}
//这段真没看懂. 能理解,是当圆都从上面消失了,那么从下面出现好了. 但是为啥是diam跑出去半径的一半,就要重画了?还是觉得半径直径弄反了.
// If current circle is selected...
if ((lockedCircle == j && dragging)) {
// Set fill color of center dot to orange
fill(#CD6633, opacity*2);
// ..and set stroke color of line to orange
stroke(#CD6633, opacity*4);
}
else {
// otherwise set center dot color to black..
fill(0, 0, 0, opacity*2);
// and set line color to turquoise.
stroke(64, 128, 128, opacity*2);
}
// Loop through all circles
//开始链接各个圆心.如果可以链接.
for (int k=0;k< count;k++) {
// If the circles are close...
if ( sq(e[j][0] - e[k][0]) + sq(e[j][1] - e[k][1]) < sq(diam) ) {
// Stroke a line from current circle to adjacent circle
line(e[j][0], e[j][1], e[k][0], e[k][1]);
}
}
//到这总算看懂了… ellipse的参数是 长轴,短轴, 所以, radius在这里指的是直径, diam是半径.
// Turn off stroke/border
noStroke();
// Draw dot in center of circle
rect(e[j][0]-ds, e[j][1]-ds, ds*2, ds*2);
}
//Text
//fill(#9BEED7);
//text("Hello", width/2 + 5, height * 0.55 + 5);
//fill(#1E5484);
//text("Hello", width/2, height * 0.55);
//两个hello其实没用.上面的也没消掉.字体不用设置的
}
// If user presses mouse...
void mousePressed () {
// Look for a circle the mouse is in, then lock that circle to the mouse
// Loop through all circles to find which one is locked
for (int j=0;j< count;j++) {
// If the circles are close...
if (sq(e[j][0] - mouseX) + sq(e[j][1] - mouseY) < sq(e[j][2]/2)) {
// Store data showing that this circle is locked, and where in relation to the cursor it was
lockedCircle = j;
lockedOffsetX = mouseX - (int)e[j][0];
lockedOffsetY = mouseY - (int)e[j][1];
// Break out of the loop because we found our circle
dragging = true;
break;
}
}
}
//鼠标按下,锁定第一个遍历到的圆.后面的就不要了.所以,有这个break.不然,应该会是最后一个遍历到的.
// If user releases mouse...
void mouseReleased() {
// ..user is no-longer dragging
dragging=false;
}
Hello, processing,布布扣,bubuko.com
原文：http://www.cnblogs.com/nonoprocessing/p/3601997.html