Book (biginner)

Details: http://dev.eyln.com/book2.html

Book (intermediate)

Details: http://dev.eyln.com/book.html

I am a game developer. Macross VO, Naval Ops: Warship Gunner, Super Smash Bros. Brawl X. ...etc.

Thanks.

I have two issues I would like to get assistance with:

1) When I go to install JavaScript in the Mode Manager I get this error message: Could not delete C:\Users[myFolder]\Documents\Processing\modes\mode6040194572416500742tmp\JavaScriptMode\mode\JavaScriptMode.jar Could not delete C:\Users[myFolder]\Documents\Processing\modes\mode6040194572416500742tmp\JavaScriptMode\mode Could not delete C:\Users[myFolder]\Documents\Processing\modes\mode6040194572416500742tmp\JavaScriptMode Could not delete C:\Users[myFolder]\Documents\Processing\modes\mode6040194572416500742tmp

Can anyone help me install the JavaScript module ?

2) Some, but not all, texts are tiny! Almost unreadable. I've been following some google search leads but not found anything that helps. Tried to lower resolution but the tiny text stays just as tiny in the Processing program. What to do ?

Sincere thanks! Glitchman

http://www.openprocessing.org/sketch/192964

The version on OpenProcessing does nothing and running it in JavaScript locally does nothing. It otherwise works perfectly fine in Java.

It works perfectly in "java" but will not work in "javascript" mode. I'd like to put this sketch online, either via OpenProcessing.org or on my own website. I can do this for my other sketches, but not for sketches that include video files.

My questions:

(1) Is there code that works for playing videos in javascript mode? Where can I find this?

(2) If not, is there a preferred method for putting java sketches (with video!) online? Is this possible?

Thank you!! ~LZ

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

I'm a beginner in processing, this is my second game I've created. It's about parabolic shoot and my fisic teacher said she wanted to put in her blog to make his students play and at the same time make them interested in the subject. So I saw the way to do it was to upload to openproccesing.org, then copy the embed code and paste in the blog. The problem was that for uploading, it required me to change to JavaScript mode and when I do the game doesn't run. How I can figure it out? Is there another way to upload at any page without changing to JavaScript?

Thank you all.

http://www.openprocessing.org/sketch/178104

Here is my code:

PFont dis;
PFont vel;
PFont at;
PFont pnt;
PFont tit;

float fps = 90;
float t;

int pun = 0;
int plus;
int ins = 0;

float linespa;

float dnx;
float dny;

float lindx;
float lindy;

float dns = 60;

float flecx;
float flecy;

float bow = -30;
float cord;

float g;
float speed;
float speedx;
float speedy;
float speedmk = 30;

float ang = -45;
float radbow;
float radflec;

int c = 0;

int sta = 3;

void setup() {
  frameRate(fps);
  size(600, 400);
  dis = loadFont("CharterBT-BoldItalic-48.vlw");
  vel = loadFont("Arial-Black-48.vlw");
  at = loadFont("CenturyGothic-48.vlw");
  pnt = loadFont("CenturyGothic-Bold-48.vlw");
  tit = loadFont("ACaslonPro-Italic-48.vlw");
}

