Simply resizing the canvas element just stretches the rendered image so it needs to be changed within processing.

Since the processing script is essentially converted into javascript it’s possible to communicate between the processing script and other javascripts. So, I added an listener for the window resize event (using jQuery), which calls a function in the processing function to resize the canvas element.

The javascript looks like this:

// javascript (requires jQuery http://jquery.com)

var ProcessingInit = function() {
  function resizeWindow() {
    var pCanvas = Processing.getInstanceById('pCanvas');
    pCanvas.resize($(window).width(),$(window).height());
  }

  $(window).resize(resizeWindow);
  resizeWindow();
}

It’s wrapped in a function so that it can be called from processing when the application is started. ProcessingInit(); in the setup function. This makes sure the canvas element is fully instantiated before it tries to manipulate it.

It’s pretty straightforward on the processing side as well. That function simply calls the size function again. I’m not sure if that’s good practice, but it seems to work fine.

// processing

void setup() {
  size(800,600);
  ProcessingInit();
}

void resize(float X, float  Y) {
  size(X,Y);
}

Pure Data is a great application which allows you to control every detail building audio applications from very basic components. Unfortunately, much of the program is very poorly documented, so I’d thought I’d share a few things I’ve managed to figure out.

Here’s a quick walkthrough to create a very basic midi controlled, polyphonic synthesizer in pure data. It doesn’t sound like much, but it’ll get things working.

Generating a Tone

This basic synthesizer will consist of two patches, one patch to generate a tone, and another which will read a midi signal and control a few instances of the tone generator.

This is the oscillator patch which generates a tone from a midi message. The tone is created on the left side and the envelope (the change in volume over the course of a note) on the right.

The tone patch has an inlet at the top, which accepts a message containing a pitch/velocity pair, and an outlet at the bottom which sends out the audio signal generated. The [unpack] object splits the pitch and velocity. The pitch is sent to a series of objects on the left side which generate the tone. The velocity is sent to the right where the envelope will be generated.

The pitch, in the form of a midi note number, is converted to a frequency in Hertz which is then sent to an oscillator, generating an sine wave.

Two messages will be sent for each midi note, the first when the note begins and the second when the note ends. The ‘note off’ message will be the same but the velocity will be 0. The velocity, how hard the note was hit, is usually used to set the volume of the note. The velocity is sent to a [select] object. If it is zero, the message is sent to release the note, otherwise to attack. Each of these send a message to a [vline~] object which sends a signal for the amplitude which either ramps up or down.

Finally, the tone is multiplied by the envelope and sent out the parent patch. When the note is hit, a message is also sent to the oscillator which resets the phase.

MIDI and Polyphony

Now that we have our oscillator we need to create a patch which will control a few instances of it. The patch will receive midi data from a hardware controller or from another piece of software. The midi settings will need to be configured for PD to receive the data.

The PD patch which takes midi input and handles the voice allocation, controlling a number of oscillators.

At the top of our patch we have a [notein] object which reads midi from channel 1. [notein] will output pitch/velocity pairs. The [poly] object handles the allocation of different voices. When pitch/velocity pairs are sent to it it sends on the data with the addition of a voice number.

In order to play multiple notes at once, the messages will be routed to a number of different oscillators, each a different ‘voice’. When [poly] receives a note, it will give the number of the first available voice. When it gets a ‘note off’ message (velocity of 0) it makes that voice available again so that that oscillator can play another note when it needs to.

Now we can route the processed messages to a number of instances of the ‘tone’ patch. We do this by packing the messages into lists and using the [route] object which sorts them based on the first element in the message. Awesome. Finally we just add all the signals from the oscillators together and send them to the audio output. It first also multiplies the signal by a amplitude set by the slider so that we can adjust the volume of the synth.

Ok, So What Now?

Now that we have a simple little synth we should be able to get some sounds. A midi signal can come from a physical midi controller or from software. You can use a program, like Ableton Live, to create a composition and then send out midi. You can also create other pure data patches to generate midi. A patch could create generative melodies, act as a sequencer, or create midi from another input such as the keyboard.

