Meeting VII — numbers

Groundhog examples

Press on the big empty space for a lame groundhog example and then check out a little JavaScript in drawGroundhog() function — about halfway down the code. Doesn’t it look just a little bit like Processing and Java?

A download

Expand the ZIPped Processing groundhog program and drop it into your sketchbook directory. Using the mouse, click into the groundhog directory and look at the files in the data directory. You can find many groundhog pictures on the Internet, but here are the sources for these three.

• JPEG image from the Forager Chef
• SVG files from UIHere and SVG Repo

If you want to make your own. Adobe Illustrator supports SVG files. It’s probably easier that hand-coding Bezier curves in Processing.

Examining the project

The setup

Start up Processing and open the groundhog project. First, run it. Next, press Sketch → Show Sketch Folder. Go into the data directory. Now, you should see the image files. You can add your own files to the data directory by using Sketch → Add File.

The code

This is going to be a semi-guided tour of the code as we look at the Processing code.

• Global variables
  • PImage — Processing view of PImage
  • PImage — Java view of PImage
• setup()
  • PShape — Processing interface for SVG (Scalable Vector Graphics) files. Check out Mozilla’s SVG Tutorial.
  • loadImage() — Notice that the image can be loaded from an URL.
  • exit() — If either loadImage or loadShape is null, your program should give up.
  • Use the width and height fields described in the Java class PImage documentation to print the size of the images.
• draw() — Nothing new here, but run it and take a look.

Back to the book

Transformations

Use the transformations of Processing so that the images of both groundhogs are about the same size and one is centered in the left half of the display window and the another is centered in the right half.

Today’s task — Image Processing

Start a new project. Then go the web site for the players of the US soccer teams and download pictures of at least two players and store them in your project. The pictures are all 580×580 pixels, but the women’s are in PNG format and the men’s are in JPG format. (OK. You can use pictures of anyone, including yourself, but these pictures all seemed to have nice white backgrounds.) Also, I used a frame rate of 10.

A bunch of tasks follow. Do them one at a time. As soon as you finish one, save it twice using a new name for the second save.

Upload your effort to the February 4 upload!.

1. Make each of pictures vibrate a little in its half of the screen. Use random() to make it look like Brownian motion (whatever that is). For each picture, I generated two numbers between -2 and 2 and multiplied them to compute the offset.
2. Make each of the pictures rotate slowly in its half of the screen.
3. Make each of pictures shirk and grow peridically.