Tutorial: Mouse following, time limit



Tutorial: Mouse following, time limit, computing pixel distances

This is intended to be the initial steps towards creation of a geography game. I have done similar games using Flash and using JavaScript (with the Google Maps API). I am posting this now because it does demonstrate features of Processing and it may take some time for me to find a suitable map.

I made two applications (so far). The first just demonstrates the mouse following. The second checks the pixel position against stored positions and reports the best result.

The first application opens with a display of a map of New York State with the county lines. An image (photo of me in Washington, DC) moves towards the mouse position. The image moves closer and closer to the mouse position over time. When a set amount of time elapses or the player clicks on the screen, motion stops. The flying image shrinks as time advances.

The second application asks the player a question to which there are multiple answers. The specific question is "Where did Professor Shablinsky travel this summer?" She traveled to St. Petersberg, Russia and [somewhere in] Iceland. Each answer comes with a pixel x,y location and text.

If you plan to spend any time on geography games, you should study projections, namely, how to go from the 3D Earth to a 2D display. The problem is less critical when working with small[er] regions but is still present. In this application, I wanted to present a picture of the whole earth. Any projection has distortions. My quick review is that the Winkel projection is the current favorite. You may want to compare it with the Mercator projection once common in maps in schoolrooms.

My one question game displays a single question and keeps track of the time. The picture of a traveler follows the mouse and shrinks in size. The time remaining is updated and displayed. Here is a screen shot of the game in process:

[pic]

If the player clicks on a position, a calculation determines which of the set of positions is closest and the distance from that position is displayed. Here is a final screen shot:

[pic]

If the player gets close, but not within a set distance, a message appears with the pixel distance rounded to a whole number:

[pic]

If the player does not click in the allotted time, the message You ran out of time is displayed.

Please understand that the construction of one question having more than one answer is a possible model for a game, but may not be appropriate in many cases. My reasons for doing it were 1) because my colleague Professor Shablinsky does do extensive traveling and 2) I wanted my example to demonstrate 'best so far' coding.

Overview

This application requires you to obtain 2 images and get them into the Sketch folder by clicking on Sketch/Add File… It is necessary that you determine the dimensions of each image. The background image dimensions are used in the size statement in setup. I used the actual size of my photo (61 x 128) to set the origw and origh variables. I start the size at the original dimensions and decrease each dimension to one quarter. The coding ensures that the image retains its aspect ratio (width to height ratio): that is, the width is decreased by a fixed amount based on the time interval and the height is adjusted to correspond to the width. The particular choice of going from one half to one sixth certainly can be modified. The image shrinks to its final (small) size when the time is up or when the player clicks on the screen.

The application is dependent on timing, mouse movement and mouse clicking. The timing aspect is implemented using the basic draw mechanism of Processing. That is, the code in the draw method determines if the image still is in flight (by checking the boolean variable inmotion) and, if so, recalculates the position and the width and height of the moving image. There also is code to check if the allowed amount of time has been exceeded. A float variable duration is initialized to 5 seconds (this value can be changed). This variable is decreased in the draw method and when it is zero or less, the inmotion variable is set to false. The mouseClicked method also sets inmotion to false. This routine positions the moving image to the position of the mouse. The object doesn't move after the player clicks the mouse.

For the second application, the Processing dist function is used to compute a distance from each of the specified answers. The distance from the nearest one is displayed along with the text going along with the answer.

Basic following application

The global variables include the image variables for the background, bg, and the moving image, flyer. As stated, the Boolean variable inmotion starts off as true and gets set to false either in draw or in mouseClicked. It is checked in draw. The rest of the variables are used in the calculation of the position and the size of the moving image.

The code consists of the global variables and definitions of the three methods: setup, draw and mouseClicked. Note that mouse movement is not treated as an event but is detected using references to the built-in variables mouseX and mouseY in each iteration of the draw method and the mouseClicked method.

PImage bg;

PImage flyer;

boolean inmotion = true;

float duration = 5; // 5 seconds

float framer = 50;

float interval = 1/framer; //frame interval in time

float x,y,fw,fh,wdel;

float origw,origh,smallw;

void setup()

{

size(720,528);

frameRate(framer);

bg = loadImage("newyorkstate.png");

flyer = loadImage("closeup.jpg");

background(bg);

x = 10;

y = 10;

origw = 339/2;

origh = 340/2;

smallw= 339/6;

fw = origw;

fh = origh;

wdel = (origw-smallw)/(duration/interval);

}

void draw() {

float delta;

background(bg);

if (inmotion) {

delta = interval/duration;

fw -= wdel;

fh = fw*(origh/origw);

x = x+ delta*(mouseX-x);

y = y+ delta*(mouseY-y);

image(flyer,x,y,fw,fh);

duration = duration - interval;

if (duration ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download