void draw() {

  background(255);

  if (sta == 0) {

    flecx = 60;
    flecy = height - 50;
    radflec = radbow;
    cord = -30;
    lindx = dnx;
    lindy = dny;

    if (keyPressed) {

      if (key == 'w') { 
        ang -= 0.5;
      }
      if (key == 's') { 
        ang += 0.5;
      }

      if (key == 'd') { 
        speedmk += 0.5;
      }
      if (key == 'a') { 
        speedmk -= 0.5;
      }

      if (key == 'k' && speedmk != 0) { 
        sta = 1;
      }

      speedmk = constrain(speedmk, 0, 40);
      speed = speedmk/fps*5;
      ang = constrain(ang, -90, 0);

      delay(75);
    }

  } else if(sta == 1) {

    t += 1/fps;
    g += 9.81/sq(fps)*5;

    speedx = speed*cos(abs(radbow));
    speedy = -speed*sin(abs(radbow)) + g;

    flecx += speedx;
    flecy += speedy;

    lindx = flecx;
    lindy = flecy;

    cord += speed;

    radflec = atan(speedy/speedx);


    if (flecx > width + 30 || flecy > height + 30) { 
      sta = 3;
      ins++;
    } 

    if (flecx >= dnx - dns/57 && flecx <= dnx + dns/57 && flecy <= dny + dns/2 && flecy >= dny - dns/2) { 
      sta = 2; 
      c = 0; 
    }


  } else if(sta == 2) {

      if (flecy <= dny + dns/16 && flecy >= dny - dns/16) {
        plus = 45;
        fill(255, c, c);
      } else if (flecy <= dny + dns/4 && flecy >= dny - dns/4) {
        plus = 15;
        fill(c, 255, c);
      } else {
        plus = 5;
        fill(c, c, 255);
      }

      if(c == 0) { pun = pun + plus; ins++; }

      c += 5;
      c = constrain(c, 0, 255);

      textFont(vel);
      textAlign(CENTER);
      textSize(130);
      text("+" +plus, (width - 40)/2, (height - 50)/2);

    if(c >= 255) { sta = 3; }

  } else if (sta == 3) {

    dnx = round(random(200 + dns/6, width - 40 - dns/6));
    dny = round(random(100 + dns/2, height - 50 - dns/2));
    g = 0;
    t = 0;
    sta = 0;
  }

  cord = constrain(cord, bow - 15, bow);
  bow = map(speedmk, 0, 40, -30, -15);
  radbow = map(ang, 0, 360, 0, 2*PI); 

  strokeWeight(1);

  stroke(200);
  line(lindx, lindy, width - 40, lindy);
  line(lindx, lindy, lindx, height - 50);

  textFont(tit);
  textAlign(RIGHT);
  textSize(15);
  fill(170);
  text("Alejandro Camacho", width, height - 5);

  stroke(100);

  line(60, height - 50, width - 40, height - 50);
  line(width - 40, height - 40, width - 40, 0);

  for (linespa = 60; linespa <= width - 40; linespa += 500/20.0) {
    line(linespa, height - 50, linespa, height - 40);
  }

  for (linespa = 60; linespa <= width - 40; linespa += 500/80.0) {
    line(linespa, height - 50, linespa, height - 45);
  }

  for (linespa = height - 50; linespa >= 0; linespa -= 500/20.0) {
    line(width - 40, linespa, width - 30, linespa);
  }

  for (linespa = height - 50; linespa >= 0; linespa -= 500/80.0) {
    line(width - 40, linespa, width - 35, linespa);
  }

  stroke(0);

  fill(0, 0, 255);
  ellipse(dnx, dny, dns/3, dns);
  fill(0, 255, 0);
  ellipse(dnx, dny, dns/9, dns/2);
  fill(255, 0, 0);
  ellipse(dnx, dny, dns/27, dns/8);


  textFont(vel);
  textSize(15);
  textAlign(SQUARE);
  fill(speedmk*6.375, 0, 255 - speedmk*6.375);
  text(speedmk +"m/s", 100, height - 12);

  textFont(at);
  textSize(15);
  fill(0);
  text(abs(ang) +"º", 62, height - 70);

  pushMatrix();

  translate(60, height - 50);

  rotate(radbow);

  noFill();
  strokeWeight(4);
  stroke(220, 90, 0);
  arc(bow, 0, 30, 75, -PI/2, PI/2);

  strokeWeight(1);
  stroke(130, 95, 75);
  line(cord, 0, bow, 75/2);
  line(cord, 0, bow, -75/2);


  popMatrix();


  pushMatrix();

  translate(flecx, flecy);
  rotate(radflec);

  strokeWeight(2);
  stroke(0, 0, 0);

  line(0, 0, -30, 0);

  popMatrix();

  textFont(pnt);
  textSize(20);
  textAlign(LEFT, TOP);
  fill(0);
  text("PUNTOS = " +pun, 10, 10);
  text("PRECISION = " +String.format("%.1f", pun/float(ins)), 10, 30);

  textSize(40);
  textAlign(RIGHT, TOP);
  fill(200);
  text(String.format("%.1f", t) + "s", width - 60 , 10);

  textFont(dis);
  fill(0);
  textAlign(CENTER);
  textSize(15);

  text(String.format("%.1f", (lindx - 60)/5) +"m", lindx, height - 30);
  text(String.format("%.1f", (height - 50 - lindy)/5) +"m", width - 20, lindy);


}

