Slow processing code when used on a webpage or in HTML

juiyyce

Hi guys,

I don't know if i post this in the right category but it is still a huge struggle for me. I wanted to make an interactive platform where i could show my progress of different stages. Anyhow, this is not important. What important is is that the code works fine, takes some time with loding, but is quick enough in processing itself. But when i put in on my webpage, it is really slow. Like 4 second delay. I know my code is not that compact but i don't know how to write it in such a way that will make it more compact. is the problem within my code or within the way i put it on my page? I'm kinda new in this so i would understand if my code is quite a mess to you. the website i am trying it to work on is joycevanweverwijk.com

Edit: normally the code is much longer as it is made for 10 instead of 3 "pieces" of a circle. so al there are 10 pvectors and 10x3 arcs to be made.

Edit2: i found out the problem is within loading the images, does somebody has experience with this?

I hope I am clear!

here is the code:

      int circleX, circleY;
int circleSize = 600;
boolean circleOver = false;
int y = 930;
int s = 30;
int a = 260 ; 
int b = 490 ;
int c = 720 ;
void setup() {
  size(950,950);
  circleX = width/2;
  circleY = height/2;
  ellipseMode(CENTER);
}
void draw() {
  noStroke();
  background(0);
 update(mouseX, mouseY);
  noStroke();
  if (circleOver) {
      noFill();
    background(0);
      pushMatrix();
    translate(475,475);
    rotate(radians(270));
    fill(255, 100);
    arc(0, 0, 250, 250, 0, 0.6283);
    popMatrix();
    pushMatrix();
    translate(475,475);
    rotate(radians(306));
    fill(255, 100);
    arc(0, 0, 360, 360, 0, 0.6283);
    popMatrix();   
    pushMatrix();
    translate(475,475);
    rotate(radians(342));
    fill(255, 100);
    arc(0, 0, 380, 380, 0, 0.6283);
    popMatrix();    
    noFill();      
  } else {
    // otherwise if the cursor is not on the circle, you see every progress from my start to the last project i did on the Tu/e
     pushMatrix(); // define statements for an object that object which are only used in the matrix statement
    translate(475,475); //center the object
    rotate(radians(270)); //rotate it around
    fill(255,255);
    arc(0, 0, 70, 70, 0, 0.6283); // make an arc together with other arcs that show my progress
    fill(255, 100); // fill it with white and give it an opacity
    arc(0, 0, 250, 250, 0, 0.6283);
    fill(255, 90);
    arc(0, 0, 210, 210, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 190, 190, 0, 0.6283);
    popMatrix();  
    pushMatrix(); // repeat
    translate(475,475);
    rotate(radians(306));
    fill(255,255);
    arc(0, 0, 230, 230, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 360, 360, 0, 0.6283);
    fill(255, 90);
    arc(0, 0, 300, 300, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 270, 270, 0, 0.6283);
    popMatrix();
    pushMatrix();
    translate(475,475);
    rotate(radians(342));
    fill(255,255);
    arc(0, 0, 110, 110, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 380, 380, 0, 0.6283);
    fill(255, 90);
    arc(0, 0, 310, 310, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 170, 170, 0, 0.6283);
    popMatrix();  
    noFill();   
  }
  ellipse(circleX, circleY, circleSize, circleSize); 
  noStroke();
  PVector[] verts=new PVector[4];
  verts[0]=new PVector(475,175);
  verts[1]=new PVector(651.3,232.7);
  verts[2]=new PVector(475,475);
  verts[3]=new PVector(475,475);
  if(containsPoint(verts,mouseX,mouseY)) {
    tint(255,126);
    pushMatrix();
    translate(475,475);
    rotate(radians(270));
    fill(255,255);
    arc(0, 0, 70, 70, 0, 0.6283);
    fill(255,150);
    arc(0, 0, 250, 250, 0, 0.6283);
    fill(255,120);
    arc(0, 0, 210, 210, 0, 0.6283);
    fill(255,90);
    arc(0, 0, 190, 190, 0, 0.6283);
    popMatrix();
     textSize(58);
     fill(255);
     text("Ideas & Concepts", 240, 840); // say which competency it is
    noFill();
  } else {
    noFill();
  }
  PVector[] verts2=new PVector[4];
  verts[0]=new PVector(651.3,232.7);
  verts[1]=new PVector(760.3,382.3);
  verts[2]=new PVector(475,475);
  verts[3]=new PVector(475,475);
  if(containsPoint(verts,mouseX,mouseY)) {
  tint(255,126);
    pushMatrix();
    translate(475,475);
    rotate(radians(306));
    fill(255,255);
    arc(0, 0, 230, 230, 0, 0.6283);
    fill(255,100);
    arc(0, 0, 360, 360, 0, 0.6283);
    fill(255,90);
    arc(0, 0, 300, 300, 0, 0.6283);
    fill(255,100);
    arc(0, 0, 270, 270, 0, 0.6283);
    popMatrix();
     textSize(58);
     fill(255);
     text("Integrating Technology", 160, 840);
    noFill();
  } else {
    noFill();
  }
  PVector[] verts3=new PVector[4];
  // add corner points of quad
  verts[0]=new PVector(760.3,382.3);
  verts[1]=new PVector(760.3,567.7);
  verts[2]=new PVector(475,475);
  verts[3]=new PVector(475,475);
  if(containsPoint(verts,mouseX,mouseY)) {
    tint(255,126);
    pushMatrix();
    translate(475,475);
    rotate(radians(342));
    fill(255,255);
    arc(0, 0, 110, 110, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 380, 380, 0, 0.6283);
    fill(255, 90);
    arc(0, 0, 310, 310, 0, 0.6283);
    fill(255, 100);
    arc(0, 0, 170, 170, 0, 0.6283);
    popMatrix();
     textSize(58);
     fill(255);
     text("Form & Senses", 280, 840);
    noFill();
  } else {
    noFill();
  }
    beginShape();
  for(PVector v : verts) {
    vertex(v.x,v.y);
  }
  endShape(CLOSE);

}
void update(int x, int y) {
  if( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
  } else {
    circleOver = false;
  }
}
boolean containsPoint(PVector[] verts, float px, float py) {
  int num = verts.length;
  int i, j = num - 1;
  boolean oddNodes = false;
  for (i = 0; i < num; i++) {
    PVector vi = verts[i];
    PVector vj = verts[j];
    if (vi.y < py && vj.y >= py || vj.y < py && vi.y >= py) {
      if (vi.x + (py - vi.y) / (vj.y - vi.y) * (vj.x - vi.x) < px) {
        oddNodes = !oddNodes;
      }
    }
    j = i;
  }
  return oddNodes;
}
// this is for controling if the mouse is in the circle or not
boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

mbraendle

Your example posted here works fast in JS mode and loads immediately. The same with joycevanweverwijk.com, loads immediately.

I think you should check your internet connection.

GoToLoop

What I see after a quick view at your code is that you create too many things in draw()!
You should consider pre-create them in setup(). Then re-use them within draw()! <):)

PhiLho

"i found out the problem is within loading the images"
I don't see any image loading in your code...

Take a look at the PJS site, they explain how to pre-load images for a more responsive script.

koogs

i'd also consider changing the script so that it only redraws if something changes, perhaps on mousemove, maybe when it changes segment. at the moment my cpu goes to 100% and the fans kick in the moment i visit your page.

you can probably use atan2 in containsPoint() to determine which segment the mouse is over as well. plus get rid of the sqrt in the distance calculation by checking against (diameter / 2) * (diameter / 2)

mbraendle

While I agree with GotoLoop (and koogs) that the code could be written more elegantly, I don't see for the moment the need for performance optimization. On draw loop is done in about 1-2 ms, so is fast enough. Google Chrome Developer Tools indicate a framerate between 57 and 59 frames/s. It was probably a different problem, probably one of the WCMS you use for this site.