How can I run external libraries with my processing.js file?

jyerbury

Hi,

I may be wording this wrong, but I am trying to run this code online, I am using an index.html file connecting the java and javascript libraries that are needed for the processing code to work. But I can tell I am missing a major step here, and I just don't know what it is, I don't know what to look for...

Here is the processing code, followed by the html code :

import gab.opencv.*;

import processing.video.*;

//import gab.opencv.*;

import processing.opengl.*;
// - Super Fast Blur v1.1 by Mario Klingemann <http://incubator.quasimondo.com>;
// - BlobDetection library

OpenCV opencv;
import processing.video.*;
import blobDetection.*;
color black = color(255);
Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;
PImage buffer;

boolean lockAnyCopying=false;
void setup() {
frameRate(30);
  //buffer = createGraphics(320, 240, JAVA2D);
  //size(640, 480);
  fullScreen();
    String[] cameras = Capture.list();
 if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }}
    cam = new Capture(this, cameras[1]);
  //cam = new Capture(this, width/2, height/2, 15);
  cam.start();
  //cam = new Capture(this, 40*4, 30*4, 15);
  // BlobDetection
  // img which will be sent to detection (a smaller copy of the cam frame);
  noCursor();
  img = new PImage(80, 60);
  theBlobDetection = new BlobDetection(img.width, img.height);
    image(img, width, height);
  theBlobDetection.setPosDiscrimination(true);
  theBlobDetection.setThreshold(.45f); // will detect bright areas whose luminosity > 0.2f;
}

// ==================================================
// captureEvent()
// ==================================================
//void captureEvent(Capture cam)
//{
//  cam.read();
//  newFrame = true;
//}

// ==================================================
// draw()
// ==================================================

void draw() {
  //frameRate(10);
  if (newFrame) {
    {
      //background(50);
      newFrame=false;
      //image(cam,0,0,width,height);
        translate(width, 0); // move to far corner
    scale(-1.0, 1.0);    // flip x-axis backwards
    image(cam, 0, 0, width, height);

      //img.copy(cam, 0, 0, cam.width, cam.height,
      //  0, 0, img.width, img.height);

 img=cam.get();
    img.resize(80, 60);
   if(frameCount % 1000 >= 750){
      loadPixels();
      for (int i = 0; i < pixels.length; i++ ) { // get the length of the pixels array just like with any array.
        float rand = random(230);
        //color c = color(rand,rand,10,20); //- YELLOW
        //color c = color(10,10,10,20);// - GREY
         //color c = color(rand,10,10,20); //- RED
        //color c = color(12,20,rand,20); //- BLUE
           //color c = color(12,rand, 20,20); //- GREEN
        color c = color( rand, 12,200, 20); //- PINK
        pixels[i] = c; // access individual elements of the pixels array via an index, just like with any other array.
    }

      updatePixels();
}

else  if (frameCount % 1000 >= 500)  {  loadPixels();
      for (int i = 0; i < pixels.length; i++ ) { // get the length of the pixels array just like with any array.
        float rand = random(230);
        color c = color(rand,rand,10,20); //- YELLOW
        //color c = color(10,10,10,20);// - GREY
         //color c = color(rand,10,10,20); //- RED
        //color c = color(12,20,rand,20); //- BLUE
           //color c = color(12,rand, 20,20); //- GREEN
        //color c = color( rand, 12,200, 20); //- PINK
        pixels[i] = c; // access individual elements of the pixels array via an index, just like with any other array.
    }

      updatePixels();}

else  if (frameCount % 1000 >= 250)  {  loadPixels();
      for (int i = 0; i < pixels.length; i++ ) { // get the length of the pixels array just like with any array.
        float rand = random(230);
        //color c = color(rand,rand,10,20); //- YELLOW
        //color c = color(10,10,10,20);// - GREY
         color c = color(rand,10,10,20); //- RED
        //color c = color(12,20,rand,20); //- BLUE
           //color c = color(12,rand, 20,20); //- GREEN
        //color c = color( rand, 12,200, 20); //- PINK
        pixels[i] = c; // access individual elements of the pixels array via an index, just like with any other array.
    }

      updatePixels();}


else    {  loadPixels();
      for (int i = 0; i < pixels.length; i++ ) { // get the length of the pixels array just like with any array.
        float rand = random(230);
        //color c = color(rand,rand,10,20); //- YELLOW
        //color c = color(10,10,10,20);// - GREY
         //color c = color(rand,10,10,20); //- RED
        //color c = color(12,20,rand,20); //- BLUE
           color c = color(12,rand, 20,20); //- GREEN
        //color c = color( rand, 12,200, 20); //- PINK
        pixels[i] = c; // access individual elements of the pixels array via an index, just like with any other array.
    }

      updatePixels();}


//int time = frameCount % 12;

      fastblur(img, 2);
      theBlobDetection.computeBlobs(img.pixels);
      drawBlobsAndEdges(false, true);

      loadPixels();
      color R =  color (255);
      for (int x= 0; x < width; x++) {
        int check = 0;
        for (int y = 0; y < height; y++) {
          if  (pixels[x+y*width] == R) {
            pixels[x+y*width] = R;
          } else if (x == R) {
            //pixels[x+y*width] =
          }
        }
      }
      updatePixels();
    }
  }
}
void captureEvent(Capture cam)
{

  if (!lockAnyCopying) {
    cam.read();
    newFrame = true;
  } else
    println("Coying at frame "+frameCount+" was blocked");
}