PGraphics render()
  {
    if (!lockDiameter)
      sphereDiameter = map( particles.size(), 0, 2*NUM_OF_PARTICLES, 0.75*MEAN_SPHERE_DIAMETER, 1.25*MEAN_SPHERE_DIAMETER );
    else
      sphereDiameter = MEAN_SPHERE_DIAMETER;

    sphereScreen.beginDraw();
    //sphereScreen.clear();
    sphereScreen.pushMatrix();

    sphereScreen.translate(sphereScreen.width/2, sphereScreen.height/2);

    for ( int i=0; i<particles.size (); i++ )
    {
      particles.get(i).update(sphereDiameter);    
      setNeighbors( particles.get(i) ); 
      sphereScreen = particles.get(i).render(sphereScreen);
    }
    sphereScreen.popMatrix();
    sphereScreen.endDraw();

    return sphereScreen;
  }

There is also another class named "Particle" which also has a "render()" function that takes a PGraphics, and draws an ellipse on it and returns. After doing binary search and the println("works till here"); method, I found that in javascript mode execution stops at the sphereScreen.clear() function call. 1. Are there any alternatives to PGraphics clear() in processing.js?

After commenting the clear() call the function seemed to execute fine. But, in another part of the sketch, I am drawing this PGraphics by calling render() in a image() method:

image(s1.render(), 10, 10);

where s1 is an object of the Sphere_ class. 2. The problem is that the execution stops at this image() function call. I know that the render() function works but dont know what I am doing wrong here. Any help would be greatly appreciated.

Sample code:

/**
  PROCESSINGJS.COM - BASIC EXAMPLE
  Delayed Mouse Tracking  
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible 
*/  

// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop
void draw(){

  radius = radius + sin( frameCount / 4 );

  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;

  // Fill canvas grey
  background( 100 );

  // Set fill-color to blue
  fill( 0, 121, 184 );

  // Set stroke-color white
  stroke(255); 

  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}

I'm working on a project involving an interactive torus, which I'm building in processing as a QUAD_STRIP shape—I can't think of how else one might do it.

The code runs pretty well in java mode. In particular, it's smooth, the frame-rate is as fast as i need it, and the lighting is working (call to lights() function) at the beginning of draw().

but i need the sketch in javascript mode, and that is not working out so nicely. the frame rate is slow enough that there's a refresh line circling the torus, the call to smooth(x) (i was using maximum 8) does not seem to be effecting the anti-aliasing at all, and the call to lights() is doing nothing but slightly darkening (uniformly) the entire shape.

a bit of googling brought me to these, which seem unfortunately relevant to my current issue: -http://forum.processing.org/one/topic/javascript-mode-beginshape-and-lights.html -https://groups.google.com/forum/#!topic/processingjs/VU8CGCsiqQE

but these are old links, so i was hoping that if this is all caused by a known bug then it would have been fixed by now... perhaps overly optimistic.

code for the torus follows, thanks in advance for any help!

float x,y,z,e;
int pts = 50; 
float angle = 0;
float radius = 50;

// lathe segments
int segments = 60;
float latheAngle = 0;
float latheRadius = 100.0;

//vertices
PVector vertices[], vertices2[];

void setup() {
  frameRate(80);

  size(500,500,P3D);
  x = width/2;
  y = height/2;
  z = 0;
  e=width;

}