The synth at this point just plays a sine wave for each note. It’s a start, but not thrilling. To create different timbres, the [osc~] object can be replaced with something to play different waveforms and we could add modulators or a more complex envelope generator. On top of that we can run the audio signal through filters either in pure data or in other software. A bit of reverb will make it sound a little less flat.

If you have any suggestions post them in the comments. I’m certainly no expert, and I’d love to hear some other methods.

Having already set up most of my script in Quartz Composer I decided to find a way to control it some other way. Pure Data, an application similar to Quartz but for the production of sound, allows you to easily build interfaces. The data is then sent out of pure data as midi controller values, sent through a virtual midi channel, and grabbed by Quartz Composer. From there the values can be used for whatever is necessary.

Figuring out the details took a little while and some help from my friend Michael Scoot-Nelson, but the setup is actually quite simple. In Pure Data, just set up as many controller as you need in the form of sliders or other UI elements.

In this case, I have a number of vertical sliders labelled for a particular application. Above each controller I have an object which receives a bang [r b]. In Pure Data the value from each slider is only sent when the slider is changed. Sending a bang to the value ‘b’ pushes all the values down and sends them out to the midi channel. The Sliders should be set to a range from 0-127.

The values from the sliders are plugged into the first inlet of control out objects (ctlout). The ctlout objects also need a controller number and a channel number. These are used to get the value on the other end. The channels can all be set to one, and each slider should have it’s own controller number.

In Quartz composer, a ‘Midi Controller Receiver’ object will grab the values sent from Pure Data. Viewing it’s settings in the inspector, the number of inputs can be changed. Each input is listed with an integer, these are the controller numbers which must be matched to the ones set in pure data. The channels being received can also be changed.

There is one final step to getting everything hooked up. In Pure Data, under Preferences > Midi Settings must be set to an Midi Channel that Quartz Composer is listening for. On a Mac it’s easy to set up this channel with the IAC Driver in Audio Midi Setup.

I also created this little guy here. One element I was controlling in Quartz Composer (a particle generator) could only be set on or off and I needed it to vary smoothly. This creates what is essentially a pulse width modulation simulated analog output. Pressing the ‘on’ and ‘off’ buttons do just that, and pressing the pwm toggle lets you use the slider to set it more or less on.

Metro’s turn the output to on every tenth of a second. It is then turned off (ten times a second) after a short delay (less than a tenth of a second). If the slider is at the bottom it turns back off almost immediately, so for the greater part of a second it is off. If the slider is at the top, it takes nearly a tenth of a second to turn back off, so it is mostly on. In the middle it will be on half the time. The result, at least for my particle generator, was the appearance of it’s rate changing while really it was just turning on and off very quickly. I’m not sure where else this would be useful, but here it is.

It might be a little hard to read, but if it would be useful to anyone I can upload the pd file somewhere.

This very adding this very simple snipped to a Processing sketch will save out an png of the render window whenever the ‘s’ key is pressed. #### will be replaced by the current frame number.

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-####.png");
  }
}

This works out pretty nicely, but if you run the sketch twice and just happen to press ‘s’ on the same frame the first image will be overwritten. Another issue, which might not seem to bad until you have a huge library of images built up, is the order of the files. If the sketch is run many times, all the saved images will be mixed together. Ideally images saved from one run of the sketch should be named sequentially so all the images from one run can be seen together.

Adding an arbitrary value to the particular run and sticking it into the file name fixes these two issues. Many of my scripts include a function to reset the program so it can be run a few times without being completely restarted. In this case, incrementing this arbitrary global value maintains the order of a set of runs.

int G;

void setup() {
  G=floor(random(10000,90000));
  //noiseSeed(G);

}

void draw() {
}

void keyPressed() {
  if (key=='s') {
    saveFrame("name_of_sketch-"+G+"-####.png");
  } else
  if (keyCode==BACKSPACE || keyCode==DELETE) {
    // code to reset script
    G++;
  }
}

