[Solved] Why these two codes are not working in js mode ? Difficult debuggin in js mode.

blyk

Hello, I am trying to run these code in js mode but none of them working. Each of them just show grey color blacnk screen, nothing else.

I found the same problem in so many blogs but everyone has their own different solution for different issue.

In the chrome console I see this error: "Uncaught Processing.js: Unable to execute pjs sketch: TypeError: undefined is not a function "

 //Code 1
PShape MouseShape;
PShape mright;
PShape mleft;
PShape mwheel;
PShape mcursor;
PShape[] Children;
void setup() {
  size(400, 300);
  MouseShape = loadShape("C:/Users/FB-Abhniv/Documents/Processing/SVGtesting/data/bot.svg");
  Children = MouseShape.getChildren();
  mleft    = MouseShape.getChild(Children[0].getName());
  mright   = MouseShape.getChild(Children[1].getName());
  mwheel   = MouseShape.getChild(Children[2].getName());
  mcursor  = MouseShape.getChild(Children[3].getName());
}

void draw() {
  scale(0.5);
  translate(width/4, 0);
  background(-1);
  noStroke();
  fill(0);
  MouseShape.disableStyle();
  shape(MouseShape, 0, 0);

  if (Rflag) {
    mright.disableStyle();
    fill(#FF0000);
    shape(mright, 0, 0);
  }
  if (Lflag) {
    mleft.disableStyle();
    fill(#FF0000);
    shape(mleft, 0, 0);
  }
  //-----------------------------
  mwheel.disableStyle();
  if (mW>0)fill(#5000FF);
  else if (mW<0)fill(#00FF28);
  else fill(0);
  shape(mwheel, 0, 0);
  //-----------------------------
  mcursor.disableStyle();
  fill(-1);
  shape(mcursor, 0, mW*20);
}
//---------------
boolean Lflag, Rflag;
void mousePressed() {
  if (mouseButton==LEFT) Lflag = true;
  else Lflag = false;
  if (mouseButton==RIGHT) Rflag = true;
  else Rflag = false;
}

void mouseReleased() {
  Rflag = false;
  Lflag = false;
}
//----------------
float mW;
void mouseWheel(MouseEvent event) {
  mW = event.getCount();
  println(mW);
}



//Code 2
import ddf.minim.analysis.*;
import ddf.minim.*;

Minim       minim;
FFT         fft;
ArrayList<Float> poop = new ArrayList();
int bufferSize=512;
int highest=0;
float[] sample;
void setup()
{
  size(800, 300, P3D);
  minim = new Minim(this);
  fft = new FFT( bufferSize,50000); //  FFT(int timeSize,float sampleRate)
}

void draw()
{
  background(0);
  stroke(#FF0000);
  sample = new float[poop.size()];
  for (int i=0;i<poop.size();i++) {
    Float f = (float) poop.get(i);
    sample[i] = f;
  }
  if (poop.size()< bufferSize) {
    float t = map(mouseX, 0, width, 0, bufferSize);
    poop.add(t);
  }
  else poop.remove(0);

  stroke(#009BFF);
  line(width/2, 20, mouseX, 20);
  if (sample.length==bufferSize) {
    fft.window(FFT.HAMMING);
    fft.forward(sample);
    for (int i = 0; i < fft.specSize(); i++)
    {
      stroke(0, 255, 0);
      float x = map(i, 0, fft.specSize(), 0, width);
      line( x, height, x, height - fft.getBand(i)/50.0);
      //-----------------For getting the highest frequency ----
//      if (fft.getFreq(i) >= fft.getFreq(highest)) {
//        highest=i;
//        float freq = fft.getFreq(highest);
//        println( " Band" + fft.getBand(i) +  " freq" + freq );
//      }
      //-----------------For getting the highest frequency ----
    }
  }
  else   println(poop.size());
}

quark

The second uses the Minim library which is not compatible with JS mode. Not sure about the first one.

It can be confusing but sketches created in JAVA mode are not always compatible with JavaScript mode.

velvetkevorkian

It looks like you're trying things that aren't supported in JS mode.

1. I don't see a getChildren() in either the Processing or Processing.js references. I'm also not sure about the mousewheel events, I don't see them in the reference either. Does this run in Java mode?

2. Minim isn't available in JS mode. Although someone has done some work in that direction, the APIs are different (see here for more info).

blyk

@velvetkevorkian Thanks for the reply :) I am sorry but these all are available in processing. Here are the links

1. mouseWheel()

2. getChildren()

   Yes these codes run perfectly in java mode.

About the minim in js mode. I have the same doubt but you can see so many code available on openprocessing.org are using minim library. I dont know how those codes work without any hindrenc.

@Quark: Thanks again :) You are correct. Minim might not be compatible with js mode but there are so many examples on openprocessing.org uses minim library and they work absolutly fine.

Here minim in js CODE

velvetkevorkian

That's a Java applet, not processing.js.

quark

All of the sketches that use Minim (including the one you link to) on Open Processing are Applets created in Java mode.

Java and JavaScript are very, very different programming languages. In fact the biggest similarity is in their names (i.e. both start with Java)

Because you can swap modes, Processing makes it look like you can create something in Java mode and expect it to work in JavaScript mode, this is not always true.

blyk

Sadly they are only available in processing not in js mode :(

velvetkevorkian

For your first code, if you remove the getChildren() and load individual SVGs instead your code compiles in JS mode. I'm pretty sure that's the issue there.

If I recall correctly there were a lot of changes to PShape in the move to 2.0, which processing.js isn't up to date with.

blyk

@Quark: I am really confused. :(( If I want to upload my code in openprocessing the I would have to change the mode in processing to javascript mode and export the web applet and zip it and upload it there. I did that too but no luck. How can I create applet using java mode ?

blyk

@velvetkevorkian. These are not the individual svg instead these are the chiIdren of main svg file and I called getChildren() becuase I didn't know the id of these children so I used this method. Is there any other way to get the id of the children ?

velvetkevorkian

I think you would have to give them IDs inside the SVG file, then use getChild(id) on each one. Not 100% sure though, sorry. Alternatively you can create multiple SVGs and load them in separately.

blyk

oh that's painful :(( :(( :(( I did that becasue I wanted to avoid doing this. Actually I have create this svg in using illustrator and I dont know how to set the id in the illustrator.

blyk

Okay I got working my first code in js mode. I set the id for each children (googled it) and hacked the mouseWheel event for js mode B-)

Here it is

void mouseScrolled()
{
  if (mouseScroll > 0)
  {
    val++; // positive scroll
  }
  else
  {
    val--; // negative scroll
  }
}

But minim mystry is still uncracked :(( :((

blyk

@Quark Thanks you so much I found my answer in a old post where you have replied the method to get the applet in java mode :) Thanks again

Post