PImage invertNow(final PImage c1) {

  lockAnyCopying=true;

  //c1.resize(width, height);
  PImage c2=createImage(c1.width, c1.height, RGB);
  c1.loadPixels();
  c2.loadPixels();

  for (int i=0; i<c1.width; i++)
    for (int j=0; j<c1.height; j++) {
      int loc=i+j*c1.width;  //Current pixel location
      int iloc=(c1.width-i-1)+j*c1.width;  //Pixel counting from opposite edge
      c2.pixels[loc]=c1.pixels[iloc];  //Invert pixel positions
    }

  c2.updatePixels();

  lockAnyCopying=false;

  return c2;
}

// ==================================================
// drawBlobsAndEdges()
// ==================================================
void drawBlobsAndEdges(boolean drawBlobs, boolean drawEdges)
{
  Blob b;
  EdgeVertex eA, eB;

  for (int n=0; n<theBlobDetection.getBlobNb(); n++)
  {
    b=theBlobDetection.getBlob(n);

    if (b!=null)
    {
      // Edges

      if (drawEdges)
      {
        // inner lines
        //noStroke();
        strokeWeight(1);
        smooth();
        strokeCap(ROUND);
        beginShape();
        fill(12,20, 20,180);
        for (int m=0; m<b.getEdgeNb(); m++)
        {
          eA = b.getEdgeVertexA(m);
          eB = b.getEdgeVertexB(m);
          if (eA !=null && eB !=null) {
            vertex(eA.x*width, eA.y*height);
            vertex(eB.x*width, eB.y*height);
          }
          //strokeWeight(1);
          //strokeCap(ROUND);
          //stroke(255);
          //line(eA.x*width, eB.y*height+10, eA.x*width, eB.y*height - -height);
        }
        endShape(CLOSE);
      }
    }



    //stroke (255);
    //strokeWeight(4);
    //stroke(ROUND);
    //smooth();
    //line(eA.x*width, eA.y*height,
    //  eB.x*width, eB.y*height
    //  );
    //loadPixels();
    //color R =  color (255,0,0);
    //for (int x= 0; x < width; x++){
    //  for (int y = 0; y < height; y++){
    //   if  (pixels[x+y*width] == R) {
    //   pixels[x+y*width] = R;
    //   } else if(x == R){
    //     //pixels[x+y*width] =

    //   }
    //  }
    //updatePixels();



    // Blobs
    if (drawBlobs)
    {
      strokeWeight(0);
      stroke(255);
      rect(
        b.xMin*width, b.yMin*height,
        b.w*width, b.h*height
        );
    }
  }
}



