原帖地址:Day 2 – Connecting Points, Part 2 via Vormplus

我们今天来看一个稍微复杂一点的例子。依旧是连接点和线。但是这次我们要在画面中随机放置点,并且只连接相距在一定范围之内的两个点。然后越长的连线,颜色越淡,越透明。听上去是不是已经有点复杂了?让我们来看看一步步该怎么做。

首先,我们要生成随机位置的点:

points[i] = new PVector( random(width), random(height) );

random(x)是Processing提供的函数,可以生成一个在0和参数x之间的随机数。这里用width和height做参数,保证了生成的点,在我们的画面大小之内。

接下去,我们要画线。和之前的例子一样,我们用两个嵌套在一起的循环来画每一对点之间的连线。连线取决于点之间的距离。计算距离用的是Processing的dist()函数。参数是两个点的坐标,返回的就是点之间的距离了。

float dst = dist( points<i>.x, points<i>.y, points[j].x, points[j].y );

当距离小于255时,我们才连线。同时,距离越大,线越透明。

if ( dst < 255 ) {
      stroke( 255, 255 - dst );
      line( points<i>.x, points<i>.y, points[j].x, points[j].y );
}

在上一次的例子里我们知道了画线的函数是line()。 这里我们再次用到这个函数。至于线的透明度,用到的函数是stroke(),当传给stroke两个参数的时候,第一个是灰度,第二个则是透明度(alpha通道)。在这里,alpha的值和距离成反比,所以用的是255-dst。这里我们还用到了strokeWeight()函数来设置线的粗细。

最后我们来画点。记住要重新设置stroke()。我们还设置了strokeWeight()。用更粗的线来画原点可以让节点更明显。

stroke( 255 );
strokeWeight(4);
point( points<i>.x, points<i>.y );

结果

可以尝试改变numPoint的值来改变点的数目。

下载Processing源代码

Sketch for Processing Month, Day 2

 

© 2011, 视物 | 致知. All rights reserved.

Related Posts:

    • 众口难调啊,非程序员对编程语法还不了解呢,程序员可能会觉得太简单了

  1. 我看标题感觉好像是Processing用7天创造了世界,所以亲们,加油吧,还有5天就脱离苦海了,哈哈