Why isn't my sketch working in processing.js?

lukeP

So, I made a dancing cube for a loading screen for my website.

If you run it in normal Java mode, it looks great:

int w = 1500;
int h = 800;

PVector location = new PVector(w/2,h/2,-h/2);
PVector rotation = new PVector(0,0,0);
PVector noises = new PVector(0,3520,15206);
PVector cur_min = location.get();
PVector cur_max = location.get();
PVector final_min = new PVector(0,0,-h);
PVector final_max = new PVector(w,h,h);
int count=0;
int dance_queue = 60 * 2;
color box_color = color(40,40,40);
float box_size = ((w+h)/2)/5;
void setup()
{
  size(1500,800,P3D);
  background(255,255,255);
  fill(box_color);
  noStroke();
  smooth();

}

void draw()
{

  background(255); 
  directionalLight(100, 100, 100, 0.5, 0.65, -0.5);
  directionalLight(100, 100, 100, 0.5, 0, -1);

  float a = 0.01;
  noises.add(a,a,a);

  if(count>dance_queue)
  {    
    PVector incr=new PVector(2,2,2);
    cur_min.sub(incr);
    cur_max.add(incr);

    if(cur_min.x<final_min.x)
    { 
      cur_min.x=final_min.x;
      cur_max.x=final_max.x;
    }

    if(cur_min.y<final_min.y) 
    {  
      cur_min.y=final_min.y;
      cur_max.y=final_max.y;
    }
    if(cur_min.z<final_min.z)
    { 
      cur_min.z=final_min.z;   
    }
    if(cur_max.z>final_max.z)
    { 
      cur_max.z=final_max.z;   
    }

    location.x=map(noise(noises.x),0,1,cur_min.x,cur_max.x);
    location.y=map(noise(noises.y),0,1,cur_min.y,cur_max.y);
    location.z=map(noise(noises.z),0,1,cur_min.z,cur_max.z); 

  }
  count++;

  translate(location.x,location.y,location.z);
  rotation.x=-map(noise(noises.z),0,1,-7,7); 
  rotation.y=map(noise(noises.x),0,1,-7,7);
  rotation.z=map(noise(noises.y),0,1,-5,5); 
  rotateX(rotation.x);
  rotateY(rotation.y);
  rotateZ(rotation.z);
  box(box_size);
}

However, when I run it in Java script mode, I just get the background. Can someone try running this in both modes to confirm that they

According to this: my browser does support webgl Screenshot from 2014-12-21 22:03:14

GoToLoop

I've pasted your code above w/o any modifications in these 2 Processing host sites and worked w/o any problems:

1. http://www.OpenProcessing.org/sketch/create
2. http://SketchPad.cc/

Also worked here: http://processingjs.org/tools/processing-helper.html

lukeP

hmm... I get a blank canvas on those sites as well.

GoToLoop

Either you're using a very old browser or it failed to recognize WebGL capabilities! :-S
Depending on the browser you may try to force WebGL via internal configs... :ar!

lukeP

Browsers not old. I am using Chrome and have also tried it in firefox. I can run other peoples sketches in my browser though.

GoToLoop

Firefox: about:config -> webgl.force-enabled -> true
Chromium: chrome://settings -> Show Advanced Settings... -> System -> Use hardware acceleration when available

Make sure you've got latest updated graphics drivers for your system!

lukeP

If my graphics drivers are a problem how is it that I can run other peoples sketches but not this one?

My chrome settings are good.

GoToLoop

... I can run other peoples sketches but not this one?

Are those sketches WebGL too? That is, do they use P3D/OPENGL renderer? :-?
Your sketch worked for me perfectly, both in Java & JavaScript modes in those sketch hosting sites! <):)

lukeP

do you have any sketches you can point me to that you know use WebGL so I can confirm?

Thanks for your help and patience here btw

GoToLoop

• Orbital System - http://studio.processingtogether.com/sp/pad/export/ro.9c4pxAevkAbwG/latest
• Satellite Earth Orbit - http://studio.processingtogether.com/sp/pad/export/ro.9XA1cz2QZL2l2/latest
• Rotating Card - http://studio.processingtogether.com/sp/pad/export/ro.9oKy5N3D6zFZT/latest
• 3D Bouncing Ball - http://studio.processingtogether.com/sp/pad/export/ro.9o1T5z1ghf2s7/latest
• Whorld - http://studio.processingtogether.com/sp/pad/export/ro.9NXXIoDF2EHzu/latest
• Mosely Level 2 Flyby - http://studio.processingtogether.com/sp/pad/export/ro.9jVqnBB4vM3g3/latest

lukeP

Some of them work, some of them only load the background and some of them only load part of what it looks like they should be.

GoToLoop

All of them should work! Both in a browser & copy/paste in Java Mode!
As said earlier: Update video drivers, get updated browsers like Firefox & SRWare Iron!

• https://en.wikipedia.org/wiki/Firefox
• https://en.wikipedia.org/wiki/SRWare_Iron

loftus

Hi, i'm facing the same problem! I tried everything you said above, but still my sketch is not working on javascript!!!

could you please help me? thanks

GoToLoop

... but still my sketch is not working on JavaScript...

Before trying to make yours work, have you tried existing 1s from the links above?
Is your sketch using WebGL too? Please consider make another forum thread!

loftus

in fact, i don't know much about processing! i'm just helping a teacher in architecture to integrate his project in wordpress, The project built by someone which he is not available now to do it! i googled around trying to figure it out, I'v tried many tutorials and examples, but its a bit complicated than it seems.

Thanks for your reply.

lukeP

My graphics card is an AMD/ATI Caicos Redeon HD 6450

I added 2 links to the OP that show that my browser is capable of webgl and I know I have it enabled.

Ubuntu says I am using the recommended driver, which is X.org Xserver driver wrapper

GoToLoop

• X.Org Server is Linux's default display manager! But it's not necessarily the video driver!
• If the open source driver "xserver-xorg-video-radeon" seems not enough to get ya WebGL, you should install a proprietary video driver.
• Go to terminal and type in sudo software-properties-gtk. And click on last tab "Additional Drivers".
• Look for Catalyst "fglrx" driver and choose it. Don't forget browser's settings. Good luck! %%-

lukeP

when I go to get.webgl.org, both chrome and Fire Fox say that they support web gl. On chrome, I do not see a spinning cube, but on firefox I do. However, I still have the same problems when running my sketch in FF that I do in chrome. Chome and firefox both say they support my graphics card, but (at least on chrome) I've told it to ignore the GPU blacklist either way. If it was a problem with my graphics card itself, I wouldn't be able to run the sketches in regular java mode would I?

GoToLoop

Perhaps the way PJS framework implemented WebGL got some problems w/ "xserver-xorg-video-radeon" driver.
I'm running Lubuntu w/ nVidia's "VDPAU" proprietary driver. Can't remember whether open source "Nouveau" driver ever worked though! :-/

lukeP

When I choose Proprietary drivers, I have 2 choices 1 from fglrx and 1 from fglrx-updates, both of them actually make it so I cant even use P3D in regular java mode. (says GLSL shaders aren't supported)

also, the driver that (semi) works actually says: xserver-xorg-video-ati not radeon

p.s. This isn't a common problem right? I don't want to use webgl on my website if I cant rely on it to be compatible with my user's hardware

GoToLoop

Problem is my card is "GeForce 9800 GT". I always had good Linux support w/ nVidia cards!
But I've never had so much experience w/ AMD cards w/ Linux + Processing yet! :-\"