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

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

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

Processing.js测试

Code

// Written by Casey Reas and Ben Fry.

int xspacing = 8;   // How far apart should each horizontal location be spaced
int w;              // Width of entire wave
int maxwaves = 4;   // total # of waves to add together

float theta = 0.0f;
float[] amplitude = new float[maxwaves];   // Height of wave
float[] dx = new float[maxwaves];          // Value for incrementing X, to be calculated as a function of period and xspacing
float[] yvalues;                           // Using an array to store height values for the wave (not entirely necessary)

void setup() {
  size(200,200);
  frameRate(30);
  colorMode(RGB,255,255,255,100);
  smooth();
  w = width+16;

  for (int i = 0; i < maxwaves; i++) {
    amplitude[i] = random(10,30);
    float period = random(100,300); // How many pixels before the wave repeats
    dx[i] = (TWO_PI / period) * xspacing;
  }

  yvalues = new float[w/xspacing];
}

void draw() {
  background(0);
  calcWave();
  renderWave();
}

void calcWave() {
  // Increment theta (try different values for 'angular velocity' here
  theta += 0.02;

  // Set all height values to zero
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = 0.0f;
  }

  // Accumulate wave height values
  for (int j = 0; j < maxwaves; j++) {
    float x = theta;
    for (int i = 0; i < yvalues.length; i++) {
      // Every other wave is cosine instead of sine
      if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];
      else yvalues[i] += cos(x)*amplitude[j];
      x+=dx[j];
    }
  }
}

void renderWave() {
  // A simple way to draw the wave with an ellipse at each location
  noStroke();
  fill(255,50);
  ellipseMode(CENTER);
  for (int x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing,width/2+yvalues[x],16,16);
  }
}

NOTE: Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using Explorer Canvas.

“心像 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为老师做作品,不同于以往的作品。平时自己做做也没有什么要求,自己想怎么做就行。这次是老师有许多要求,于是得想办法帮他实现,并且需要做出让他满意的效果,有点挑战,所幸后来顺利完成了。