Paying with Processing (Part Two)

Posted 2011-09-14 in Software

Last time I ran an example sketch and then wrote my own that prints “Hello World” in bright colours. Now I want to play around with some of the basic shapes that Processing provides. From the documentation it looks like the 2D primitives are the arc, ellipse, line, point, quad, rect, and triangle.

The first one I’m going to play with is the rect() primitive, so I wrote a simple sketch to draw one. All it does is set the window size then draw a rectangle somewhere in the window.

void setup() {
 size(640, 480);
 smooth();
 rect(30, 30, 155, 155);
}

The rect() function takes four parameters as inputs, the first two are the x and y co-ordinates of where to start drawing. The second two are the height and width of the rectangle. Then I thought it would be cool if I made it follow the mouse, this as it turns out is really easy. In the draw function you get a couple of variables you can use for this, mouseX and mouseY. They hold the x and y co-ordinates of where the mouse is so all I have to do is put the call to rect() into the draw loop then use the mouse co-ordinates to set that starting position of the rectangle.

rect(mouseX, mouseY, 155, 155);

This code worked ok but the viewport filled up with loads of rectangles as you moved the mouse really quickly. I wanted just a single rectangle that followed the mouse. So I added some extra lines of code that drew another rectangle over the whole viewport to clear it then draw the smaller rectangle. I also thought it would look much nicer if the mouse cursor was always located in the centre of the rectangle rather than at the top left-hand corner. So to do this I subtracted half the width of the rectangle from the x co-ordinate or the mouse cursor, and did the same with the height and y co-ordinate. This kept the mouse cursor roughly in the middle of the rectangle.

To draw the rectangle over the entire viewport I two other special variables, width and height. These are set to the width and height of the window you are using. The code for all of this is below.

void setup() {
  size(640, 480);
  smooth();
}

void draw() {
  fill(128,128,128);
  rect(0, 0, width, height);
  fill(0, 0, 255);
  rect(mouseX-(155/2), mouseY-(155/2), 155, 155);
}

Well that’s all for now. See ya!

Playing with Processing (Part One)

Posted 2011-09-05 in Software

After a while playing with the Arduino I’ve become interested in Processing which is what the Arduino language and Arduino IDE is based on. Just as the Arduino is a thin layer on top of C, Processing is simply a library for Java that makes playing with computer graphics much easier. So today I’ve decided to play around with it a bit and write about it.

First of all I downloaded the Processing IDE from the Processing website, I downloaded the Linux version as I’m using Ubuntu but you can get a Windows or Mac OSX version as well. Then I decompressed the files and fired up the IDE by executing the “processing” file, I was then greeted by the IDE.

Looks good eh?? It looks almost idendical to the Arduino IDE. I then has a quick read through some of the documentation on the website. The first code snippet I ran was from Processing own tutorial, although I left a small bit of code out. The code for it is below, what it does is draw a circle wherever the mouse cursor currently is.

void setup() {
    size(560, 160);
    smooth();
}

void draw() {
    ellipse(mouseX, mouseY, 80, 80);
}

Yay, it worked!! I love how exciting it is to get instant feedback. I wasn’t sure exactly what the smooth() function did, 

I suspected it may have been something to do with anti-aliasing and it turns out I was right after looking at the reference. As you can see from the screen shot it can be used to make pretty snaking patterns.

I decided that I wanted to create a sketch that printed “Hello World” because that’s the first program most people write :-). I had a quick look around the documentation on the website and I found the text() function and some example code. I typed that into the IDE but I wanted to use a bigger font, it turns out the font file must be in the /data directory of the sketch.

There is a tool provided that will take a font on your computer and turn it into something Processing can use. To use this tool, go to the “Tools” menu and select “Create Font…” and then in the dialog box that pops up select the font you want and the filename then click OK.

void setup() {
  size(640, 160);
  background(254, 153, 0);
}

void draw() {
   PFont font = loadFont("Verdana-Bold-48.vlw");
   textFont(font);
   fill(0, 105, 253);
   text("Hello World", 15, 88);
}

Clicking the run button produces a large window with “Hello World” written in large letters. It worked! Yay!!! So far it’s been pretty fun playing around with Processing, I hope to do a lot more with it. I want to use it to talk to the Arduino. Perhaps plotting the voltage on the analogue pins over time.

That’s it for now, I hope to have another post on this later in the week. See ya!