Categories

## Processing: Flying Triangles

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

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

## Processing: Square City

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

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

## Processing: 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

## Foursquare Fun – Who is Here?

I had this idea for Foursquare… I thought it might be cool for a venue to have a screen showing who recently checked in. So I dug into the API a bit to see if that could be done. Here’s what I got.

I fired up FoursquareX and saw that old pal tapps was at MOCT, which happens to be a bar/nightclub. (I know this because I’ve been there once… though it was a paid gig and I was operating a camera.) Anyway… I needed the venue ID (vid) for MOCT, which you can get from the URL: http://foursquare.com/venue/35578. Once I had that, I did this:

```curl -u [USERNAME]:[PASSWORD]-o moct.xml 'http://api.foursquare.com/v1/venue?vid=35578'
```

This gave me a file called ‘moct.xml’ containing the data I needed. (Note that this API call requires authentication… without it you’ll get venue info, but not the list of people checked in.)

I won’t show you the entire file, but here’s the first part to look at, the stats:

```  <stats>
<checkins>764</checkins>
<herenow>4</herenow>
<mayor>
<user>
<id>2213098</id>
<firstname>Kym</firstname>
<lastname>H.</lastname>
<homecity>Milwaukee, WI</homecity>
<photo>http://playfoursquare.s3.amazonaws.com/userpix_thumbs/HA00BMYARP3JR0LD.jpg</photo>
<gender>female</gender>
</user>
<count>24</count>
</mayor>
</stats>
```

You can see the important bits are: checkins, herenow, and mayor. The herenow tells you how many people are there right now. (I believe “right now” means, they have checked in within the last 3 hours.)

So here’s the info for tapps:

```    <checkin>
<id>226051620</id>
<created>Wed, 20 Oct 10 23:17:23 +0000</created>
<timezone>America/Chicago</timezone>
<user>
<id>76040</id>
<firstname>tracy</firstname>
<lastname>apps</lastname>
<friendstatus>friend</friendstatus>
<homecity>Milwaukee, WI</homecity>
<photo>http://playfoursquare.s3.amazonaws.com/userpix_thumbs/NVS3B4M3YFMHTPZN.jpg</photo>
<gender>female</gender>
</user>
</checkin>
```

And here’s a user named “Ty S.” who I do not know…

```    <checkin>
<id>226136078</id>
<created>Thu, 21 Oct 10 00:20:45 +0000</created>
<timezone>America/Chicago</timezone>
<user>
<id>714868</id>
<firstname>Ty</firstname>
<lastname>S.</lastname>
<homecity>Milwaukee, WI</homecity>
<photo>http://playfoursquare.s3.amazonaws.com/userpix_thumbs/I1STUJNEAQGMGQJZ.jpg</photo>
<gender>male</gender>
</user>
</checkin>
```

We can construct the URL to his Foursquare page using the id: http://foursquare.com/user/714868, and if the user has a username set, it will redirect to custom URL. (At least, it will if you are logged in with your browser.) We can also see their photo, so you could do something interesting with that as well. (There are no access controls on the images, you should be able to see any of those.) You can also see their homecity and their gender. I’m sure you can come up with an interesting Boys vs. Girls display using that data… And for a nightclub, well, it just seems fitting.

OK, well that’s all the time we have for now, keep on hacking… and if you build anything interesting with this info, please let me know.

Update: I probably should have linked to the API docs as well: http://groups.google.com/group/foursquare-api/web/api-documentation

Categories

## Pretty Print XML with Perl

Let’s say you’ve got a file named “file.xml” and want it pretty printed, all indented nice and everything…

For just such an occasion I have a Perl script named “pretty.pl” and I just run my XML file through it like so: `cat file.xml | perl pretty.pl`

Here’s the code I use:

```#!/usr/bin/perl

use XML::Twig;
use XML::Parser;

my \$xml = XML::Twig->new(pretty_print => 'indented');

\$xml->parse(\*STDIN);

\$xml->print();
```

You can even pass it through right as it comes in over the wire: `curl http://example.com/data/file.xml | perl pretty.pl`

Here’s an example of data from Foursquare without pretty printing. (I used curl to grab the data. Also, I added in some line breaks, just to make it a little more readable.):

```<?xml version="1.0" encoding="UTF-8"?>
<checkins><checkin><id>123847273</id>
<created>Mon, 09 Aug 10 00:50:33 +0000</created>
<timezone>America/Chicago</timezone><venue><id>2357761</id>
<name>The Kiltie</name><primarycategory><id>79067</id>
<fullpathname>Food:Ice Cream</fullpathname><nodename>Ice Cream</nodename>
<iconurl>http://foursquare.com/img/categories/food/icecream.png</iconurl>
<geolat>43.107391</geolat><geolong>-88.464475</geolong></venue>
<display>Pete P. @ The Kiltie</display></checkin></checkins>
```

And here’s the same data, again using curl to grab it, and then passing it through the pretty.pl script:

```<?xml version="1.0" encoding="UTF-8"?>
<checkins>
<checkin>
<id>123847273</id>
<created>Mon, 09 Aug 10 00:50:33 +0000</created>
<timezone>America/Chicago</timezone>
<venue>
<id>2357761</id>
<name>The Kiltie</name>
<primarycategory>
<id>79067</id>
<fullpathname>Food:Ice Cream</fullpathname>
<nodename>Ice Cream</nodename>
<iconurl>http://foursquare.com/img/categories/food/icecream.png</iconurl>
</primarycategory>