Transparent ellipses, PImage vs PGraphics
in
Programming Questions
•
1 year ago
Hi
I am trying to visualize GPS data on top of a map and I am having a hard time creating transparent images to use as layers.
DotLayer is not a PApplet but gets PApplet passed in constructor. To set things up I read GPS values from a csv file
In my first attempt I draw directly on the PImage. Then I tint(gray, alpha) the PImage which gives me ability to fade the dots in and out.
I am trying to visualize GPS data on top of a map and I am having a hard time creating transparent images to use as layers.
DotLayer is not a PApplet but gets PApplet passed in constructor. To set things up I read GPS values from a csv file
- public class DotLayer {
PApplet parent;
PGraphics pg;
PImage im;
CSVReader csvreader;
int layerWidth;
int layerHeight;
float xy[][];
DotLayer(PApplet parent, int layerWidth, int layerHeight) {
this.parent = parent;
this.layerWidth = layerWidth;
this.layerHeight = layerHeight;
pg = parent.createGraphics(layerWidth, layerHeight, PConstants.JAVA2D);
}
public void loadCSV(String csvfile) {
csvreader = new CSVReader(this.parent, csvfile); //CSVReader is Table class http://benfry.com/writing/archives/3
createPoints();
}
private void createPoints()
{
im = parent.createImage(layerWidth, layerHeight, PConstants.ARGB);
xy = new float[csvreader.getRowCount()-1][];
for(int i=1;i<csvreader.getRowCount();i++){
//Get long and lat and convert to floats.
float lon = Float.parseFloat(csvreader.data[i][1])*0.000001f; //Parse and shift string
float lat = Float.parseFloat(csvreader.data[i][2])*0.000001f;
//Convert to screen coords
xy[i-1] = map.getScreenPositionFromLocation(new Location(lat, lon)); //Unfoldingmaps
}
drawDots();
}
In my first attempt I draw directly on the PImage. Then I tint(gray, alpha) the PImage which gives me ability to fade the dots in and out.
- // public void drawDots()
// {
// //Add dots to image
//
// for(int i=1;i<csvreader.getRowCount();i++){
// im.set((int)xy[i-1][0], (int)xy[i-1][1], ((PApplet)parent).color(r,g,b)); //Only a small pixel dot.
// }
// }
//
// public void draw() {
// pg.background(255,0);
//
// pg.beginDraw();
// pg.tint(255,a); //Working fine
// pg.image(im,0,0);
// pg.endDraw();
// parent.image(pg,0,0); //Give pg to parent
// }
However I want to be able to draw ellipses instead of just pixels so I made a new version where I draw to pg.ellipses
- public void drawDots()
{
int a = 255;
int r = 256;
int g = 0;
int b = 0;
pg.background(255,0);
pg.beginDraw();
pg.pushMatrix();
pg.fill(((PApplet)parent).color(r,g,b));
for(int i=1;i<csvreader.getRowCount();i++){
pg.ellipse((int)xy[i-1][0], (int)xy[i-1][1], 10,10);
}- pg.tint(255,a); //Not working
pg.popMatrix();
pg.endDraw();
}
public void draw() {
parent.image(pg,0,0); //Give pg to parent
}
Now I get nice ellipses but tint(gray,alpha) does not work anymore. It seems like it only affects PImages with ARGB format.
So my questions are
Martin
So my questions are
- Is there anyway for me to merge the two above? I have tried for a few days now but I can't get it right. Goal is to have a dot layer with transparency
- I am wasting time mocking around with JAVA2D and P2/3D in terms of transparency and layers. They support different sets functionality and also are pretty bad in terms of performance. What approach would you recommend for a layered application where each layer should be able to be blended in and out and hold either PNG images or arbitrary graphics like dots?
- I would rather use OpenGL for my layers. Though I do read some GL I am not yet fluent. Doea anyone know of any OpenGL example that handles transparency, images and graphics like ellipses, lines, text which I can use for reference?
Martin
1