This system isn’t perfect, but is a vast organizational improvement for just a few extra lines of code

Another useful trick, if you have a script which utilizes a lot of Perlin Noise, is the set the noiseSeed to a random integer (like G in the script above), and include that in the file name. This way, if you want to rerun the script with the same parameters later, you can always set G to the integer in the file name of a particular saved image.

Exporting a Scalable Vector Images

The best way to get a high resolution image from Processing is to export the sketch as a vector image. With respect to graphics and images a Vector is just a fancy word for a shape. Unlike a Raster image which records visual information in an array of pixels, vector images are composed of shapes. For some applications this can much more useful. Typefaces, many logos, and other graphics composed of flat shapes are created with vectors. The shapes in a vector image can the be colored, outlined, and styled in many other ways. Vector images can be much smaller than a rasterized version, and most importantly, they are scalable. Since the image is made of shapes it can be stretched as large as you need it and will lose no quality.

Shapes drawn with processing commands are vector shapes, and Processing includes a library to export this data as a PDF document, which can then be opened and used by any vector editing program.

To capture the vector data import the pdf library, call beginRecord(), draw your shapes, and then endRecord(). A simple code to capture a frame on a mouse press could look like this.

import processing.pdf.*;

boolean capture=false;

void setup() {
}

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
    render();
    endRecord();
    capture=false;
  }
}

void mousePressed() {
  capture=true;
}

The script above would have all the drawing functions within the render() function. To be less obtrusive the beginRecord() and endRecord() functions can be within separate conditionals. The code between them will be run all the time and the data will be recorded only when the mouse is pressed. The new draw() function would look like this:

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
  }

  //
  // drawing code
  //

  if (capture==true) {
    endRecord();
    capture=false;
  }
}

Notes about exporting PDFs.

• The exported PDF will be in the sketches folder and titled with the second parameter of beginRecord().
• You can open the PDF with a vector program like Adobe Illustrator and edit the shapes.
• Any shapes drawn, even if they are outside the rendering window will be in the PDF. Remove the Clipping mask to reveal all the shapes.
• For fills and strokes to work they must be called after beginRecord().
• The size of the vector file is dependent on the number of vertices in your image.
• For cumulative rendering place beginRecord() in the setup and endRecord() with a key or mouse press before closing the sketch.

Exporting Large Raster Images

Using a raster image can be a better option if you have a program with a lot of complex shapes. Saving pixel images is also easier, faster, and less processor intensive, but you lose the scalability. To save an image use the saveFrame() function.

void keyPressed() {
  if (key=='s') {
    saveFrame("image-####.png");
  }
}

The #### will be replaced with the frame number. TIFF, TARGA, PNG, and JPEG files can be saved (default is TIFF), and again the image will be in the sketch’s folder. To create very large renderings you can simply increase the window size and scale up the sketches parameters as necessary. I’ve rendered sketches much larger than my screen-size with good results, but can’t promise it will work on all platforms. On a mac you can enter exposee and an extra large window will shrink to fill the screen, although you can’t interact with it.

My code. Straight up. I used Dan Shiffman’s example as a model and then went from there to add a few more features. Sorry the code isn’t annotated much but feel free to ask if you have any questions, and let me know if you make something cool with it.

// Cellular Automata Script
// www.anthonymattox.com
// based on Dan Shiffman's example at
//      http://www.shiffman.net/teaching/nature/week7/
// added unlimited states of cells, colors, and keyboard control

cellsystem CS;

void setup() {
  size(1920,1200);
  background(0);
  CS=new cellsystem();
  noFill();
  noStroke();
  rectMode(CENTER);
  frameRate(100);
  smooth();
}

void draw() {
  CS.run();
}

//---------- Cellular Automata Class

class cellsystem{
  int States;
  int[] cells;
  int[] newGen;
  int[] rules;
  int gen;
  float Size;
  float RSize;

