# Trying to convert 2D flat image to 3D plane via rotateX

**URL:** <https://discourse.processing.org/t/trying-to-convert-2d-flat-image-to-3d-plane-via-rotatex/16719>\
**Category:** Coding Questions\
**Created:** [December 29, 2019, 11:05pm UTC](https://discourse.processing.org/t/trying-to-convert-2d-flat-image-to-3d-plane-via-rotatex/16719 "2019-12-29T23:05:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnfischbeck](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@johnfischbeck](https://discourse.processing.org/u/johnfischbeck)\
**Post date:** [December 29, 2019, 11:05pm UTC](https://discourse.processing.org/t/trying-to-convert-2d-flat-image-to-3d-plane-via-rotatex/16719/1 "2019-12-29T23:05:01Z")

</div>

I’m trying to convert an equirectangular svg image with plotted lines that are bezier curves and text to a 3D plane so the arch lines rise up and I can move in and around once all is plotted.

Trying to achieve an effect like below:

 ![twittervisualization](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d12cd13f1dbe456fac00af216eedd4f0bdc284d3.jpeg)

// LIBRARIES  
import processing.pdf.\*;

// GLOBAL VARIABLES  
PShape baseMap;  
String csv[];  
String myData[][];  
PFont f;  
Integer i;  
Integer g;

String csv1[];  
String myData1[][];  
String a;

//int[] coords = {  
// 40, 40, 100, 40  
//};

// SETUP  
void setup() {  
size(10000, 5000);  
noLoop();

f = createFont(“Rokkitt-Light.ttf”, 1);  
baseMap = loadShape(“WorldMap.svg”);

//LOAD LINES WITH ARCHES  
csv = loadStrings(“FBMMapDatav5.csv”);  
myData = new String[csv.length][12];  
for(int i=0; i\<csv.length; i++) {  
myData[i] = csv[i].split(",");  
}

//LOAD CUSTOMERS DATA  
csv1 = loadStrings(“AlteryxProc-v3.csv”);  
myData1 = new String[csv1.length][4];  
for(int g=0; g\<csv1.length; g++) {  
myData1[g] = csv1[g].split(",");  
}  
}

// DRAW  
void draw() {  
beginRecord(PDF, “FBM-Output3.pdf”);  
shape(baseMap, 0, 0, width, height);  
noStroke();

//DRAW LINES  
for(int i=0; i\<myData.length; i++){  
fill(255, 0, 0, 10);  
textMode(SHAPE);  
noStroke();  
float graphLong = map(float(myData[i][5]), -180, 180, 0, width);  
float graphLat = map(float(myData[i][4]), 90, -90, 0, height);  
float markerSize = .5;  
ellipse(graphLong, graphLat, markerSize, markerSize);

```
fill(28, 63, 128, 100);  

float fgraphLong = map(float(myData[i][2]), -180, 180, 0, width);
float fgraphLat = map(float(myData[i][1]), 90, -90, 0, height);
float fmarkerSize = .5;
ellipse(fgraphLong, fgraphLat, fmarkerSize, fmarkerSize);

```

//line section

```
float lat1 = fgraphLat;
float lon1 = fgraphLong;
float lat2 = graphLat;
float lon2 = graphLong;

noFill();
stroke(66, 129, 245, 90);
strokeWeight(.2);       

beginShape();
curveVertex(lon1, lat1*(float(myData[i][10]))); // the first control point
curveVertex(lon1, lat1); // is also the start point of curve
curveVertex(lon2, lat2); // the last point of curve
curveVertex(lon2, lat2*(float(myData[i][10]))); // is also the last control point
endShape();
}

```

//end line

//LOAD CUSTOMERS TO DRAW  
for(int g=0; g\<myData1.length; g++){  
fill(0, 0, 0, 70);  
textFont(f);  
a = myData1[g][4];  
float ggraphLong = map(float(myData1[g][1]), -180, 180, 0, width);  
float ggraphLat = map(float(myData1[g][0]), 90, -90, 0, height);

```
//SET ALIGNMENT BASED ON DIRECTION OF THE LINE RELATIVE TO THE BRANCH STARTING LAT LON

if (a.equals("R")) {
    text(myData1[g][3], ggraphLong, ggraphLat);
    textAlign(RIGHT);

    stroke(0);
  }
  else {
    text(myData1[g][3], ggraphLong, ggraphLat);
    textAlign(LEFT);

    stroke(0);           
  }
  

  
  }

  //line(graphLong+markerSize/2, graphLat, graphLong+markerSize, graphLat);
println("AlmostDone");

endRecord();

```

println(“PDF Saved!”);  
exit();

}

---

<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:** [December 30, 2019, 12:38pm UTC](https://discourse.processing.org/t/trying-to-convert-2d-flat-image-to-3d-plane-via-rotatex/16719/2 "2019-12-30T12:38:24Z")

</div>

Unfortunately we can’t run your code (because we don’t have the files)

please consider to upload the project to github

**Then**

- change size to size(800,800,P3D);

- remove the PDF recording

Chrisir