How to get processing java sketch onto a webpage?

Processing Libraries
1

Hi everyone, I don’t know if this is possible but does anyone know how to transfer a processing sketch coded with java to your website domain? I have a website on Wix I’d like to display the sketch on.

This is my code if it helps, Any help would be greatly appreciated, thankyou!

timport processing.net.*;

import processing.serial.*;

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

import processing.serial.*;
import geomerative.*;


Minim minim;
AudioPlayer player;
AudioInput input;


RShape grp;
RPoint[][] pointPaths;

float z = 10;

String inString;  // Input string from serial port
String val;      // Data received from the serial port
int lf = 10;
Serial myPort;

int sensitivity=250;

boolean ignoringStyles = false;

void setup() 
{   

  
    //fullScreen();
    print(Serial.list());
    size(600, 600, P3D);

      minim = new Minim(this);
      player = minim.loadFile("WIND ONE.mp3");
      input = minim.getLineIn();
        player.play();
    // I know that the first port in the serial list on my mac
    // is always my  FTDI adaptor, so I open Serial.list()[0].
    // On Windows machines, this generally opens COM1.
    // Open whatever port is the one you're using.
    String portName = Serial.list()[1];
    myPort = new Serial(this, portName, 9600);
    myPort.bufferUntil(lf);
    
      RG.init(this);
      RG.ignoreStyles(ignoringStyles);
  
      RG.setPolygonizer(RG.ADAPTATIVE);
    
    grp = RG.loadShape("curves.svg");
    grp.centerIn(g, 100, 1, 1);
   
    
    pointPaths = grp.getPointsInPaths();
  
}

void draw()
{
  
  print(inString);
      background(0);
      loadShape("curves.svg").disableStyle();  // Ignore the colors in the SVG
  fill(39, 149, 32);    // Set the SVG fill to blue
  stroke(238, 242, 237);          // Set the SVG fill to white
 
      
      
      
      
    for(int i = 0; i < player.bufferSize() - 1; i++)
    {
      inString=str(sensitivity*(player.left.get(i)));
    }
      float Random_var=(float(inString)/400)*50;
      translate(300,300,z);
      for(int i = 0; i<pointPaths.length; i++){
    
    translate((random((Random_var))),(random((Random_var))),z);

    if (pointPaths[i] != null) {
      beginShape();
       for(int j = 0; j<pointPaths[i].length; j++){
        vertex(pointPaths[i][j].x, pointPaths[i][j].y);
      }
      endShape();
    }
  }
      
    
  }
  
  void serialEvent(Serial p) { 
  inString = p.readString(); 
}ype or paste code here
1 Like
2

You need to rewrite your code from java to java script. It means you need to use p5.js for this transition. However, there is a bit of work to do as you will need to become familiar with p5.sound as you need to use this library instead of minim. The transition is not difficult. However, if you haven’t done js before, it will take you some time to become familiar with it. An overview of the differences between Processing(java) and p5.js can be found here

Kf

3 Likes
3

Thankyou thats exactly what I was looking for

4

Short answer: you can’t.

Deploying to a webpage using Processing.js will work for simple sketches that don’t contain any Java-specific code, and don’t contain any Processing 3 code. This is because your Processing code is converted to JavaScript, but that conversion can’t be done on arbitrary Java code. This also means you can’t use Java libraries like Minim. And Processing.js has not been updated in several years, so you also can’t use newer Processing 3 features.

So at this point you have a few options:

  • You can eliminate the libraries altogether.
  • You can find JavaScript versions of the libraries to use instead. Google “Processing.js minim” for a ton of results.
  • You can deploy as a Java application instead of embedding in a website.
  • You can rewrite the whole thing in P5.js.

Shameless self-promotion: here is a tutorial on using Processing.js:

And here is a tutorial on various version of Processing:

3 Likes
5

Actually Pjs is pretty much stuck on Processing v1.5.1. :cold_face:
Therefore, even Processing 2’s new features are already incompatible w/ Pjs! :no_entry_sign:
Although a very few of them had landed on Pjs, like the constant TAU! :laughing:
BtW, compared to the transition of P1 to P2, P2 to P3 hadn’t brought much to Processing’s API. :roll_eyes:

ProcessingJS.org/reference/

1 Like