Error in JavaScript Mode - Saving Images

atomant

I am getting the following error when I try to run my script. It works fine in Java mode.

Exception in thread "AWT-EventQueue-0" java.lang.NoSuchMethodError: processing.app.Base.showWarning(Ljava/lang/String;Ljava/lang/String;Ljava/lang/Exception;)V at de.bezier.mode.javascript.JavaScriptBuild.build(Unknown Source) at de.bezier.mode.javascript.JavaScriptBuild.export(Unknown Source) at de.bezier.mode.javascript.JavaScriptMode.handleExport(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleExport(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleStartServer(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleSave(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleExportCheckModified(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleExport(Unknown Source) at de.bezier.mode.javascript.JavaScriptEditor.handleStartServer(Unknown Source) at de.bezier.mode.javascript.JavaScriptToolbar.handlePressed(Unknown Source) at processing.app.EditorToolbar.mousePressed(EditorToolbar.java:474) at java.awt.Component.processMouseEvent(Unknown Source) at javax.swing.JComponent.processMouseEvent(Unknown Source) at java.awt.Component.processEvent(Unknown Source) at java.awt.Container.processEvent(Unknown Source) at java.awt.Component.dispatchEventImpl(Unknown Source) at java.awt.Container.dispatchEventImpl(Unknown Source) at java.awt.Component.dispatchEvent(Unknown Source) at java.awt.LightweightDispatcher.retargetMouseEvent(Unknown Source) at java.awt.LightweightDispatcher.processMouseEvent(Unknown Source) at java.awt.LightweightDispatcher.dispatchEvent(Unknown Source) at java.awt.Container.dispatchEventImpl(Unknown Source) at java.awt.Window.dispatchEventImpl(Unknown Source) at java.awt.Component.dispatchEvent(Unknown Source) at java.awt.EventQueue.dispatchEventImpl(Unknown Source) at java.awt.EventQueue.access$200(Unknown Source) at java.awt.EventQueue$3.run(Unknown Source) at java.awt.EventQueue$3.run(Unknown Source) at java.security.AccessController.doPrivileged(Native Method) at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source) at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source) at java.awt.EventQueue$4.run(Unknown Source) at java.awt.EventQueue$4.run(Unknown Source) at java.security.AccessController.doPrivileged(Native Method) at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source) at java.awt.EventQueue.dispatchEvent(Unknown Source) at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source) at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source) at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source) at java.awt.EventDispatchThread.pumpEvents(Unknown Source) at java.awt.EventDispatchThread.pumpEvents(Unknown Source) at java.awt.EventDispatchThread.run(Unknown Source)

Here is my code:

`PImage img;
PImage screen;
double initialDifference;
double maxDifference;
color[] imgVector;
int imgScale = 4;

void setup() {
  img = loadImage("mona_lisa_small.jpg");
  //size(img.width * imgScale, img.height * imgScale);
  size(100 * imgScale, 148 * imgScale);  
  background(255);
  stroke(255,0);

  // Put image pixels into vector for faster use
  imgVector = new color[img.pixels.length];
  for (int i = 0; i < img.pixels.length; i++) {
    imgVector[i] = img.pixels[i];
  }

  maxDifference = totalDifference();

  // Load saved file
  //PImage bg = loadImage("screen-save-circles.tiff");
  //size(bg.width,bg.height);
  //background(bg);     // To load from save file

}

void draw() {
  int m = millis();
  initialDifference = totalDifference();
  println(initialDifference);
  saveFrame("screen.tiff");
  //addTriangle();
  addCircle();
  double newDifference = totalDifference();
  if (newDifference > initialDifference) {
    screen = loadImage("screen.tiff");
    background(screen);
  }

}


void addTriangle() {
  float[] points = new float[10];

/*   
  // Create random triangle 
  for (int k = 0; k < 6; k++) {
    if (k % 2 == 0) {
     points[k] =  random(0 - (.5 * width), width + (.5 * width));
    }
    else {
     points[k] =  random(0 - (.5 * height), height + (.5 * height));
    }
  }
*/  
  // Create random triangle of limited size
  int limit = constrain((int)(9000 * (initialDifference / maxDifference)), 250, 800);    // Number of max pixels away from first point
  println("limit: " + limit);
  points[0] =  random(0 - (.5 * width), width + (.5 * width));
  points[1] =  random(0 - (.5 * height), height + (.5 * height));
  points[2] = points[0] + random(-limit, limit);
  points[3] = points[1] + random(-limit, limit);
  points[4] = points[0] + random(-limit, limit);
  points[5] = points[1] + random(-limit, limit); 


  // Add random color and alpha to array
  points[6] = random(255);
  points[7] = random(255);
  points[8] = random(255);
  points[9] = random(255);  

  // Add triangle
  fill( points[6], points[7], points[8], points[9]);
  //fill(points[6], points[9]);
  triangle(points[0], points[1], points[2], points[3], points[4], points[5]);
}

void addCircle() {
  float[] points = new float[7];

  // Create random circle of limited size
  int limit = 100;    // Number of max pixels away from first point
  points[0] =  random(0 - (.5 * width), width + (.5 * width));
  points[1] =  random(0 - (.5 * height), height + (.5 * height));
  points[2] = random(0, limit);

  // Add random color and alpha to array
  points[3] = random(255);
  points[4] = random(255);
  points[5] = random(255);
  points[6] = random(255);  

  // Add circle
  fill( points[3], points[4], points[5], points[6]);
  ellipse(points[0], points[1], points[2], points[2]);
}

double totalDifference() {
  loadPixels();
  // Return total difference between image and screen
  double total = 0;
  for (int i = 0; i < imgVector.length; i++) {
    // Changed to use small image with 4x screen size
    int j = (i * imgScale) + ((width * imgScale - width) * (i / img.width));
    total += differenceOfPixels(pixels[j], imgVector[i]);
  }
  return total;  
}

double differenceOfPixels(color c1, color c2) {
  String str1 = hex(c1);
  String r1 = str1.substring(2,4);
  String g1 = str1.substring(4,6);
  String b1 = str1.substring(6,8);

  int red1 = Integer.parseInt(r1, 16);
  int green1 = Integer.parseInt(g1, 16);  
  int blue1 = Integer.parseInt(b1, 16);

  String str2 = hex(c2);
  String r2 = str2.substring(2,4);
  String g2 = str2.substring(4,6);
  String b2 = str2.substring(6,8);

  int red2 = Integer.parseInt(r2, 16);
  int green2 = Integer.parseInt(g2, 16);  
  int blue2 = Integer.parseInt(b2, 16);

  double diff = (Math.pow(red1 - red2,2) + Math.pow(green1 - green2,2) + Math.pow(blue1 - blue2,2));   
  return diff; 
}

`

The program just randomly adds triangles to the canvas and keeps it if it makes the canvas closer to what the original image looks like.

Is the problem with saving images in JavaScript mode? Or something else

edit: I changed the size() to a constant value and now the error is gone and the page comes up but the script just shows a white canvas and does nothing. Even adding Background(img) shows a blank canvas

GoToLoop

We should follow Processing.JS' reference very closely in order to succeed into transpile Java to JS mode:
http://ProcessingJS.org/reference/

Your code is too Java-ish. For example, Integer.parseInt() doesn't belong to P5's API!
Use cast operator (int) or convert function int(): http://processing.org/reference/intconvert_.html

Also always prefer float in place of double datatype! =;

atomant

Got it working, thanks! I didn't realize there was such a difference in code for Processing.JS