Processing 1.0 - Processing Discourse

rrrr

map locations
Mar 6^th, 2009, 11:31pm

hello,
i'm trying to write myself a little applet that reads the colors on a map with get() http://processing.org/reference/get_.html, associates each color with a neighborhood number which i have in my other main code, and writes it out to a file http://processing.org/reference/PrintWriter.html. I need to read it in my main code using http://processing.org/reference/createReader_.html.

I need to create these boundaries because I will then place ellipses into the different areas on the map, according to the neighborhood number assigned to the dot. right now, i'm just having trouble figuring out how to write the app to specify each location.

any help is appreciated! thanks in advance!

i'm using this map as practice:
http://www.sflisting.com/wp-content/uploads/2008/08/sf-map.gif

my code:

PrintWriter output;
PImage sfmap;

void setup() {
size(1000, 700);
smooth();
sfmap = loadImage("data/sf-map_test.png");
// Create a new file in the sketch directory
output = createWriter("positions.txt");

}

void draw(){
background(0);
image(sfmap,0,0); //display map

point(mouseX, mouseY);

color soma = get(239, 197); //get the color for this coordinate
fill(soma); //assign fill with the color found on that point
// rect(10,10,30,30);

color usf = get(430, 127); //get the color for this coordinate
fill(usf); //assign fill with the color found on that point
// rect(40,10,30,30);

color pan = get(502, 86); //get the color for this coordinate
fill(pan); //assign fill with the color found on that point
// rect(70,10,30,30);

output.println("x: " + mouseX); // Write the coordinate to the file
output.println("y: " + mouseY); // Write the coordinate to the file
// output.println("soma"); // Write the coordinate to the file
// output.println("usf"); // Write the coordinate to the file
// output.println("pan"); // Write the coordinate to the file

}//end draw

//point(mouseX, mouseY);

void keyPressed() {
output.flush(); // Writes the remaining data to the file
output.close(); // Finishes the file
exit(); // Stops the program
}

RickiG

Re: map locations
Reply #1 - Mar 7^th, 2009, 3:10pm

Hi

Could you explain a little more precisely what you are trying to achieve.
As I see it you pull some color from your map and saves these in a text file again and again, then waits to someone presses a key, saves and closes the program.

"I need to create these boundaries because I will then place ellipses into the different...."

What are these boundaries?

A little more info and I bet someone can help you out :)

Regards Ricki

rrrr

Re: map locations
Reply #2 - Mar 7^th, 2009, 5:40pm

Oops, sorry I wasn't a little more clearer :)

I have a map of San Francisco that is divided into neighborhoods. I am scraping live data from an RSS feed, parsing the data where I am then representing it as a dot on the map. Each dot needs has an assigned neighborhood and needs to be placed into its correct neighborhood.

Now, I'm not sure how it is done, but as you can see from the map, there are different colored areas for the different neighborhoods. This part I'm not sure about how it works or if it is possible...I was told that you can read a single x,y coordinate point within that color and have coordinates created for all the pixels in that colored area? I want to be able to drop in a random number of dots in random areas within their assigned neighborhoods.

I was suggested to use those links below. I was looking at the PrintWriter link and was a little confused. Am I supposed to MANUALLY select the points myself by dragging my cursor around on the screen?

*update: it outputs a .txt of the coordinates. So far I have this:
output.print(mouseX + " " + mouseY); // Write the coordinate to the file

I think I'm supposed to have a corresponding # or title for each area, such as "1 408 295" (assigned neighbordhood #, x-coord, y-coord)? That would change the code above a bit then? I need to somehow add these neighborhood #s to each string of info as well. I'm thinking of having a list for 37 neighborhoods like:

1 408 5
1 30 95
2 8 29
2 38 155
3 4 245
.
.
.
or thats how i think it works...
Since the data is from a live feed, the dots placed on the map will change after each browser refresh.

Does this make sense?

Thanks!

« Last Edit: Mar 7^th, 2009, 6:45pm by rrrr »

RickiG

Re: map locations
Reply #3 - Mar 7^th, 2009, 6:57pm

You have got the writing coordinates to a file down, so this is just a sketch with some ideas on how to get the green, purple and so on, areas listed.

[ code ]

PImage sfmap;
ArrayList greenArea;

