显示并绘制文本文档中a~z出现的次数

这是《Learning Processing》第十八章“数据输入”的练习18-10:遍历一个来自URL的txt文本(本练习内我使用的是http://processing.org/download/revisions.txt)中的文字,统计它们在字母表a~z中出现的频率,并显示为柱状比例图(当然你也可以将其表示为其他可视化效果)。如图

虽然还没读到Ben Fry写的< 可视化数据>,但是这不就是一个活生生的有趣的练习吗?
Continue reading 显示并绘制文本文档中a~z出现的次数

“心像 Mental Image”–上海国际电子音乐周闭幕作品心得

×Preface×

先介绍下自己。本人上海音乐学院音乐工程系毕业,无编程基础。大二的时候玩过VB,学的太快了,便没有继续学习。直至鬼使神差发现了processing以后,便下载了多本教程边学习边小做作品。

这次合作源于我的专业J老师要参加本次电子音乐周,希望有人能够做一点视觉交互方面的东西。我们系虽然有学max,不过大部分还是用msp,所以老师就找我合作。同时合作的还有J老师的弟弟,数学专业出身,编程人员。

×一×

J老师开始给我看了他想要的效果,是一个很像分子式的视频。在我听了他做的音乐开头部分之后,觉得更想做类似星星的视觉效果。于是打算先试试看。最初想法就是载入星星的图像,然后根据音量的高低运动。但是由于编程能力有限,星星的运动无法很灵活的根据声音变换。遂打算根据老师的想法做类似分子式旋转的效果。首先找到了traer的example

此eg是通过点击鼠标来生成每一个node,所以先把mouse改成根据音量的大小来生成node,我用minim这个library,设置为:

for(int j= 0; j &lt; in.left.size(); j+=100){
if(in.left.get(j)*1000&gt;280 ){
addNode();

意思是,大于280就生成一个Node.

另外把2d球改成3d的球,以及把连接的线也改成3d的(此处询问了豆瓣上数位编程高手,十分感谢)

球问题不大,线的话,增加一个z:

vertex( a.position().x(), a.position().y(),a.position().z() );
vertex( b.position().x(), b.position().y(), b.position().z() );

并在最后一行改:

p.position().set( q.position().x() + random( -0.05, 0.05 ), (q.position().y() + random( -5, 5 )),  q.position().z() + random( -0.5, 0.5 ));

改成3d以后再旋转起来:

angle += 0.009;
rotateY(angle*13);

基本完成

结果配上音频一看,效果虽然是有,但是十分不明显。虽然是每一个比较响的声音都会生成,但是3d球本身没有变化,后来把球的半径也和音量连起来,但是效果很怪。所以完全推翻。

Nodes
Nodes

×二×

朋友的建议,以及效果本身,让我感觉还是改回2d的效果比较明显。

在之前的基础上,还原成2d,然后改变颜色,根据音高改变半径。
Code

for ( int i = 0; i < physics.numberOfParticles(); ++i )
  {
    Particle v = physics.getParticle( i );
    for(int k = 0; k < player.bufferSize()-1; k+=100)
    {
      ellipse( v.position().x(), v.position().y(), NODE_SIZE/2+player.mix.get(k)*50, NODE_SIZE/2+ player.mix.get(k)*50);    

      // color change
      if (colorStep >= colorBegin)
      {
        if(player.mix.get(k)*1000 > 30)
        {
          colorMode(HSB);
          c1+=1;
          c1%= 255;
          fill(c1,255,255,100);
        }
      }

因为老师要求开始为白色,到第二主题重复的时候再换成变颜色的,所以加上时间:

int colorBegin =1500;  // seconds = colorBegin / frameRate,
int colorStep = 0;

同时在75秒后开始旋转:

int rotateBegin = 75;   // seconds
int rotateStep = 0;

效果

第一部分基本完成。

总结:

1.一切努力都是值得的,任何知识都是可以学会的,只需要耐心,冷静,钻研。

2.第一次用p5为老师做作品,不同于以往的作品。平时自己做做也没有什么要求,自己想怎么做就行。这次是老师有许多要求,于是得想办法帮他实现,并且需要做出让他满意的效果,有点挑战,所幸后来顺利完成了。