先上最终效果图 下面讲讲思路： 1、最前面人物的绘制 这里用到了贝塞尔曲线，利用贝塞尔曲线可以画出任意的曲线（贝塞尔曲线总结：转自http://blog.csdn.net/tianhai110/article/details/2203572），processing里面已有现成的画贝塞尔曲线的函数bezierVertex()，剩下的工作就是一点点添加曲线和不断调整曲线的参数了（其实大部分功夫都花在了这上面）。
//其中一条曲线的示例 beginShape(); vertex(403, 406); bezierVertex(424, 485, 345, 506, 300, 516); endShape();2、背景的动态交互效果(星空) 这个做起来也挺简单的，首先在屏幕上随机生成一定数量的白色圆点，圆点的半径也在一个范围内随机，这里的交互有两种模式，每次按下鼠标都会切换一次模式，第一种是以鼠标所在的位置为原点，设置一定的半径，在此范围内的圆点都与鼠标所在位置连成一条直线；第二种是以鼠标所在的位置为原点，设置一定的半径，在此范围内遍历一遍圆点，将那些相隔距离小于一定值的圆点连成一条直线，并且圆点离鼠标所在位置越远，直线颜色就越浅，宽度越小。此外屏幕上所有圆点也都遵循离鼠标所在位置越远，颜色越浅的原则，并且所有的圆点都会在一定的范围内随机移动，部分代码如下：
fill(255); for (int i=0; i<points.size(); i++) { if (isClick) { for (int j=i+1; j<points.size(); j++) { if (dist(points.get(i).x, points.get(i).y, points.get(j).x, points.get(j).y)<100&&dist(points.get(i).x, points.get(i).y, mouseX, mouseY)<100) { stroke(255); strokeWeight(3 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY)/50); fill(255 *(1 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY) / 100.0)); line(points.get(i).x, points.get(i).y, points.get(j).x, points.get(j).y); } } } else { if (dist(points.get(i).x, points.get(i).y, mouseX, mouseY)<100) { stroke(255); strokeWeight(2); line(points.get(i).x, points.get(i).y, mouseX, mouseY); } } noStroke(); fill(255 *(1 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY) / dist(0,0,width,height))); ellipse(points.get(i).x, points.get(i).y, points.get(i).size, points.get(i).size); if (time==0) { //time用于控制圆点移动的速度 points.get(i).x =points.get(i).ox+(int)random(-2, 3); points.get(i).y =points.get(i).oy+(int)random(-2, 3); } }