void setup()
{
size(679, 638);
background(0);
greenArea = new ArrayList();
color greenMax = color(206, 238, 190);
sfmap = loadImage("Picture 12.png");
sfmap.loadPixels(); //now you can get to the individual pixels color
for(int i = 0; i < sfmap.pixels.length; i++) //the pixel array is one dimensional..so its width * height long
{
if(sfmap.pixels[i] == greenMax)//if it is the right green color..here you will notice that
//there are several different greens in the area, so you need to
//either pass the image through a filter, avarage the color or give it a
//span where the green must lie within, I think I would map a span..
{
println("got one");
PVector pixPos = new PVector(i, 0); //this looks completly stupid, usin an arrayList and
//a PVector, we dont know how many green, red or whatever color
//there is so if we use an array we would have to adjust its size
//each time we put in a new value(also a fine solution) I
//just thought an ArrayLIst was easier here, and ArrayLists only takes
//objects and not plain int, so I just pretend it is a PVector and save
//it as an x value. Maybe you can do something clever with both x and y..
greenArea.add(pixPos); //add it to the arrayLIst, see, we don't care about the size of it
} //so you end up with a list of all the pixels in the green area
}
//at no time did we put the .png on the canvas, meaning it is still empty, for
//fun we now try and draw the green area we just found, this should produce
//a drawing of only the green areas
loadPixels(); //get access to manipulate the onscreen pixels through "pixels[int] = color
for(int j= 0; j < greenArea.size(); j++)
{
PVector pix = (PVector)greenArea.get(j);
pixels[(int)pix.x] = greenMax; //here we get the PVector back, and use the x value, it is a float
//so I just cast it to an int as the pixels array only accepts these
}
updatePixels(); //tell processing you changed some pixels and it should render again
}

//What you get drawn out to the screen is the pixels that are the green we specified, that is
//only some of them, but all in the green area so it is not completly off :)
//Now you need to find out how to catch all the greens and purples and so on. I think you need
//to filter it. Before you make the detection you could go throug the pictures pixels and pull out hue,
//stauration, alpha, red, green or reds from the color and manipulate the picture to have clean color
//before you run the e.g. green detection.

//change the picture name in loadImage()to your pics name and change the size() to your pictures size
[ /code ]

Regards Ricki

RickiG Junior Member Offline Posts: 81	Re: map locations Reply #4 - Mar 7^th, 2009, 7:03pm Ok can't get the code tag to work?? A well, just copy it all into a new sketch and it should run just fine:) The "copy for discourse" in the processing 1.0 IDE is not working. (probably the Mac/Java thingy).
	Regards Ricki

rrrr

Re: map locations
Reply #5 - Mar 7^th, 2009, 7:55pm

cool! thank you so much! i think i get it but do to my amateur knowledge of processing, am still confused... i tried adding a second color to search below. also, i don't know if this is right, but also added this to get the y?: pixels[(int)pix.y] = greenMax;

i also tried adding the writing out the coordinates with PrintWriter, but i don't think i'm doing that right either? sorry, i'm such a newbie.

PImage sfmap;
ArrayList greenArea;
ArrayList blueArea;

PrintWriter output;
color greenMax = color(229, 247, 213);
void setup()
{
size(800, 673);
background(0);
greenArea = new ArrayList();

output = createWriter("positions.txt");
// blueArea = new ArrayList();
// color blueMax = color(230, 255, 255);

sfmap = loadImage("sf-map_test.png");
sfmap.loadPixels(); //now you can get to the individual pixels color
for(int i = 0; i < sfmap.pixels.length; i++) //the pixel array is one dimensional..so its width * height long
{
if(sfmap.pixels[i] == greenMax)//if it is the right green color..here you will notice that
//there are several different greens in the area, so you need to
//either pass the image through a filter, avarage the color or give it a
//span where the green must lie within, I think I would map a span..
{
println("got one");
PVector pixPos = new PVector(i, 0); //this looks completly stupid, usin an arrayList and
//a PVector, we dont know how many green, red or whatever color
//there is so if we use an array we would have to adjust its size
//each time we put in a new value(also a fine solution) I
//just thought an ArrayLIst was easier here, and ArrayLists only takes
//objects and not plain int, so I just pretend it is a PVector and save
//it as an x value. Maybe you can do something clever with both x and y..
greenArea.add(pixPos); //add it to the arrayLIst, see, we don't care about the size of it
} //so you end up with a list of all the pixels in the green area

// blue?
// if(sfmap.pixels[i] == blueMax){
// println("got blue");
// PVector pixPos = new PVector(i, 0);
// blueArea.add(pixPos);
// }
//

}
//at no time did we put the .png on the canvas, meaning it is still empty, for
//fun we now try and draw the green area we just found, this should produce
//a drawing of only the green areas
loadPixels(); //get access to manipulate the onscreen pixels through "pixels[int] = color
for(int j= 0; j < greenArea.size(); j++)
{
PVector pix = (PVector)greenArea.get(j);
pixels[(int)pix.x] = greenMax; //here we get the PVector back, and use the x value, it is a float
//so I just cast it to an int as the pixels array only accepts these
//pixels[(int)pix.y] = greenMax;
}

//blue
// for(int j= 0; j < blueArea.size(); j++)
// {
// PVector pix = (PVector)blueArea.get(j);
// pixels[(int)pix.x] = blueMax; //here we get the PVector back, and use the x value, it is a float
// //so I just cast it to an int as the pixels array only accepts these
// pixels[(int)pix.y] = greenMax; //get Y too
// }
//
updatePixels(); //tell processing you changed some pixels and it should render again
}

