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

**URL:** <https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631>\
**Category:** Coding Questions\
**Created:** [April 10, 2020, 2:05pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631 "2020-04-10T14:05:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 10, 2020, 2:05pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/1 "2020-04-10T14:05:02Z")

</div>

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.?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 10, 2020, 2:33pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/2 "2020-04-10T14:33:48Z")

</div>

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):

```auto
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();
    }
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/16faf051e0ab7ebac5ec818712351457ebacdb48.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 10, 2020, 2:37pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/3 "2020-04-10T14:37:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 10, 2020, 2:48pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/4 "2020-04-10T14:48:05Z")

</div>

> [@Stage1](#):
>
> 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.

`:)`

Reading data:

> **[loadTable() / Reference](https://processing.org/reference/loadTable_.html)**
>
> Reads the contents of a file or URL and creates a Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a …

Loading image:

> **[loadImage() / Reference](https://processing.org/reference/loadImage_.html)**
>
> Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, images must be located in the …

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 10, 2020, 2:52pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/5 "2020-04-10T14:52:59Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 10, 2020, 2:57pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/6 "2020-04-10T14:57:23Z")

</div>

Hello,

You can look up all the references here:  
[https://processing.org/](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”.

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 10, 2020, 3:09pm UTC](https://discourse.processing.org/t/how-do-you-create-3d-bars-to-be-display-on-a-2d-image/19631/7 "2020-04-10T15:09:48Z")

</div>

> [@Stage1](#):
>
> how you rotated the rectangle to have it to show side ways like that?

That’s translate and rotateX at start of draw ()