  cellsystem() {
    States=4;
    Size=10;
    RSize=8;
    cells=new int[int((width+Size)/Size)];
    newGen=new int[int((width+Size)/Size)];
    rules=new int[States*States*States];
    restart();
  }

  void restart() {
    gen=0;
    noiseSeed(int(random(500)));
    background(255);
    for (int i=0; i<rules.length; i++) {
      rules[i]=int(random(States));
    }
    for (int i=0; i<cells.length; i++) {
      cells[i]=constrain(int(noise(i/20)*States),0,States-1);
    }
  }

  void Continue() {
    gen=0;
    background(255);
  }

  void run() {
    if (finished()==false) {
      gen++;
      update();
      render();
    }

  }

  void render() {
    for (int i=0; i<cells.length; i++) {

      if (cells[i]==0) {
        fill(255);
        //stroke(255);
      } else if (cells[i]==1) {
        fill(255,10,0,180);
        //stroke(255,10,0,180);
      } else if (cells[i]==2) {
        fill(0,200,215,180);
        //stroke(0,200,215,180);
      } else{
        fill(0,220,160,180);
        //stroke(0,220,160,180);
      }

      ellipse(i*Size,gen*Size,RSize,RSize);
      //rect(i*Size,gen*Size,RSize,RSize);
    }
  }

  void update() {
    for (int i=1; i<newGen.length-1; i++) {
      int l=cells[i-1];
      int m=cells[i];
      int r=cells[i+1];
      newGen[i]=next(l,m,r);
    }
    cells=(int[]) newGen.clone();
  }

  int next(int l, int m, int r) {
    int n=0;
    for (int iL=0; iL<States; iL++) {
      for (int iM=0; iM<States; iM++) {
        for (int iR=0; iR<States; iR++) {
          if (l==iL && m==iM && r==iR) {
            return rules[n];
          } else {
            n++;
          }
        }
      }
    }
    return 0;
  }

  boolean finished() {
    if (gen > ((height-Size*2)/Size)) {
      return true;
    } else {
      return false;
    }
  }
}

//---------- Input Scripts

void keyPressed() {
  if (key=='s') {     // save image
    saveFrame("cellular_automata-####.png");
  } else
  if (key==' ') {
    CS.restart();     // restart from top, new rules+initial values
  } else
  if (key=='r') {     // start back at top with current values
    CS.Continue();
  }
}

void mousePressed() {
  if (mouseButton==LEFT) {
    CS.cells[int(mouseX/CS.Size)]=int(random(CS.States));
  }
}

The circuit is pretty straight forward. Six LED’s are connected through resistors to the six pins which support PWM (3, 6, 5, 9, 10, 11) and to a ground pin. I have everything crammed onto a tiny breadboard on my proto-sheild cause it’s cute and self contained. That’s just my style. PWM stands for Pulse Width Modulation and is the a way to control the brightness of LED’s as well as some other components. It is a digital output and produces the effect by switching on and off very quickly. The result can be visualized as a square wave. When you send a higher value to a PWM pin it will spend more time on than off. This blinking is faster than we can see so the LED appears to be changing brightness according to the amount of time it spends in the on position.

The Arduino is programmed with a script that interprets the serially transmitted data. It uses an array to store all the data and checks for ‘indicator’ characters. This lets the program know how to interpret the data. Alternatively there could only be one indicator and then the script could take the next six characters and use them as necessary; however, this allows more flexibility. If only a few pins are needed the same script will continue working. The Processing script can just send the needed values with appropriate indicators and all unused pins will remain at zero.

int led0=3; // variables to store the pin numbers
int led1=5;
int led2=6;
int led3=9;
int led4=10;
int led5=11;

int lVal0=0; // variables to store the brightness values
int lVal1=0;
int lVal2=0;
int lVal3=0;
int lVal4=0;
int lVal5=0;

char buff[]= "000000000000"; // array that stores incoming serial data