//What you get drawn out to the screen is the pixels that are the green we specified, that is
//only some of them, but all in the green area so it is not completly off :)
//Now you need to find out how to catch all the greens and purples and so on. I think you need
//to filter it. Before you make the detection you could go throug the pictures pixels and pull out hue,
//stauration, alpha, red, green or reds from the color and manipulate the picture to have clean color
//before you run the e.g. green detection.

//change the picture name in loadImage()to your pics name and change the size() to your pictures size

void draw(){
background(0);
image(sfmap,0,0); //display map

output.print((int)pix.x); // Write the coordinate to the file ??????????????
// output.print(mouseY); // Write the coordinate to the file

}//end draw

//point(mouseX, mouseY);

void keyPressed() {
output.flush(); // Writes the remaining data to the file
output.close(); // Finishes the file
exit(); // Stops the program
}

rrrr

Re: map locations
Reply #6 - Mar 9^th, 2009, 5:42pm

ok, here is a modified version. i'm not sure if the rest of my code works because i can't get past the error "syntax error, maybe a missing ] character?" where my "byte [832800] neighborhoodKey; " code is. isn't this the way it reads it?

//finding coordinate points on map and write out to a txt file

int num_hoods = 37; //37 neighborhoods
String [] hoodsNames = {
"SOMA / south beach", "USF / panhandle", "alamo square / nopa", "bayview", "bernal heights", "castro / upper market",
"cole valley / ashbury hts", "downtown / civic / van ness", "excelsior / outer mission", "financial district", "glen park",
"haight ashbury", "hayes valley", "ingleside / SFSU / CCSF", "inner richmond", "inner sunset / UCSF", "laurel hts / presidio",
"lower haight", "lower nob hill", "lower pac hts", "marina / cow hollow", "mission district", "nob hill", "noe valley",
"north beach / telegraph hill", "pacific heights", "portola district", "potrero hill", "richmond / seacliff", "russian hill",
"sunset / parkside", "tenderloin", "treasure island", "twin peaks / diamond hts", "visitacion valley", "west portal / forest hill",
"western addition"
};

color [] colorValues = {
#ccae62, #d4c9ae, #452525, #f25f22, #288b43, #a2d5aa, #796227, #f04b23, #f0d123, #9a8d42, #ead76e, #9e2382, #ffeb8d, #3e50a2,
#3d58a7, #ad1f23, #d64499, #754d4d, #8f7bb8, #a7d48c, #a3509f, #ed2089, #d0dd2e, #6dcbd9, #d96da5, #6db4d9, #f9f293, #74c162,
#f3b386, #2c2c7b, #dee21e, #4dc5d5, #b2d459, #849a72, #cb3d1c, #692d1f, #ffc600
};

//color pink = color(255, 102, 204); //example of structure
color [] colorIndex = new color[num_hoods]; //colors array, placing color values to color/neighborhood

//loadPixels();

//byte [number of pixels] neighborhoodKey; //size of screen: 1200 x 694 = 832800
byte [832800] neighborhoodKey;
PImage sfmap;

void setup(){
size(1200, 694);
background(0);
sfmap = loadImage("sf-map.png");
//sfmap.loadPixels(); //get individual pixels color
loadPixels(); //get access to manipulate the onscreen pixels through "pixels[int] = color

//for(int i = 0; i < sfmap.pixels.length; i++){
for(int i = 0; i < pixels.length; i++){
//pixels[i] = pink;
//each 832,800 bytes = each pixel, which is assigned to a neighborhood # between 0-37
neighborhoodkey[i] = convertColorToNeighborhood(pixels[i]); //assigns each pixel to a hood. pixels are of the color datatype!
}

//writing out all the entire array of bytes to file. data is saved in binary format
saveBytes ("positions.txt", neighborhoodKey);

}

//convertColorToNeighborhood is a function that returns an int between 0 & 37
void convertColorToNeighborhood(int i){
for (i=0; i<num_hoods.length; i++){
colorValues[i] = hoodsNames[i];
}
}