Howdy!
I wrote this little program with the idea it would live on a website, but when I load it in the browser it animates very jerky/choppy. How adjust it so it will run smooth using processing.js, or how can I re-write it to get the effect I want? Similar effect is achieved with the P2D renderer in Java mode.

It seems like its rounding all my floats into ints or just ignoring them altogether?

1. float j;
   int bar_num=86;
   Bar[] newbars = new Bar[bar_num];
   
   
   void setup(){
     rectMode(CENTER);
     size(1024,500);
   
   
   for (int i = 0; i < newbars.length; i++){
   
     j++;
   
     if(j>=7){
   
     j=j*-1;
   
   }
   
   
   
       newbars[i]= new Bar(i*15, j);
   }
   
   }
   
   
   
   
   void draw(){
   
       background(0);
   
   for (int i = 0; i<newbars.length; i++){
   
     newbars[i].display();
     newbars[i].flux();
      
     } 
   
   }
   
   class Bar{
    
     float xpos;
     float wid;
   
   
     Bar(float tempxpos, float tempwidth){
     wid=tempwidth;
     xpos=tempxpos;
   }
   
   void display(){
   noStroke();
     fill(#0000ff);
     rect(xpos, height/2, wid, 100);
   
   }
   
   void flux(){
   wid+=.06;
   
   if(wid>=7 ){
   
     wid=wid*-1;
   
   }
   if(wid<=1 && wid>=-1){
    
   
     wid=1;
   
   }
   
   
   }
   }