void draw() {
  angle = 0;
  latheAngle = 0;
  lights();
  background(0);
  smooth(8);


//Color parameters
  //noFill();
  fill(50,10,250);
  noStroke();

  //println(e);
  camera(e*cos((2*PI/width)*mouseX), e*cos((PI/height)*mouseY), e*sin((2*PI/width)*mouseX), 0, 0, 0, 0, 1, 0);
  rectMode(CENTER);


// initialize point arrays 
  vertices = new PVector[pts+1]; 
  vertices2 = new PVector[pts+1];

  // fill arrays <br>
  for(int i=0; i<=pts; i++){ 
    vertices[i] = new PVector();
    vertices2[i] = new PVector();
    vertices[i].x = latheRadius + sin(radians(angle))*radius;
    vertices[i].z = cos(radians(angle))*radius; 
    angle+=360.0/pts; 
  } 

  // draw toroid 
  latheAngle = 0; 
  for(int i=0; i<=segments; i++){ 
    beginShape(QUAD_STRIP); 
    for(int j=0; j<=pts; j++){ 
      if (i>0){ <br>
        vertex(vertices2[j].x, vertices2[j].y, vertices2[j].z); 
      } 
      vertices2[j].x = cos(radians(latheAngle))*vertices[j].x; 
      vertices2[j].y = sin(radians(latheAngle))*vertices[j].x; 
      vertices2[j].z = vertices[j].z; 
      vertex(vertices2[j].x, vertices2[j].y, vertices2[j].z); 
    }
  latheAngle+=360.0/segments; 
  endShape(); 
  }
}

//MouseWheel Control assigns value of -12 to 12 to each scroll position, scale by width/50 to get zoom amount
void mouseWheel(MouseEvent event) {
  e += (width+height)/(100)*event.getCount();
  println(e);
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == DOWN) {
      e += (width+height)/(20);
    } else if (keyCode == UP) {
      e -= (width+height)/(20); 
    } 
  } 
} 

The sketches fail to run, and the error I get in the console is "Uncaught Processing.js: Unable to execute pjs sketch: ReferenceError: Interactive is not defined". Seems like the library isn't being loaded properly.

Any fixes? Am I doing something wrong? Did a Processing/PJS update break guido? Any advice appreciated. If this should be under the 'library' category, apologies ahead of time.

Any other decent PJS compatible GUI libraries?

Exception in thread "Processing.BasicServer" 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.serverStarted(Unknown Source) at de.bezier.mode.javascript.BasicServer.run(Unknown Source) at java.lang.Thread.run(Thread.java:745)

Tonight I saw that there was a new Version 2.2, so I upgraded from 2.1.2, hoping that would fix the problem, but it does not.

Any suggestions what might be wrong and how I can fix it? In addition to not being able to run my sketches in Javascript mode, I can no longer export the project either.

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());
}

I have no idea what this is or how its connected to p.draw() call in processing.js ... My guess is it has something to do with my float placements.

Any help combing my code?

Thanks,

Here is the .pde code:

/* @pjs preload="https://sociallantern.weebly.com/files/theme/video1.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/video2.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/video3.png"; */
/* @pjs preload="https://sociallantern.weebly.com/files/theme/TV.png"; */

float a; 

PImage TVscreen;

PImage video1; 
PImage video2; 
PImage video3;

float bx;
float by;

float ix;
float iy;

float zx;
float zy;

//icon width/height dim
int bs = 40;

//select
boolean bover = false;
boolean bover1 = false;
boolean bover2 = false;

//pick up
boolean locked = false;
boolean locked1 = false;
boolean locked2 = false; 

//load
boolean draw = true;
boolean draw1 = true; 
boolean draw2 = true; 

//play
boolean drag1 = false;
boolean drag2 = false;
boolean drag3 = false;

//position change
float bdifx = 0.0; 
float bdify = 0.0; 

float bdifx1 = 0.0;
float bdify1 = 0.0;

float bdifx2 = 0.0;
float bdify2 = 0.0;

