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); 

int c = 1;

void draw() { 

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

  if (c > 1000) {
   c = 1;

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.

2 replies on “Processing: Overlapping Ovals”

Not bad! Only a few minor points:

– Rather than int c, you can use the built-in frameCount variable. Rather than checking if it’s over 1000, you can clear the background whenever frameCount % 1000 == 0.

– You can call strokeWeight(10) and noFill() in setup() – since they never change, they don’t need to happen in the draw() loop.

– Try using the HSB colorspace. Since it’s easier to visualize what color a set of HSB numbers will produce, it’s easier to tweak the random-number generation for different effects.

It’s great to see everyone participating in Processing Month.

Thanks Dan… I’ve definitely got a long way to go, but I’m learning (slowly) as the month progresses. It’s nice to be able to look back at my sketches from a week ago and see how I could have done it better. I try not to cringe too much at my newbie code. :)

Comments are closed.