title: Painting individual pixels quickly in P5.js
body: <p>I am trying to make an old TV static type effect in P5.js, and although I am able to make the effect work, the frame rate is quite low.</p>
  
  <p>My approach is the following:</p>
  
  <ul>
  <li>Loop through each pixel </li>
  <li>Set the stroke to a random value</li>
  <li>Call the point() function to paint the pixel</li>
  </ul>
  
  <p>Initially, I was doing this in the draw function directly but it was very slow. I was getting less than 1 frame a second. So I switch to the following paint buffer approach:</p>
  
  
  
  <pre><code>const SCREEN_WIDTH = 480
  const SCREEN_HEIGHT = 480
  
  var ScreenBuffer;
  
  function setup(){
      createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
      ScreenBuffer = createGraphics(SCREEN_WIDTH,SCREEN_HEIGHT);
  }
  
  function draw(){
  paintBuffer();
  image(ScreenBuffer,0,0);
  }
  
  function paintBuffer(){
      console.log("Painting Buffer")
      for(var x = 0; x&lt; SCREEN_WIDTH; x++){
          for(var y = 0; y&lt; SCREEN_HEIGHT; y++){
              ScreenBuffer.stroke(Math.random() * 255)
              ScreenBuffer.point(x,y)
          }
      }
  }
  </code></pre>
  
  <p>Although I am getting a performance improvement, its nowhere near the 30 frames a second I want to be at. Is there a better way to do this?</p>
  
  <p>The only way I can get reasonable performance is by filling up the screen with small squares instead with the following code:</p>
  
  <pre><code>for(var x = 0; x&lt; SCREEN_WIDTH-10; x+=10){
          for(var y = 0; y&lt; SCREEN_HEIGHT-10; y+=10){
              //ScreenBuffer.stroke(Math.random() * 255)
              //ScreenBuffer.point(x,y)
              ScreenBuffer.fill(Math.random() * 255);
              ScreenBuffer.noStroke()
              ScreenBuffer.rect(x,y,10,10)
          }
      }
  </code></pre>
  
  <p>But I would really like a pixel effect - ideally to fill the whole screen.</p>