Newbie- Trying to create a basic point and click map

Processing Coding Questions
1

Hey guys, new to the game and I’m working on a project. It’s a UFO data map

map
map750×560 78.8 KB

Ideally, you point and click on each ufo picture representing a different county, and a mass of circles representing the amount of reported ufo citings in the area shows up, and disappears when you click the mouse again. I’m having trouble figuring out where to even begin.

  1. I have trouble with the concept of mouse placement, and where to get the coordinates for each ufo and it’s placement on the page. My teacher suggested using a grid system but I can’t find a lot of information on how to go about doing that
  2. I’m not sure how to make multiple dots appear at once without creating hundreds of individual ellipses, but I know that would take too long. Is there a simpler way?
    Any help would be appreciated, thank you!
2

i would follow the lead your teacher gave you as it appears you only have a single static image in which the ufos which will be the buttons. as the ufos are not separate or given placement information i would map some hotspots with some preprocessing of the information in the image.

the image below in broken into 48x48 cells of 14x14 pixels each. it would be a bit of work but you can calculate the column and row of each ufos top-left cell and how many cells the ufo occupies on each axis. using that information you can build an array of hotspots (which can included the amount of sightings to be shown when clicked) and simply divide the mouse position by the cell size to discover the ufo which has been selected. well that’s how i would approach it given the restrictions.

griddedResizedMap
griddedResizedMap.png672×672 81.2 KB

this is a versions of the above gridded out map with the new size

plainResizedMap
plainResizedMap.png672×672 48.8 KB

1 Like
3

If you want to write down the coordinates of a bunch of location on an image, why not use Processing to do it? Click on your image, and the console will record the mouseX, mouseY.

PImage img;
void setup() {
  size(672, 672);
  img = loadImage("plainResizedMap.png");
  fill(255,128);
}
void draw() {
  background(0);
  image(img, 0, 0);
  ellipse(mouseX, mouseY, 38, 20);
}
void mouseClicked() {
  println(mouseX, mouseY);
}

Now you can either record these directly in an array in your code, or record them in a text file and load it as data.

So, your data file might look like this:

82, 114, Clatsop
131, 140, Columbia
125, 170, Washington
…

…and then, when there is a click, you want to loop over your data file and check if each row to see if the mouse fall in a region centered on that point, e.g. with point-circle or point-rectangle collision detection:

4

Oh wow, thank you guys! You’ve given me so much to work with and I am definitely on the right track right now! I really appreciate it