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

Processing Coding Questions
1

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

2

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

image

:)

1 Like
3

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.

4

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:

Loading image:

5

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!

6

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

:)

7

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