|
|
我们今天来看一个稍微复杂一点的例子。依旧是连接点和线。但是这次我们要在画面中随机放置点，并且只连接相距在一定范围之内的两个点。然后越长的连线，颜色越淡，越透明。听上去是不是已经有点复杂了？让我们来看看一步步该怎么做。
首先，我们要生成随机位置的点：
| 1
| points = new PVector( random(width), random(height) );
|
random(x)是Processing提供的函数，可以生成一个在0和参数x之间的随机数。这里用width和height做参数，保证了生成的点，在我们的画面大小之内。
接下去，我们要画线。和之前的例子一样，我们用两个嵌套在一起的循环来画每一对点之间的连线。连线取决于点之间的距离。计算距离用的是Processing的dist()函数。参数是两个点的坐标，返回的就是点之间的距离了。
| 1
| float dst = dist( points.x, points.y, points[j].x, points[j].y );
|
当距离小于255时，我们才连线。同时，距离越大，线越透明。
| 1
2
3
4
| if ( dst < 255 ) {
stroke( 255, 255 - dst );
line( points.x, points.y, points[j].x, points[j].y );
}
|
在上一次的例子里我们知道了画线的函数是line()。 这里我们再次用到这个函数。至于线的透明度，用到的函数是stroke()，当传给stroke两个参数的时候，第一个是灰度，第二个则是透明度（alpha通道）。在这里，alpha的值和距离成反比，所以用的是255-dst。这里我们还用到了strokeWeight()函数来设置线的粗细。
最后我们来画点。记住要重新设置stroke()。我们还设置了strokeWeight()。用更粗的线来画原点可以让节点更明显。
| 1
2
3
| stroke( 255 );
strokeWeight(4);
point( points.x, points.y );
|
结果可以尝试改变numPoint的值来改变点的数目。
下载Processing源代码 |
评分
-
查看全部评分
|
辽公网安备21021102000973号
发表于 2011-10-21 00:27:29
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
发表于 2014-10-14 12:55:56
楼主