// ==================================================
// Super Fast Blur v1.1
// by Mario Klingemann
// <http://incubator.quasimondo.com>;
// ==================================================
void fastblur(PImage img, int radius)
{
  if (radius<1) {
    return;
  }
  int w=img.width;
  int h=img.height;
  int wm=w-1;
  int hm=h-1;
  int wh=w*h;
  int div=radius+radius+1;
  int r[]=new int[wh];
  int g[]=new int[wh];
  int b[]=new int[wh];
  int rsum, gsum, bsum, x, y, i, p, p1, p2, yp, yi, yw;
  int vmin[] = new int[max(w, h)];
  int vmax[] = new int[max(w, h)];
  int[] pix=img.pixels;
  int dv[]=new int[256*div];
  for (i=0; i<256*div; i++) {
    dv[i]=(i/div);
  }

  yw=yi=0;

  for (y=0; y<h; y++) {
    rsum=gsum=bsum=0;
    for (i=-radius; i<=radius; i++) {
      p=pix[yi+min(wm, max(i, 0))];
      rsum+=(p & 0xff0000)>>16;
      gsum+=(p & 0x00ff00)>>8;
      bsum+= p & 0x0000ff;
    }
    for (x=0; x<w; x++) {

      r[yi]=dv[rsum];
      g[yi]=dv[gsum];
      b[yi]=dv[bsum];

      if (y==0) {
        vmin[x]=min(x+radius+1, wm);
        vmax[x]=max(x-radius, 0);
      }
      p1=pix[yw+vmin[x]];
      p2=pix[yw+vmax[x]];

      rsum+=((p1 & 0xff0000)-(p2 & 0xff0000))>>16;
      gsum+=((p1 & 0x00ff00)-(p2 & 0x00ff00))>>8;
      bsum+= (p1 & 0x0000ff)-(p2 & 0x0000ff);
      yi++;
    }
    yw+=w;
  }

  for (x=0; x<w; x++) {
    rsum=gsum=bsum=0;
    yp=-radius*w;
    for (i=-radius; i<=radius; i++) {
      yi=max(0, yp)+x;
      rsum+=r[yi];
      gsum+=g[yi];
      bsum+=b[yi];
      yp+=w;
    }
    yi=x;
    for (y=0; y<h; y++) {
      pix[yi]=0xff000000 | (dv[rsum]<<16) | (dv[gsum]<<8) | dv[bsum];
      if (x==0) {
        vmin[y]=min(y+radius+1, hm)*w;
        vmax[y]=max(y-radius, 0)*w;
      }
      p1=x+vmin[y];
      p2=x+vmax[y];

      rsum+=r[p1]-r[p2];
      gsum+=g[p1]-g[p2];
      bsum+=b[p1]-b[p2];

      yi+=w;
    }
  }
}

html code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>GlitchSilhouette</title>

    <script src="libraries/blobDetection.jar" type="text/jar"></script>

    <script src="libraries/blobDetection.java" type="text/jar"></script>
    <script src="libraries/Blob.java" type="text/jar"></script>
    <script src="libraries/EdgeDetection.java" type="text/jar"></script>
    <script src="libraries/EdgeVertex.java" type="text/jar"></script>
    <script src="libraries/Metaballs2D.java" type="text/jar"></script>
    <script src="libraries/MetaballsTable.java" type="text/jar"></script>

<script src="libraries/processing-video-master" type="text/javascript"></script>
    <script src="sketch.js" type="text/javascript"></script>


    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

many thanks to anyone who can help guide me in the right direction!!

kfrajer

Unfortunately As far as I know, p.js doesn't allow to use external libraries. Other forum goers can confirm this. In your case, the typical recommendation is to migrate to p5.js, meaning you will need to code in js.

Kf

jyerbury

thanks for your response @kfrajer ! Do you know of a program that automatically transpiles processing to js? Otherwise I will just do it manually...the only problem is I don't think all the functions in processing are possible in js, so my code just may not be possible to migrate.

KevinWorkman

Processing.js cannot use Java libraries. You'll have to find the equivalent JavaScript library, or not deploy as HTML and JavaScript.

Honestly, I'd recommend dropping the idea of using Processing.js in this case. I wrote more about why here, but basically: you should only use Processing.js if you have some existing Processing code that does not use any Java libraries. That's not what you have, so you shouldn't use Processing.js.

Instead, I'd recommend either deploying as a Java application, or starting over with P5.js and doing the whole thing in JavaScript.

Do you know of a program that automatically transpiles processing to js?

This is exactly what Processing.js does. This won't help you though, because the real problem is the Java libraries you're using. These cannot be magically converted to JavaScript.

jyerbury

@KevinWorkman thank you. That clarifies things a lot.