Processing

Processing seems like a really cool software sketchbook/IDE. So I decided it would be the tool I would work with this week. I never did much java programming nor any kind of interface/application. So before doing anything, I wanted to introduce myself to processing in general.

First thing I did was to go dig inside Processing website. I look at the overview and historic of the software and learn a bit more on it's main purpose wich is to propose a software literacy, particularly within the visual arts, and visual literacy within technology.

I also took a look at the reference page to see the main function the software is proposing. This make me think of the arduino IDE but instead of function relative to programming sensor and stuff, it's all about GUI. There is also a ton of neat library made for the software that expand even more on what you can do.

Then I did a simple program using a series of tutorial to accomodate myself with the software. After a few hours, here's a few things I learn. This is all Java programming inside processing, but a lot of knowledge can also be used in most type of language.

Code Tips

- Void is a function that returns nothing.
- Setup will be executed only once.

you can see here that I set the size of my window and the framerate of my animation to 60 frame/second. These two parameters only need to be called once, that why I set them up in my setup.

- There is Also functions that are descibed as loop, loop will repeat over and over their command.

You can see here that I use and Integer (i) and is first equal to 0, but each time the loop restart, it checks to see if (i) is smaller than 5, and add one as long as it's not bigger than 5. The loop make sure to keep doing this over and over.

- You can also declare a new variable, this is really important and if done correctly, minimise the work you have to do each time you call something.

You can see here I not only declare a new variable, but I declare an array. An array is a container object that holds a fixed number of values of a single type.

These are only a few notions that I find important to understand before doing any serious work.

Application for reading audio device

For this week assigment, I made the software for my final project. The program takes my signal input, draws my wave and then export it as a dxf ready for any cam software. I used Processing to write the code and I must say I had some help cause I never did any advanced programation and this was by far the biggest prog challenge I ever did.

Drawing a Wave

Here is the final code:

    import processing.pdf.*;



float x, y;
float prevX=0.0, prevY=0.0;
float numOfWaves = 10;
float angle = 0;
float amplitude=1;
int cols = 7;
int rows = 1440;
float[][] myArray = new float[rows][cols];

void setup() {
  noLoop();
  beginRecord(PDF, "filename.pdf");

  for (int i =0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      myArray[j][i] = random(0, height/16);
    }
  }
  size(1440, 720);
  background(0);
  stroke(255);
}

void draw()
{


  for (int i=0; i < 7; i++) {


    translate(0, height/8);

    float frequence;
    float minRange = 0.8;
    float maxRange = 4;

    switch (i) {
    case 0 : 
      frequence = map(60.0, 0.0, 4000.0, minRange, maxRange);
      break;
    case 1 : 
      frequence = map(120.0, 0.0, 4000.0, minRange, maxRange);
      break;
    case 2 : 
      frequence = map(240, 0.0, 4000.0, minRange, maxRange);
      break;
    case 3 : 
      frequence = map(480, 0.0, 4000.0, minRange, maxRange);
      break;
    case 4 : 
      frequence = map(960, 0.0, 4000.0, minRange, maxRange);
      break;
    case 5 : 
      frequence = map(1920, 0.0, 4000.0, minRange, maxRange);
      break;
    default : 
      frequence = map(3840, 0.0, 4000.0, minRange, maxRange);
    }

    for (int x=0; x < width; x+=1)
    {
      if (x%10 == 0) {
        amplitude = myArray[x][i];
      }
      angle = radians(frequence*x);
      y = amplitude*sin(angle*(numOfWaves/2)+PI);

      //y = map(y, -amplitude, amplitude, -height/16, height/16);

      line(prevX, prevY, x, y);

      prevX = x;
      prevY = y;
    }

    prevX = prevY = 0.0;
    endRecord();
  }
}

Drawing my wave was not so easy to do, first thing I did is I made my setup with simple demand like the size and the color of my background. Then I set the color of my stroke. Easy peasy.

size(1440, 720);
background(0);
stroke(255);

Then I declare two integer variable at the top of my code, one for my colonnes, the other one for my rows. Since I have 7 frequency I want to use for my draw, I set the variable column equal to 7. Also I want to record every x position on my wave so I set the number of rows equal to the with of my page, 1440.

Back to my setup, I made a for loop that ask to my program to see if there's is less then 7 column and less then 1440 rows, if it's true, always add one till it's false.

Then I created an Array that goes into my for loops and calls my colums and rows, but since I still don't have any input nor data to fill my rows in each columns, I give them a random value using the random function and space them between 0 and the height of my windows/16, why 16 you ask? because we have 7 columns + 1 for spacing and we muliply it by two to create an equal spacing between each column.

I also called the beginRecord function and store it into a PDF file call filename.pdf this will be store in my processing folder.

Next, I have to position my arrays on my page so they don't spawn all one on top of the others. To do so I use the Translate function and simple position them at my position x0 and y equivalent to the height of my draw / 8, for each spacing I want in My draw.

Now I had to map my data in such a way that the draw looks like a fine result. without mapping, the waves of my draw would look way to big and disproportionate for the size of my artboard. the map function is pretty simple to use, in your condition you first have to set the incoming value to be converted, then the lower and upper bond of the value current range followed by the target lower and upper value range. I did a mapping for each of my rows.

Next, the code get a little bit more complex.

"

Here we basicly said that x equal 0 and as long as it's not bigger than the witdh of the draw, we will incremente by one.

  for (int x=0; x < width; x+=1)

angle = radians (frequence*x)

This line is use to draw the actual angle of our next point, we multiply the the frequency with our x data so the bigger the frequency th more cycle we will draw.

Finally we draw a line between the last and the new coordinates, and reste the coordinate at 0. Here is the result!

You can see that since were using random data, the result is never the same!

This code will be extremly useful for my final project. I will have to read from a serial input instead of generating random values, but for the rest everything is done to draw my sound!