void setup() {
  Serial.begin(9600);

  pinMode(led0,OUTPUT); // set up pins
  pinMode(led1,OUTPUT);
  pinMode(led2,OUTPUT);
  pinMode(led3,OUTPUT);
  pinMode(led4,OUTPUT);
  pinMode(led5,OUTPUT);
}

void loop() {
  analogWrite(led0,lVal0); // write the brightness values to the pins
  analogWrite(led1,lVal1);
  analogWrite(led2,lVal2);
  analogWrite(led3,lVal3);
  analogWrite(led4,lVal4);
  analogWrite(led5,lVal5);

  while (Serial.available()>0) { // if there is incoming data
    for (int i=0; i<12; i++) {   // for each element in the buffer array
      buff[i]=buff[i+1];         // take the value of the next element
    }
    buff[12]=Serial.read();      // place incoming data in last element
    if (buff[12]=='A') {         // if this indicator value is received
      lVal0=int(buff[11]);       // place the previous element in lVal0
    }
    if (buff[12]=='B') {         // each value has a different indicator
      lVal1=int(buff[11]);
    }
    if (buff[12]=='C') {
      lVal2=int(buff[11]);
    }
    if (buff[12]=='D') {
      lVal3=int(buff[11]);
    }
    if (buff[12]=='E') {
      lVal4=int(buff[11]);
    }
    if (buff[12]=='F') {
      lVal5=int(buff[11]);
    }

  }
  delay(10);
}

The Processing script is a little bit more involved. To get the audio input I use the ESS library, but there are a few others which also work. ESS works great for this purpose. The code is very similar to an audio visualization script explained in an older post but with the addition of frequency band averages to control each LED as well as some sliders to control scaling and damping and of course the serial writing functions.

import krister.Ess.*;        // import audio library
import processing.serial.*;  // serial communication library

FFT myfft;           // create new FFT object (audio spectrum)
AudioInput myinput;  // create input object
int bufferSize=256;  // variable for number of frequency bands
int audioScale;      // variable to control scaing

slider s1;   // create two slider objects
slider s2;

Serial port;

void setup() {
  size(510,380);
  frameRate(30);
  background(255);
  noStroke();
  fill(0);
  smooth();

  Ess.start(this);  // start audio
  myinput=new AudioInput(bufferSize); // define input
  myfft=new FFT(bufferSize*2);        // define fft
  myinput.start();

  myfft.damp(.01);        // damping creates smoother motion
  myfft.equalizer(true);
  myfft.limits(.005,.01);
  myfft.averages(6);      // controls number of averages

  println("Available serial ports:");  // define 'port' as first
  println(Serial.list());              // ...available serial port
  port = new Serial(this, Serial.list()[0], 9600);

  s1=new slider(400,70,255, color(200,150,80)); // define slider objects
  s2=new slider(450,70,255, color(200,150,80));
  s1.p=100;   // default position of sliders
  s2.p=200;
}

void draw() {
  background(255);
  pushStyle();
  s1.render();  // render sliders
  s2.render();
  popStyle();

  audioScale=s1.p*20; // adjust audio scale according to slider
  myfft.damp(map(s2.p,0,255,.01,.1)); // adjust daming

  for (int i=0; i<bufferSize;i++) {  // draw frequency spectrum
    rect((i*1)+50,330,1,myfft.spectrum[i]*(-audioScale));
  }
  pushStyle();
  for (int i=0; i<6; i++) { // draw averages
    int a=int(myfft.averages[i]*(-audioScale));
    fill(200,150,80,100);
    rect((i*43)+50,330,43,a);
    fill(200,150,0);
    rect((i*43)+50,330+a,43,3);
  }
  popStyle();
  // write each average to the serial port followed by indicator character
  // the values are constrained from 0 to 255 so the arduino can handle them
  // values above 255 would start back at zero
  port.write(int(constrain(myfft.averages[0]*audioScale,0,255)));
  port.write('A');
  port.write(int(constrain(myfft.averages[1]*audioScale,0,255)));
  port.write('B');
  port.write(int(constrain(myfft.averages[2]*audioScale,0,255)));
  port.write('C');
  port.write(int(constrain(myfft.averages[3]*audioScale,0,255)));
  port.write('D');
  port.write(int(constrain(myfft.averages[4]*audioScale,0,255)));
  port.write('E');
  port.write(int(constrain(myfft.averages[5]*audioScale,0,255)));
  port.write('F');
}