// drop in 
Boolean mouseOverRect0(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

Boolean mouseOverRect1(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

Boolean mouseOverRect2(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+ w && mouseY >= y && mouseY <= y+h);
}

void setup() 
{
  size(640, 480);

  video1 = loadImage ("https://sociallantern.weebly.com/files/theme/video1.png");
  video2 = loadImage ("https://sociallantern.weebly.com/files/theme/video2.png");
  video3 = loadImage ("https://sociallantern.weebly.com/files/theme/video3.png");

  TVscreen = loadImage ("https://sociallantern.weebly.com/files/theme/TV.png");
}

void draw() { 
  background(0, 0, 0, 0);

  // video player window
  fill(5, 5, 5);
  rect(75, 198, 405, 206);
  image(TVscreen, 40, 160); 
  fill(203, 252, 8);
  text("Drag and Drop Video Files into TV", 60, 180);
  image(video1, bx, by, bs, bs);
  image(video2, ix, iy, bs, bs);
  image(video3, zx, zy, bs, bs);

  // video 1 selector

  if (mouseX > bx-bs && mouseX < bx+bs && 
    mouseY > by-bs && mouseY < by+bs) {

    bover = true;  
    if (!locked) { 
      stroke(255); 
      fill(153);
      bover1 =false;
      bover2 =false;
      locked1=false;
      locked2=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover = false;
    bx = 570;
    by = 220;
  }

  //video 2 selector
  if (mouseX > ix-bs && mouseX < ix+bs && 

    mouseY > iy-bs && mouseY < iy+bs) {

    bover1 = true;  
    if (!locked1) { 
      stroke(255); 
      fill(153);
      bover =false;
      bover2 =false;
      locked=false;
      locked2=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover1 = false;

    ix = 570;
    iy = 280;
  }

  //video 3 selector
  if (mouseX > zx-bs && mouseX < zx+bs && 

    mouseY > zy-bs && mouseY < zy+bs) {

    bover2 = true;  
    if (!locked2) { 
      stroke(255); 
      fill(153);
      bover1 =false;
      bover =false;
      locked=false;
      locked1=false;
    }
  } 
  else {
    stroke(153);
    fill(153);
    bover2 = false;

    zx = 570;
    zy = 340;
  }

  // video 1 

  int qx = 75;
  int qy = 198;
  int qw = 405;
  int qh = 206;

  if (mouseOverRect0 (qx, qy, qw, qh) && bover == true && locked==false) {
    draw = false;
    draw1 = true;
    draw2 = true;
    drag1 = true;

    bx = 570;
    by =220;
  } 

  if (bx == 570 && by == 220 && draw == false) {
    image(video1, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  if (draw == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  //video 2 

  int fx = 75;
  int fy = 198;
  int fw = 405;
  int fh = 206;

  if (mouseOverRect1 (fx, fy, fw, fh) && bover1 == true && locked1==false) {
    draw1 = false;
    draw = true;
    draw2 = true;
    drag2 = true;

    ix = 570;
    iy =280;
  } 
  if (ix == 570 && iy == 280 && draw1 == false) {
    image(video2, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }
  if (draw1 == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  int cx = 75;
  int cy = 198;
  int cw = 405;
  int ch = 206;

  if (mouseOverRect2 (cx, cy, cw, ch) && bover2 == true && locked2==false) {
    draw2 = false;
    draw = true;
    draw1 = true;
    drag3 = true; 

    zx = 570;
    zy = 340;
  } 
  if (zx == 570 && zy == 340 && draw2 == false) {
    image(video3, 75, 198, 405, 206);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

  if (draw2 == false) {

    image(TVscreen, 40, 160);
    fill(203, 252, 8);
    text("Drag and Drop Video Files into TV", 60, 180);
  }

}

void mousePressed() {

  // video 1 pick up
  if (bover) { 
    locked = true; 
    fill(255, 255, 255);
  } 
  else {
    locked = false;
  }

  bdifx = mouseX-bx; 
  bdify = mouseY-by; 

  //video 2 pick up
  if (bover1) { 
    locked1 = true; 
    fill(255, 255, 255);
  } 
  else {
    locked1 = false;
  }

  bdifx1 = mouseX-ix; 
  bdify1 = mouseY-iy; 

  //video 3 pick up
  if (bover2) { 
    locked2 = true; 
    fill(255, 255, 255);
  } 
  else {
    locked2 = false;
  }

  bdifx2 = mouseX-zx; 
  bdify2 = mouseY-zy;
}
void mouseDragged() {
  //video 1 move
  if (locked) {

    bx = mouseX-bdifx; 
    by = mouseY-bdify;
  }
  //video 2 move
  if (locked1) {

    ix = mouseX-bdifx1; 
    iy = mouseY-bdify1;
  }
  //video 3 move  
  if (locked2) {

    zx = mouseX-bdifx2; 
    zy = mouseY-bdify2;
  }
}

void mouseReleased() {

  locked = false;
  locked1 = false;
  locked2 = false;
}