NCF参数化建筑论坛

标题: Processing 连接点和线 [打印本页]

作者: ping88 时间: 2011-10-21 00:27
标题: Processing 连接点和线
我们今天来看一个稍微复杂一点的例子。依旧是连接点和线。但是这次我们要在画面中随机放置点，并且只连接相距在一定范围之内的两个点。然后越长的连线，颜色越淡，越透明。听上去是不是已经有点复杂了？让我们来看看一步步该怎么做。首先，我们要生成随机位置的点：

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源代码

作者: ping88 时间: 2011-10-21 00:28
下载Processing源代码

作者: ping88 时间: 2011-10-21 01:22
http://vormplus.be/blog/article/ ... cting-points-part-1

作者: ping88 时间: 2011-10-21 01:47
年度最佳媒体信息可视化作品是怎样炼成的？我们前不久介绍了媒体可视化的年度大奖Malofiej 19。纽约时报的可视化“How Mariano Rivera dominates hitters”获得了年度最佳在线信息图的奖项。他们用一段视频告诉读者为什么Mariano Rivera投的球那么厉害。最近InfographicsNews访问了这个可视化的制作者之一，纽约时报信息可视化组专职体育新闻的Joe Ward。了解了整个制作过程和其中的一些信息设计上的选择。首先主题是非常重要的，一个可视化成功与否，它所表示的数据，传递的信息，和要讲述的故事是否有意思，吸引人是最关键的。纽约时报的编辑选择了 Mariano Rivera，是因为他是历史上最好的投手之一，而且他的快速切割球纵横球场很多年，依然天下无敌。美国有大量的棒球迷，都非常想知道这是为什么。就像大家都想一窥上乘武功的秘密一样。下一步就是分析数据了。他们从专业数据公司得到了Mariano在2009年所有1300个投球的数据。这个数据描述了每个球在三维空间里的轨迹。

他们用Processing写了一个可视化系统，把所有的轨迹画出来，然后提供了一些过滤选项来对数据进行分析。

通过这样的分析，他们得到了结论。也同时理清了要向读者传递哪些信息。起初，他们并没有要制作视频。他们做了一个互动可视化，让读者能和他们一样通过简单的互动，对这些投球数据做分析，并得出结论。

但是他们很快意识到这样的可视化是远远不够的，只有非常专业的棒球迷才会花大量时间去使用这个可视化进行数据分析。一般的纽约时报读者只是要很快的了解到有意思的资讯。我想这也是应用于媒体的可视化与其他可视化的区别。比如商业智能里的可视化系统和我们以前在学校开发的很多可视化系统，更多的是用作一种数据分析平台。目的是帮助数据分析师或者科学家进行数据分析。所以提供强大的分析功能，不限制用户对数据的解读是非常重要。而对于媒体来说，主要目的是把新闻故事告诉读者，把观点清晰的传递给读者。可视化数据分析系统并不完全适合这样的应用。在采访中，Joe提到设计可视化的时候最重要的是抛开自己作为一个信息设计师的观点，从真正用户的角度出发。你的可视化作品并不是要让你的同事觉得好，而是要让对可视化一无所知的一般读者觉得好。要讲一个故事，电影自然是最好的办法之一。于是纽约时报的信息设计师们决定制作一段影片并配上解说。他们和电影导演一样画了分镜头和场景的草图。在这个设计过程中，他们觉得让读者体会Mariano投球威力的最好办法，是让读者觉得自己正面对Mariano，要击打他的投球。这就像想要真正体会上乘的武功，你就要和高手过过招一样。因此，他们的影片采取了第一人称的视角。

为了能在影片中，用3D动画表现Mariano的投球动作，他们还和纽约大学Movement Lab合作，通过分析投球录像，构造了Mariano投球的三维动画模型。 NYT / NYU Rivera Video Motion Capture from GreenDot Project on Video. 经过这么多工作之后，本年度最佳信息设计作品才终于完成了。所以一个好的可视化作品真的不是拍拍脑袋想出来的。背后有很多很多的设计和程序实现要完成。

作者: benchen 时间: 2011-10-21 02:45
楼主觉对是牛人啊啊

作者: benchen 时间: 2011-10-21 03:40
我看了半天还是看不懂~~！

作者: /?小蓝帽♂ 时间: 2011-10-21 14:04
哈哈终于找到了…………！！！

作者: mqcjackson 时间: 2011-10-21 14:37
下下来学习~~~~~~

作者: owenandselena 时间: 2011-10-21 14:55
下来学习~~~~~~~~~

作者: ping88 时间: 2011-10-23 15:48
pro到gh的数据转换到现在还不是很明白。希望回的朋友给知道下哈！

作者: H.W.YAO 时间: 2011-10-24 13:35
xie louzhu

作者: H.W.YAO 时间: 2011-10-25 12:35
haha xiexi了啊

作者: ping88 时间: 2011-10-27 12:17
pro到gh的数据转换到现在还不是很明白。希望会的朋友给指导下哈

作者: rachel033 时间: 2011-11-25 20:32
{:3_53:}学习学习

作者: grassc 时间: 2011-12-2 15:02
牛逼啊！谢楼主！！！

作者: 赫赫 时间: 2012-2-7 17:06
我也做了很多Processing的例子但是没有一个有艺术感的惭愧啊

作者: 赫赫 时间: 2012-2-7 17:07
别人回帖加照度我回帖减照度晕啊

作者: lulununu2010 时间: 2012-2-12 09:56
processing 是最强大的语言！支持！

作者: lyyftxns 时间: 2012-2-16 16:06
wwwwwwwwwwwwqqqqqqqq

作者: lyyftxns 时间: 2012-2-16 16:14
uuuuuuuuuuuuuu

作者: iknowhy 时间: 2012-2-25 22:37
4# ping88 這個很有幫助，頂之

作者: yinny 时间: 2012-2-28 17:05
来学习来学习

作者: tianshun 时间: 2012-3-6 10:02
高手很多啊

作者: 无微清音 时间: 2012-3-7 12:12
感谢楼主，谢谢

作者: chrisbywill 时间: 2012-3-13 12:01
学习了，gh能进行这样的编译么

作者: duanqiaozai 时间: 2012-3-22 17:01
支持一下。。。

作者: 314159 时间: 2012-5-11 11:29
正好需要呢...学习~

作者: PAT 时间: 2013-3-9 22:15
支持一下~~~~~~~~~~~

作者: freewind 时间: 2014-10-14 12:55
这个帖子很有帮助呢，谢谢楼主~

欢迎光临 NCF参数化建筑论坛 (http://bbs.ncf-china.com/)