// sets up audio input
public void audioInputData(AudioInput theInput) {
  myfft.getSpectrum(myinput);
}

You’ll need to grab the slider class from my last post (at the bottom) for this to work or you can just define the audio damping and scaling within the setup function and take them out all together. You will also need to download the ESS sound library and have it placed in the proper folder. The serial library is included in Processing by default but must be called in order to function.

The result is the brightness if each LED will change according to the volume of the respective frequency in the audio spectrum. As a certain pitch increases that LED will become brighter. Using the averages rather than just specific frequency bands gives more accurate results, allows for any number of outputs, and also allows for a nice visual. The full spectrum with the overlaid averages shows what’s gong on better than just a few chunks.

I needed a script to send multiple variables from Processing to an Arduino to control a few components. After a bit of research, and more trial and error, I put together a script which controls the brightness of three LED’s through a virtual interface on a monitor. Here are my scripts and the circuit I came up with. It seems simple enough to me but if anyone has suggestions I’d love to hear them.

Here three color LED’s are connected to pins 9, 10, and 11 which can use Pulse Width Modulation (PWM) to control the brightness of each LED. They are connected to their respective pins through appropriate resistors and also connected to a grounded row in the bread board. In the image I am using the prototyping shield from Adafruit which makes it easy to build small circuits.

/* Led Pixel script - www.anthonymattox.com
 * recieves input from processing script  */

int led0=9; int led1=10; int led2=11;
int rval=0; int gval=0; int bval=0;

char buff[]= "0000000000";

void setup() {
  Serial.begin(9600);
  pinMode(led0,OUTPUT);
  pinMode(led1,OUTPUT);
  pinMode(led2,OUTPUT);
}

void loop() {
  analogWrite(led0,bval);
  analogWrite(led1,gval);
  analogWrite(led2,rval);

  while (Serial.available()>0) {
    for (int i=0; i<10; i++) {
      buff[i]=buff[i+1];
    }
    buff[10]=Serial.read();
    if (buff[10]=='R') {
      rval=int(buff[9]);
    }
    if (buff[10]=='G') {
      gval=int(buff[9]);
    }
    if (buff[10]=='B') {
      bval=int(buff[9]);
    }

  }
  delay(10);
}

The script uses an array called buff to store all the incoming serial data. The While loop takes each incoming character and adds it to the end of the buff array after shifting all the values in the array down one. If it receives an indicator character, something created arbitrarily, it takes the previous character and puts it into another variable to be used later. Processing is sending a continues stream of data and this system of indicators allows the Arduino to take out the necessary information and use it to control the LED’s. Processing sends the indicator after the information so if a value is ever multiple characters when it gets the indicator the values are already in the buff array and can be used.

The Processing script creates three instances of a slider object and in every loop of draw sends the value of each slider, serially through a USB cable, followed by the appropriate indicator character.

import processing.serial.*;

Serial port;
slider s1;
slider s2;
slider s3;

void setup() {
  size(200, 296);
  smooth();

  println("Available serial ports:");
  println(Serial.list());
  port = new Serial(this, Serial.list()[0], 9600);

  s1=new slider(70,20,255, color(255,0,0));
  s2=new slider(100,20,255, color(0,255,0));
  s3=new slider(130,20,255, color(0,0,255));
}

void draw() {
  background(0);
  s1.render();
  s2.render();
  s3.render();
  port.write(s1.p);
  port.write('R');
  port.write(s2.p);
  port.write('G');
  port.write(s3.p);
  port.write('B');
}

