Issue with drawing on a map where i want.
in
Programming Questions
•
1 year ago
Hello..
I have an image bigger than the canvas size and i want to use the arrow keys to navigate around the image. This works fine. The issue comes when i am loading data from a TSV file to draw different size circles representing data on the image. It will only draw something within the size of the canvas. Some of the circles need to be drawn outside of the canvas. I imagine this is probably not so straight forward if at all.
Here is my code:
PImage UK_Image;
PImage bufSlice;
PImage getBufSlice() {
return buf.get(X, Y, W, H);
}
PGraphics buf;
int X;
int Y;
int W;
int H;
Table locationTable;
Table nameTable;
int rowCount;
Table dataTable;
float dataMin = MAX_FLOAT;
float dataMax = MIN_FLOAT;
float closestDist;
String closestText;
float closestTextX;
float closestTextY;
void setup() {
size(500, 500);
//String url = "http://maps.google.com/staticmap?key=yourkey&size=640x400¢er=-25.274398,133.775136&zoom=3";
UK_Image = loadImage("ukmap1.png"); //(url, "png")
smooth();
locationTable = new Table("locationsexample.tsv");
rowCount = locationTable.getRowCount();
dataTable = new Table("randomexample.tsv");
nameTable = new Table("namesexample.tsv");
PFont font = loadFont("AVGmdBU-12.vlw");
textFont(font);
for (int row = 0; row < rowCount; row++) {
float value = dataTable.getFloat(row, 1); // column 1
if (value > dataMax) {
dataMax = value;
}
if (value < dataMin) {
dataMin = value;
}
}
buf = createGraphics(UK_Image.width, UK_Image.height, P3D);
buf.beginDraw();
buf.image(UK_Image, 0, 0);
buf.endDraw();
X = 0;
Y = 0;
W = width;
H = height;
}
void draw (){
background(0);
image(getBufSlice(), 0, 0);
closestDist = MAX_FLOAT;
for (int row = 0; row < rowCount; row++) {
String abbrev = dataTable.getRowName(row);
float x = locationTable.getFloat(abbrev, 1);
float y = locationTable.getFloat(abbrev, 2);
drawData(x, y, abbrev);
}
if (closestDist != MAX_FLOAT) {
fill(0);
textAlign(CENTER);
text(closestText, closestTextX, closestTextY);
}
}
void drawData(float x, float y, String abbrev) {
// get data value for state
float value = dataTable.getFloat(abbrev, 1);
float radius = 0;
if (value >= 0) {
radius = map(value, 0, dataMax, 1.5, 15);
fill(#FF4422); //was blue now red
} else {
radius = map(value, 0, dataMin, 1.5, 15);
fill(#FF4422); //red
}
ellipseMode(RADIUS);
ellipse(x, y, radius, radius);
float d = dist(x, y, mouseX, mouseY);
if ((d < radius + 2) && (d < closestDist)) {
closestDist = d;
String name = nameTable.getString(abbrev, 1);
closestText = name + " ";
closestTextX = x;
closestTextY = y-radius-4;
}
}
void keyPressed() {
switch(keyCode) {
case RIGHT:
if(X < buf.width - width) {
X+=5; // Number equals speed
}
break;
case LEFT:
if(X > 0) {
X-=5;
}
break;
case DOWN:
if(Y < buf.height - height) {
Y+=5;
}
break;
case UP:
if(Y > 0) {
Y-=5;
}
break;
}
}
Thank you.
1
