Categories
Uncategorized

Processing: Flying Triangles

Today’s Processing sketch features triangles of various shades flying upwards.

See it in action here!

Pretty simple, eh? The original sketch this came from actually had just one triangle (which I’ll call a ‘spaceship’) which had the x-axis controlled by an Arduino with a potentiometer. This one doesn’t have that.

/*
 * 20110505.pde
 */

void setup() { 
  size(800, 200); 
  frameRate(30);
} 

int yPos = 0; 

void draw() {
  
  background(0);
  stroke(255);
  fill(0);
 
  yPos = yPos - 3;
  if(yPos < 0) {
    yPos = height;
  }

  for (int i = 20; i < 790; i = i+20) {
    int yColor = i/3;
    if (yColor > 255) {
     yColor = 255; 
    }
    stroke(yColor);
    triangle(i, yPos, (i-5), (yPos+10), (i+5), (yPos+10));
  }
  
}

I’d like to go back to the single ship again, and work on adding a starfield which moves past the ship as it maintains it’s vertical position on the screen.

Categories
Uncategorized

Processing: Square City

Square City

For our latest installment of Processing Month, we’ve got a lot of squares, er, rectangles. They overlap. They are semi-transparent.

See it in action here!

Another simple sketch, with randomness in it.

/*
 * 20110504.pde
 */

void setup() {
  size(800, 600);
  background(0);
}

float x = 50;
float y = 50;
int   c = 0;

void draw() {
      
      fill(random(0,200),random(0,200),random(0,200), 70);
      strokeWeight(0);
      rect(x, y, random(1,50), random(1,50));
      
      if (x > 650) {
        x = 50;
        y = y + 50;
      }
      else {
        x = x + 50;
      }
      
      if (y > 500) {
        y = 50;
        if (c > 500) {
          background(0);
          c = 0;
        }
        c++;
      }
}

It draws rectangles on top of rectangles on top of rectangles, and eventually clears the screen after enough iterations.

See any improvements you would make? Let me know…

Categories
Uncategorized

Processing: Overlapping Ovals

Overlapping Ovals

I was unaware it was Processing Month, but I like the idea… so I’m going to try to kick out some sketches this month.

I’ll start off slow and (hopefully) see some improvement by the end of the month. This sketch is called “Overlapping Ovals” and you should be able to see it in action here if you’ve got a canvas-capable browser. (We’re using Processing.js to do the magic. I’m not sure that’s the best way to do this, but we’ll find out.)

/*
 * 20110503.pde
 */

void setup() { 
  size(800, 600); 
  background(0);
} 

int c = 1;

void draw() { 

  noFill();
  
  float rCol = random(50,240);
  float gCol = random(50,240);
  float bCol = random(50,240);
  stroke(rCol,gCol,bCol,50);
  strokeWeight(10);  
  
  float wNum = random(20,1200);
  float hNum = random(20,1200);
  ellipse((800/2), (600/2), wNum, hNum);

  if (c > 1000) {
   background(0);
   c = 1;
  }
  
  c++;
  
}

It basically draws 1000 randomly sized and colored ellipse on the screen, then clears the canvas, and does it again.

Again, I’m still a bit of a Processing newbie, so be kind, and hope that things get better as we go along. If you see something that seems all wrong, call it out so I can learn and improve it.

Categories
Uncategorized

Processing

Processing

I’ve become quite the fan of Processing. When I first started to dig into the Arduino world, I turned to my old friend Perl to deal with Arduino<->Computer communication, but quickly discovered that Processing was an ideal environment for such a thing.

Perl is great (you know, IMHO and all that) but the main appeal for me has always been in Perl’s data processing capabilities, and having CPAN and a module for almost everything. Perl is fun, but it’s not FUN. I’ve dabbled with generating graphics with Perl using GD and SVG modules, but it’s not anywhere near the area known as fun.

