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

Processing Coding Questions
1

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
twittervisualization1000×627 143 KB

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

}

2

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