And the slider class which builds the interface looks like this

/* Slider Class - www.anthonymattox.com */

class slider {
  int xpos, ypos, thesize, p;
  boolean slide;
  color c, cb;
  slider (int x, int y, int s, color col) {
    xpos=x;
    ypos=y;
    thesize=s;
    p=0;
    slide=true;
    c=col;
    cb=color(red(c),green(c),blue(c),150);
  }

  void render() {
    stroke(40);
    strokeWeight(10);
    noFill();
    line(xpos,ypos,xpos,ypos+thesize);

    stroke(80);
    strokeWeight(2);
    noFill();
    line(xpos,ypos,xpos,ypos+thesize);

    noStroke();
    fill(cb);
    ellipse(xpos, thesize-p+ypos, 17, 17);
    fill(c);
    ellipse(xpos, thesize-p+ypos, 13, 13);

    //text(thesize-dialy,xpos+10,dialy+ypos+5);

    // replace the +'s with double ampersands (web display issues)
    if (slide=true + mousePressed==true + mouseX<xpos+15 + mouseX>xpos-15){
      if ((mouseY<=ypos+thesize+10) && (mouseY>=ypos-10)) {
        p=(3*p+(thesize-(mouseY-ypos)))/4;
        if (p<0) {
          p=0;
        } else if (p>thesize) {
          p=thesize;
        }
      }
    }
  }
}

Let me know is this is helpful or if you have any questions or problems.

My processing work in my blog as slowed to a trickle recently. This is due to a couple of large projects which I can’t wait to reveal. One is a fun web project and the other a flash application. I’ve also been playing with my fancy new toy here and am beginning to make some progress. Along with the Arduino board I’m also using a prototyping shield from Adafruit. It creates a nice little workspace with a breadboard and some extra power sources and grounds. It also contains two led’s, one of which I wired to digital pin 0 on the underside of the board. This just keeps the light on (as long as I’m not using the pin for something else) when the board has power, and makes it blink when data is being transmitted. The shield covers up the power and transmission led’s on the Arduino itself.

In the photo above I have an led display I took out of something else and, for the sake of learning, programmed. Turning the potentiometer controls the display. Nothing thrilling, but it’s good practice. I’ve also been trying to understand serial communication so I can build devices which send and receive complex data.

Anyway, there’s a quick update, and here is my Arduino code in case it might be useful to someone. It’s not put together very well. In particular there should be a 2d array containing all the numerals and their corresponding led’s. But nonetheless.

int v=6;
int d[8];
int t=0;
int b=12;
int p=14; // potentiometer input
int pval; // pot value
int out;

void setup() {
  for (int i=4; i<=11; i++) {
    pinMode(i, OUTPUT);
  }
  pinMode(b, INPUT);
  pinMode(p, INPUT);
  Serial.begin(9600);
}

void loop() {
  out=analogRead(p);
  Serial.println(analogRead(0));
  //for button
  /*
  if (digitalRead(b)==LOW) {
    v++;
    if (v>9) {
      v=0;
    }
  }
  */
  v=int(analogRead(0))/100; // for potentiometer
  d[0]=0;
  if (v==0 || v==1 || v==3 || v==4 || v==5 || v==6 || v==7 || v==8 || v==9) {
    d[1]=1;
  } else {
    d[1]=0;
  }
  if (v==2 || v==3 || v==4 || v==5 || v==6 || v==8 || v==9) {
    d[2]=1;
  } else {
    d[2]=0;
  }
  if (v==0 || v==1 || v==2 || v==3 || v==4 || v==7 || v==8 || v==9) {
    d[3]=1;
  } else {
    d[3]=0;
  }
  if (v==0 || v==2 || v==3 || v==5 || v==6 || v==7 || v==8 || v==9) {
    d[4]=1;
  } else {
    d[4]=0;
  }
  if (v==0 || v==4 || v==5 || v==6 || v==8 || v==8 || v==9) {
    d[5]=1;
  } else {
    d[5]=0;
  }
  if (v==0 || v==2 || v==6 || v==8) {
    d[6]=1;
  } else {
    d[6]=0;
  }
  if (v==0 || v==2 || v==3 || v==5 || v==6 || v==8) {
    d[7]=1;
  } else {
    d[7]=0;
  }
  for (int i=4; i<=11; i++) {
    if (d[i-4]==1) {
      digitalWrite(i, HIGH);
    } else {
      digitalWrite(i, LOW);
    }
  }
  delay(20);
}

