Encountering an issue where the P3D sketch does not function properly when running

Question

Encountering an issue where the P3D sketch does not function properly when running

Currently, I am in the process of converting a project I developed in Processing [Java Mode] to an online platform for web viewing. The project involves P3D rendering to showcase a 3D environment that allows for rotation and manipulation of three data sets (.tsv files) representing earthquake locations and sizes over three years. The code functions well in Java mode, but in JavaScript mode, it only displays a blank gray screen. I have ensured that the HTML for embedding the sketch in the canvas is correct and error-free, so I suspect an issue within the code that might not be compatible with JavaScript. Is it possible to run the PDE as Java without relying on Processing.js? Alternatively, can someone identify any compatibility issues with the Processing.js code?

For reference, here is the link to the non-functional sketch.

Any advice on how to proceed would be greatly appreciated. Thank you.

float dial = 0.0;
FloatTable data;
FloatTable data2;
float dataMin, dataMax;
int rowCount;
int currentColumn = 0;
int columnCount;

int yearMin, yearMax;
int[] years;

int yearInterval = 10;
int volumeInterval = 10;
int volumeIntervalMinor=5;

PImage bg;
PImage texmap;
PFont font;
PImage img, img2;
PImage imgTitle;

int sDetail = 35;  // Sphere detail setting
float rotationX = 0;
float rotationY = 0;
float velocityX = 0;
float velocityY = 0;
float globeRadius = 750;
float pushBack = 0;

float[] cx, cz, sphereX, sphereY, sphereZ;
float sinLUT[];
float cosLUT[];
float SINCOS_PRECISION = 0.5;
int SINCOS_LENGTH = int(360.0 / SINCOS_PRECISION);

void setup() {
size(1300,1000, P3D);  
textSize(100);
texmap = loadImage("img/world32k.jpg");   
initializeSphere(sDetail);
setupstuff("2011.tsv");
}

void draw() {    

background(0);    
// drawTitle(); 
drawMain();
renderGlobe(); 
drawDial();

}
void setupstuff(String filename){
data = new FloatTable(filename);
rowCount=data.getRowCount();
columnCount = data.getColumnCount();
years = int(data.getRowNames());
yearMin = years[0];
yearMax = years[years.length - 1];
font = loadFont("Univers-Bold-12.vlw");
dataMin = 0;
dataMax = ceil( data.getTableMax()/volumeInterval)*volumeInterval;
img = loadImage("img/dialface.jpg");
img2 = loadImage("img/dial.png");
imgTitle = loadImage("Title.png");
imageMode(CENTER);
} 

/* More lines of code copied from original text... */

java javascript webgl processing processing.js

Answer 1

Answer №1

LATEST UPDATE

The issue you are encountering with the Float error may be linked to this specific line:

return !Float.isNaN(data[row][col]);

It's important to note that JavaScript does not recognize Float as it is a Java concept not fully integrated in Processing. You will need to find an alternative for this comparison, such as referring to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

Similarly, statements like:

float m = Float.MAX_VALUE;

will not function correctly with ProcessingJS. Consider using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

Debugging in ProcessingJS can be quite challenging, so ensure you avoid strictly Java elements not fully implemented in Processing. Also, be wary of variable naming conflicts. Refer to the following link to understand potential pitfalls:

Additionally, there is a method missing a closing brace:

float getTableMin() {
    float m = Float.MAX_VALUE;
    for (int row = 0; row < rowCount; row++) {
      for (int col = 0; col < columnCount; col++) {
        if (isValid(row, col)) {
          if (data[row][col] < m) {
            m = data[row][col];
          }
        }
      }
    }
    return m;

Ensure to add the closing brace like so:

float getTableMin() {
    float m = Float.MAX_VALUE;
    for (int row = 0; row < rowCount; row++) {
      for (int col = 0; col < columnCount; col++) {
        if (isValid(row, col)) {
          if (data[row][col] < m) {
            m = data[row][col];
          }
        }
      }
    }
    return m;
}

Properly formatted code is crucial. Use Ctrl-t in your Processing IDE to automatically tidy up your code for better readability.

Furthermore, your code wouldn't even execute in Java mode without this correction. It would trigger an unexpected token: float error for the concerned method.

ADDITIONAL UPDATE

To eliminate the Float related issues, adjust the following line:

return !Float.isNaN(data[row][col]);

to

return isNaN(data[row][col]);

Substitute all occurrences of Float.MAX_VALUE; with Number.MAX_VALUE;.

After switching to JavaScript-friendly code, I encountered the error you're facing as well. I will attempt to troubleshoot and update the solution accordingly.

Answer 2

LATEST UPDATE

The issue you are encountering with the Float error may be linked to this specific line:

return !Float.isNaN(data[row][col]);

It's important to note that JavaScript does not recognize Float as it is a Java concept not fully integrated in Processing. You will need to find an alternative for this comparison, such as referring to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

Similarly, statements like:

float m = Float.MAX_VALUE;

will not function correctly with ProcessingJS. Consider using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

Debugging in ProcessingJS can be quite challenging, so ensure you avoid strictly Java elements not fully implemented in Processing. Also, be wary of variable naming conflicts. Refer to the following link to understand potential pitfalls:

Additionally, there is a method missing a closing brace:

float getTableMin() {
    float m = Float.MAX_VALUE;
    for (int row = 0; row < rowCount; row++) {
      for (int col = 0; col < columnCount; col++) {
        if (isValid(row, col)) {
          if (data[row][col] < m) {
            m = data[row][col];
          }
        }
      }
    }
    return m;

Ensure to add the closing brace like so:

float getTableMin() {
    float m = Float.MAX_VALUE;
    for (int row = 0; row < rowCount; row++) {
      for (int col = 0; col < columnCount; col++) {
        if (isValid(row, col)) {
          if (data[row][col] < m) {
            m = data[row][col];
          }
        }
      }
    }
    return m;
}

Properly formatted code is crucial. Use Ctrl-t in your Processing IDE to automatically tidy up your code for better readability.

Furthermore, your code wouldn't even execute in Java mode without this correction. It would trigger an unexpected token: float error for the concerned method.

ADDITIONAL UPDATE

To eliminate the Float related issues, adjust the following line:

return !Float.isNaN(data[row][col]);

to

return isNaN(data[row][col]);

Substitute all occurrences of Float.MAX_VALUE; with Number.MAX_VALUE;.

After switching to JavaScript-friendly code, I encountered the error you're facing as well. I will attempt to troubleshoot and update the solution accordingly.

Answer 3

Answer №2

Instead of using the fullscreen() function, consider using the following code snippet:


size(window.innerWidth, window.innerHeight, P3D);

IMPORTANT: This code snippet may not work in Internet Explorer.

void setup() {
    if (window.innerWidth) {
        wW = window.innerWidth;
        wH = window.innerHeight;
    } else {
        var cW = document.body.offsetWidth;
        var cH = document.body.offsetHeight;
        window.resizeTo(500,500);
        var barsW = 500 - document.body.offsetWidth;
        var barsH = 500 - document.body.offsetHeight;
        wW = barsW + cW;
        wH = barsH + cH;
        window.resizeTo(wW,wH);
    }
    size(wW,wH,P3D);
}

Answer 4

Instead of using the fullscreen() function, consider using the following code snippet:


size(window.innerWidth, window.innerHeight, P3D);

IMPORTANT: This code snippet may not work in Internet Explorer.

void setup() {
    if (window.innerWidth) {
        wW = window.innerWidth;
        wH = window.innerHeight;
    } else {
        var cW = document.body.offsetWidth;
        var cH = document.body.offsetHeight;
        window.resizeTo(500,500);
        var barsW = 500 - document.body.offsetWidth;
        var barsH = 500 - document.body.offsetHeight;
        wW = barsW + cW;
        wH = barsH + cH;
        window.resizeTo(wW,wH);
    }
    size(wW,wH,P3D);
}

Encountering an issue where the P3D sketch does not function properly when running

Answer №1

Answer №2

Similar questions

Utilize the data storage API within Next.js or directly in the user's

JavaScript - Executing the change event multiple times

Retrieve the service variable in the routing file

Having trouble with Spring Boot 3 Security's requestMatchers.permitAll?

Increasing the Efficiency of Styled Components

Components for managing Create, Read, Update, and Delete operations

Creating a GITHUB project with Maven

What is the proper method for deserializing .NET Dictionary objects with Jackson?

What steps should I take to create a collapsible Bootstrap navbar?

I'm having difficulty mocking a function within the Jest NodeJS module

UI is experiencing lag issues post Alert invocation in React Native

Issue: The component factory for GoogleCardLayout2 cannot be located

Ensure that the control button is pressed during the JavaScript onclick event function

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

What is the process of choosing a language (English/French) within a pop-up?

Trouble arises when trying to import Jest with Typescript due to SyntaxError: Import statement cannot be used outside a module

Sending server components to client components as properties

The retrieval of JSON data in a JavaScript function is malfunctioning

Using Javascript to define cookie values

Using Angular's ng-repeat prefilter with JavaScript