# How do you create 3D bars to be display on a 2D image?

Hi there.
I would like to know how you can display 3D bars on a image using processing 3.

For example, i have a 2D map and on that map i want to display the coordinates using the latitude and longitude of a certain city that reads from my csv file and then outputs the that data on the map with a 3D bar?

How could this be done.?

Hello,

Absolutely it can be done!

I am assuming you already have the map.

This is a simple example to show bars (3D) on a rectangle (2D):

``````void setup()
{
size(640, 360, P3D);
noLoop();
}

void draw()
{
background(0);
lights();
translate(width/2, height/2);
rotateX(TAU/6);

rectMode(CENTER);
fill(255, 255, 0);
rect(0, 0, 300, 200);

noStroke();
for(int i= 0; i<=20; i++)
{
fill(255, 0, 0);
pushMatrix();
float boxHeight = random(0, 100);
translate(random(-150+5, 150-5), random(-100+5, 100-5), boxHeight/2);
box(10, 10, boxHeight);
popMatrix();
}
}
``````

`:)`

1 Like

Hi! Thankyou for your reply! Can you briefly explain how this code works because i canâ€™t seem to find where it reads the longitude and latitude from the file.

It is generating random data.
There are formulas out there to convert LAT, LONG to x, y; I did this recently in a related post (I did not share the code) and it is achievable.

`:)`

Ok. Could you at least tell me how you rotated the rectangle to have it to show side ways like that? Or guide me to the right place where i can look into it.

Thanks!

Hello,

You can look up all the references here:
https://processing.org/

And also find tutorials on 2D and 3D transformations at the same site.

Go through example line by line.
You can also right click on highlighted\colored text and â€śFind in referenceâ€ť.

`:)`

Thatâ€™s translate and rotateX at start of draw ()