Perlin noise is a pseudo-random gradient texture, developed by Ken Perlin beginning with his work on the 1982 movie Tron. It continues to be a great tool to create textures and dynamic elements. The function generates a continuous string of values in any number of dimensions. Although it was initially developed to build textures it can be very useful for many other things such as particle motion. Noise is generated by a series oscillations over a variety of frequencies, similar to an audio signal.

Processing supports Perlin noise in up to three dimensions and can be implemented by calling the noise function with the parameters for the coordinate. I’ve been playing with using Three dimensional noise to create an animated force field or flow field in which particles move and thought I’d build a little tutorial to demonstrate some useful applications.

Above we have examples of two and three dimensional noise. The two dimensional is actually a 2d slice of 3d noise. The third is projected across time to create an animated texture. This is done simply by having a variable incrementing each frame which is passed in as the Z values.

float age;

void setup() {
  size(350,350);
  age=0;
  noiseDetail(6,.4);
}

void draw() {
  background(255);
  age+=.02;
  for (float x=0; x<=width; x++) {
    for (float y=0; y<=height; y++) {
      stroke(noise(x/200,y/200,age)*255);
      point(x,y);
    }
  }
}

Two nested loops create a virtual grid of data. For each x and y coordinate representing a pixel the noise is calculated and drawn. This requires two scalings. First the coordinates are scaled down when the values are calculated to get a smoother result. The more zoomed into the noise grid the smoother the output will be. The function then returns a value between 0 and 1 which must be scaled back up to a full color range.

This is a basic animated noise structure which could be applied to any more complicated system. In the particle systems I’ve been working with two overlapping noise grids (really just two sections of the same) represent the x and y forces across the screen or the magnitude and direction of the force. The latter is better, but takes a little trigonometry and more processor power. In addition to interparticle forces, each particle is pushed based on it’s position within this field. This creates very interesting textures, especially if particles have varied weights and are effected differently.

import processing.opengl.*;

void setup() {
  size(350,350,OPENGL);
  noiseDetail(6,.7);
  noStroke();
}

void draw() {
  translate(width/2,height/2);
  background(255);
  for (float x=0; x<=10; x++) {
    for (float y=0; y<=10; y++) {
      for (float z=0; z<=10; z++) {
        float n=noise(x/3,y/3,z/3)-.65;
        if (n>0) {
          float r=n*25;
          fill(0,n*255);
          pushMatrix();
          translate((x-5)*20,(y-5)*20,(z-5)*20);
          box(r,r,r);
          popMatrix();
        }
      }
    }
  }
}

3d Noise is more or less the same. Adding another for loop allows us to plot three dimensions. Here each point is represented by a cube scaled and filled based on the three dimensional noise, which is tweaked to get the most useful results. The loops may not be necessary in many applications where noise(x,y,z); can be called whenever at necessary coordinates, but they provide a visual of the full grid.

It is important to understand that the Perlin Noise field will remain the same as the program is run unless noiseSeed(int); is called, and although these examples show a finite grid, the values extend infinitely and remain continuous at any scale. The Seed is randomized when the program initializes but to work with the same noise it can be called with a specific integer, or a function like the one below can be used to generate a new set of values.

void mousePressed() {
  noiseSeed(int(random(1000)));
}

And that’s all I know about noise. Hooray and good luck.

Ken Perlin has some nice information put together if you’d like some more information on the development and the inner workings if his program.