Basic questions about reducing CPU usage when drawing pictures

delsey

Hello, I wrote a program for choosing colors for an LED-Strip. It works quite good, but it seems to be using quite alot of CPU. (30% CPU, i5 7600k @4.6ghz)

I know that this usage is due to my program constantly loading pictures:

Setup method:

      fade = loadImage("fade.jpg");
      red = loadImage("red.jpg");
      green = loadImage("green.jpg");
      blue = loadImage("blue.jpg");
      plus = loadImage("plus.jpg");
      minus = loadImage("minus.jpg");

Draw-Method:

      image(fade, 1, 241, boxsize-1, boxsize-1);
      image(red, 82, 241, boxsize-2, boxsize-1);
      image(green, 161, 241, boxsize-1, boxsize-1);
      image(blue, 241, 241, boxsize-1, boxsize-1);
      image(plus, 401, 241, boxsize-1, boxsize-1);
      image(minus, 481, 241, boxsize-1, boxsize-1);

Can someone help me to adapt it? How do I load the pictures without consantly having to draw them? It would be enough to draw them once when the program starts.

koogs

What is boxsize?

Resize the images in setup, use the version of image that only uses 3 arguments otherwise it's resizing then every frame, ie slow

delsey

Boxsize is the size of the "box", or in this case the size that the image needs to be. This reduced CPU usage to 5-6%, thanks for the quick response man

koogs

Yeah, I gathered that by the name! I was more wondering whether it was a constant or whether it changed per frame because if it changed then resizing in setup wouldn't work.

delsey

Its constant. It looks like this:

The ones in the last line are the images. Thanks again.

koogs

ok. are you redrawing everything every frame? even when there's no interaction or animation?

if so, you can possibly add noLoop() to the bottom of draw and then call redraw() on mousePressed() to update the screen.

delsey

Works and reduced CPU to <1% in idle. This is how the draw() looks. (Just for reference)

void draw() {
  background(255);

  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int x = i*boxsize;
      int y = j*boxsize;

      if (mouseX > x && mouseX < (x + boxsize) && mouseY > y && mouseY < (y + boxsize)) {
        if (mousePressed && (mouseButton == LEFT)) {
          // Übergibt den char des betreffenden Feldes
          char temp = (chars[i][j]);
          port.write((int)temp);
          delay(200);
        } // end of if
      } // end of if
      // Füllt die Felder mit Farben und erzeugt die Rechtecke
      fill(colors[i][j]);
      rect(x, y, boxsize, boxsize);

      // Setzen der Bilder
      image(fade, 1, 241);
      image(red, 81, 241);
      image(green, 161, 241);
      image(blue, 241, 241);
      image(plus, 401, 241);
      image(minus, 481, 241);
    } // end of for
  } // end of for
  noLoop();
} // end of draw

koogs

even something as simple as this

void setup() {
  size(200, 200);
}

void draw() {
  background(random(256)); // draw current state
  noLoop(); // no need to continually update screen
}

void mousePressed() {
  redraw(); // refresh screen
}

(why are your images inside the inner loop there? you're drawing them rows * cols times in the exact same position. they could go after line 29 drawing them once)

delsey

yes, I did it exactly like your code example there. Didnt notice the thing weith the pictures. My bad. Updated aswell but it didnt make much of a difference in terms of cpu usage. Thanks for the help.