Basic questions about reducing CPU usage when drawing pictures

edited February 2018 in Questions about Code

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.

Answers

  • Answer ✓

    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

  • 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

  • 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.

  • edited February 2018

    Its constant. It looks like this:

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

  • Answer ✓

    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.

  • 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
    
  • 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)

  • 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.

Sign In or Register to comment.