Execute [js] in order to see a program made with Processing.

Hi,

I made a 3D graphic that i would like to see in max msp.

Chat Gpt says to put the program below in [js] but it doesn't work.

Can anyone tell me the good process?

Here what chat gpt says:

"This code still uses the Processing programming language, so you need to run it in a [js] (Javascript) object in Max MSP. Simply copy the code below and paste it into a [js] object in Max MSP, then activate it to display the graph. Note that you may need to adjust some parameters according to your needs and the configuration of your Max MSP environment.

import peasy.*;

float cubeSize = 100; // Cube size
float domeRadius = cubeSize / 2; // Radius of the dome (adjusted to match the cube radius)
float domeThickness = 0.05 * domeRadius; // Thickness of the dome (5% of the radius)
int numSegments = 30; // Number of segments to draw the dome
int numSegmentsVertical = 10; // Number of vertical segments for the half-sphere
int numScreens = 12; // Number of screens
float screenGap = 10; // Space between screens
float curveAmount = 50; // Vault curvature

PeasyCam cam; // PeasyCam object declaration

void setup() {
  size(800, 600, P3D);
  cam = new PeasyCam(this, 500); // Initialize PeasyCam with a default distance
}

void draw() {
  background(255);
  
  // Draw the cube
  stroke(0);
  noFill();
  pushMatrix();
  translate(0, 0, -cubeSize*PI/2); // Center the cube
  box(cubeSize);
  popMatrix();
  
  // Draw the dome (half-sphere)
  drawDome();
  
  // Place the screens on the dome
  for (int i = 0; i < numScreens; i++) {
    float theta = map(i, 0, numScreens-1, 0, TWO_PI); // Angle according to the number of screens
    float x = cos(theta) * domeRadius;
    float y = sin(theta) * domeRadius;
    float z = curveAmount * cos(PI/2 * x / domeRadius); // Vault curvature
    drawScreen(x, y, z);
  }
}

void drawDome() {
  rotateX(PI);
  for (int j = 0; j <= numSegmentsVertical / 2; j++) { // Draw only half of the dome
    beginShape(QUAD_STRIP);
    for (int i = 0; i <= numSegments; i++) {
      float theta = map(i, 0, numSegments, 0, TWO_PI);
      float phi = map(j, 0, numSegmentsVertical / 2, -HALF_PI, 0);
      
      // Calculate coordinates for the dome interior (half-sphere)
      float innerX = (domeRadius - domeThickness) * cos(phi) * cos(theta);
      float innerY = (domeRadius - domeThickness) * cos(phi) * sin(theta);
      float innerZ = (domeRadius - domeThickness) * sin(phi+PI/2) + cubeSize/2; // Dome center aligned with cube center
      
      // Calculate coordinates for the dome exterior (half-sphere)
      float outerX = domeRadius * cos(phi) * cos(theta);
      float outerY = domeRadius * cos(phi) * sin(theta);
      float outerZ = domeRadius * sin(phi+PI/2) + cubeSize/2; // Dome center aligned with cube center
      
      // Draw dome sides
      vertex(innerX, innerY, innerZ);
      vertex(outerX, outerY, outerZ);
    }
    endShape();
  }
  rotateX(-PI);
}

void drawScreen(float x, float y, float z) {
  pushMatrix();
  translate(x, y, z);
  fill(100);
  box(20, 10, 1); // Screen size
  popMatrix();
}

Feel free to use this code in your Max MSP environment. Let me know if you need any further assistance!

Here the graphic made with Processing 4. You can see this when you change the perspective by moving the mouse with the mouse pressed.