Processing, in my mind, is built for fun. So what is Processing?

Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Processing sometimes gets called a “multimedia programming language” and is used quite a bit by artists and designers, and probably much less by hardcore software developers. Check out OpenProcessing for some great example sketches.

Drawing

My own sketches are not very impressive yet, but as I said, Processing it a lot of fun. It’s reminiscent of the olden days of graphics on the Apple ][ where you plotted things out in HIRES graphics mode but, you know, way more advanced.

It’s pretty easy to build Processing sketches that respond to sensors connected to a microcontroller like an Arduino (see Accelerometer Art) and that’s something I’ll definitely be exploring more of in the future.

Android

Processing runs on top of Java, or is a subset of Java, or whatever. This is great because you can easily create a Processing sketch that can run on Mac OS X, Windows, and Linux, and even create a standalone application for each platform. (It’s that promise of Java we had long ago!) But the real excitement is that the latest version of Processing lets you target Android as a platform. Supposedly you can build an app in Processing and get it into the Android Marketplace. (I’m not aiming to get anything into an ‘App Store’ but just want to run my own apps on my own devices, as mentioned in my Android vs. iPhone post.)

And speaking of the iPhone, it looks like iProcessing and Processing.js may be able to get Processing sketches running on iOS… neat! (Processing.js is also on my TO DO list. I’ve toyed with it briefly and it’s pretty amazing.)

One of my complaints about this “new world of Apps” on phones and tablets and non-traditional devices is that there is too much of a barrier to entry to building things that run on them. I’m hoping Processing might help bring that barrier down a bit.

Update: It seems May is Processing Month. I didn’t know! Now I feel compelled to do more.

Categories
Uncategorized

Processing Audio

I got into Processing when I saw that it was a way to interface my desktop computer with an Arduino. Since then I’ve been exploring Processing more and seeing what it can do.

The latest excursion has been into audio, and I found a library called minim to play with. Download it, unzip it, and drop the ‘minim’ folder into your ‘libraries’ folder in your Processing folder, and you’re ready to go. Here’s my first experiment.

There’s an example for AudioInput which shows audio waveforms, so I grabbed the example and modified it slightly, I mainly twiddled the numbers a bit for a larger display.

Audio Waveform

Here’s the (slightly modified) code. (1280×800 being the screen size of my MacBook.)

/*
 * WavyLines.pde
 */

import ddf.minim.*;

Minim minim;
AudioInput in;

void setup()
{
  size(1280, 800, P3D);
  minim = new Minim(this);
  minim.debugOn();
  in = minim.getLineIn(Minim.STEREO, 1280);
}

void draw()
{
  background(0);
  stroke(0,255,0);
  // draw the waveforms
  for(int i = 0; i < in.bufferSize() - 1; i++)
  {
    line(i, 250 + in.left.get(i)*150, i+1, 250 + in.left.get(i+1)*150);
    line(i, 550 + in.right.get(i)*150, i+1, 550 + in.right.get(i+1)*150);
  }
}

void stop()
{
  // always close Minim audio classes when you are done with them
  in.close();
  minim.stop();
  super.stop();
}

This code (at least on Mac OS X) runs and expects the sound input to be the built-in mic on the MacBook. This is pretty fun, and my daughter (who plays the trumpet) had a good time making all sorts of strange noises and watching the waveforms that were generated. If you export it from Processing as an application, you can run it full screen with no menubar, etc.

While the mic input is fun, you can also build yourself a little audio visualizer that reacts to what audio your computer is playing. There’s a bit in the manual about Setting the System Mixers, but I just went the Soundflower route here.

Once you’ve got Soundflower installed, you can set up your audio routing…

Sound Out
Sound In

Here’s my sound output and sound input settings in System Preferences.

Fire up Soundflowerbed, and then choose a song in iTunes and our “WavyLines” application should respond appropriately.

Waveform

Here’s what you should get… well, depending on the audio playing. Maybe I can team up with the guys in the Handmade Music Group at the Milwaukee Makerspace and come up with some ways to enhance this into something even cooler.