CODEWITHSUNDEEP
javascriptp5.js
madmax80
madmax80

Reputation: 181

P5.js / how to set a color value on each pixel of createGraphics object

The following code should set the color value of each pixel of the createGraphics object to red, but only thing that is rendered is the gray background.

//////////////////////////////////////////////////////////
function setup() {
    createCanvas(800, 600);
    pixelDensity(1);
    gp = createGraphics(width, height);
     
}
//////////////////////////////////////////////////////////
function draw() {
    background(125);
    gp.loadPixels();
    for(var x = 0; x < width; x++){
         for(var y = 0; y < height; y++){
           var index = (width * y + x) * 4;
           gp.pixels[index+0]= 255;
           gp.pixels[index+1]= 0;
           gp.pixels[index+2]= 0;   
         }  
      }
      gp.updatePixels();
      image(gp,0,0, width,height);   
}

Upvotes: 0

Views: 1338

Answers (1)

Charlie Wallace
Charlie Wallace

Reputation: 1830

The main issue with your code is that you are not setting an alpha value. By leaving the alpha equal to zero the changes to the graphics object are transparent.

Here is similar code that sets the alpha value to 100.

var gp;
function setup() {
    createCanvas(800, 600);
    pixelDensity(1);
    gp = createGraphics(width, height);
    gp.pixelDensity(1);
    noLoop(); 
}

function draw() {
    background(255)
    gp.loadPixels();
    for(var x = 0; x < width; x++){
         for(var y = 0; y < height; y++){
           var index = (width * y + x) * 4;
           gp.pixels[index+0]= 255.0;
           gp.pixels[index+1]= 0;
           gp.pixels[index+2]= 0;
           gp.pixels[index+3]= 100.0;   
         }  
      }
      gp.updatePixels();
      image(gp,0,0, width,height);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Upvotes: 2

Related Questions