Setting color values for each pixel of a createGraphics object using P5.js

The code snippet provided below is intended to set the color value of each pixel within the createGraphics object to red. However, the output only displays a 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);   
}

Answer №1

The key issue with your code lies in the absence of an alpha value. By keeping the alpha at zero, the modifications to the graphics object remain transparent.

Below is revised code that incorporates an alpha value of 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble with my TextGeometry not displaying on screen. Can someone help me figure

Here is the code I am using for Three.js: <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> ...

My code in NodeJS is not executing in the expected order due to its asynchronous nature

handleRegistration: function (user, req, res, next) { console.log('handleRegistration activated'); user.getData(function(err, info) { if (err) { console.log(err.toString, "error message"); return next(err); } e ...

Executing the onSuccess callback in Ajax without any ability to manipulate the ajax requests

My dilemma lies in needing to execute a JavaScript function upon the successful completion of an AJAX call. Unfortunately, I am unable to directly manage the AJAX calls as they are handled by the DNN5 framework. Is there a way for me to trigger my functio ...

c3.js Error: The value of b is not defined

Struggling to create a graph using a JSON object generated in PHP. Despite following the documentation example, I keep encountering a TypeError: b.value is undefined in the JS log. The data seems to be structured correctly. for($i = 0; $i < 10; $i++){ ...

I encountered a PrimeVue error while running a Vue Jest test

When working on a Vue jest test, I encountered an error message "No PrimeVue Confirmation provided!" which seemed to be related to the useToast() and useConfirm() services. "transformIgnorePatterns": [ "<rootDir>/node_modules/(?! ...

Button to scroll down

I have successfully implemented a #scrolldownbutton that scrolls to the first component. However, I am now attempting to modify it so that when the button is clicked, the page smoothly scrolls within the viewport and stops at the partially visible componen ...

Discovering a website's console content using the "web-request" npm package

I recently added the web-request NPM package to my project with the goal of retrieving console messages from a specific website. However, I encountered an issue as I was unsure of how to achieve this. var result = await WebRequest.get('http://disco ...

Utilize jQuery to invoke an ASP page method from an HTML page

I have a static web page named index.html which includes text boxes for data input. My goal is to send this data to an ASP page called Default.aspx using jQuery/AJAX. I attempted the following: $.ajax({ url: "Default.aspx/GetData", ...

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

The selector-triggered JQuery event being invoked by my script

Facing an issue while trying to invoke my jQuery event. I am working with 2 jQuery events: $element.on('click', function (e) { ... }); $element.on('click', '.toggle', function (e) { ... }); My question is how can I trigge ...

Chartjs-node in conjunction with prebuilt canvas is persistently generating 'Cairo not detected' errors

Currently, I am utilizing chartjs-node for creating charts. On my local (Windows) machine, the node.js code works flawlessly, likely due to having windows-build-tools with the cairo package installed. However, when attempting to compile on my remote (Linu ...

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

Ways to store information using VueJS lifecycle hooks

I am currently working on setting a data property using the created lifecycle hook within my component. The issue I'm encountering is receiving a "TypeError: Cannot read property 'summary' of undefined" in the console as I run the code. This ...

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Hey there! I've encountered a puzzling issue with a form I've created. It's programmed to determine the next page to redirect to using JavaScript after submission. Oddly enough, everything functions perfectly when I test it out in my IDE (C ...

Master the Art of Transforming an Array into a Variable

Here is an example of an array: const [listArr, setLA]= useState([ { id: Math.floor(Math.random * 100000), data: "This is data 1", }, { id: Math.floor(Math.random * 100000), data: "This is data 2", ...

No results found in MongoDB query when using find method

Having an issue with an API call to my express server to retrieve employees working in the same location based on the location ID. Strangely, the API call returns an empty array while it functions correctly in the command-line interface. Definition of Emp ...

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

Using a customized layout, merge AngularJS into Vaadin

I experimented with integrating an angular JS application into Vaadin by utilizing a custom layout as shown below: VerticalLayout mainLayout = new VerticalLayout(); mainLayout.setMargin(true); mainLayout.setWidth("1380px"); setCompositionRoot( ...

Share user group Node Express with relevant data

I am looking for a way to create and send a customized navigation object to be rendered in an Express application based on user groups. My current approach involves adding middleware to each route: var navMiddleware = function() { return function(req, ...

The jQuery hide and show functions lack precision and are too indiscriminate, requiring a more targeted approach

I am designing a unique contact card that captures a user's name and description from an <input> field and appends the input information into a <div> element. This is the flow I am aiming for... User inputs their first and last name alo ...