Grid of images/pixels on a webpage

bonzodog2 · 27-08-2024 3:48pm #1

I've been working on a local webpage (ie no connectivity required) to manipulate single-pixel colours to generate a pattern, from JavaScript. I had a version working with a dynamic table, but it seemed to restrict the cell size to >=5 pixels. Currently I've a grid of single pixel image files, which I choose which to use as the src attribute of the image.

For large grids, its pretty slow and uses lots of memory

Any other suggestions ? Thanks

daymobrew · 27-08-2024 8:24pm

Can you post your code somewhere? pastebin.com or gist.github.com?

bonzodog2 · 27-08-2024 9:39pm

Both versions of my code work fine, I'm looking for an alternative approach to individually addressing a pixel. My image-grid version, which allows for 1x1 images, currently at a grid resolution of 250 rows and 500 columns, takes several minutes to load and starts at about 0.5 GB RAM usage, rising to nearly 1GB when its working hard.

I want to increase the size too.

05-09-2024 10:01am

Sounds like Canvas is the approach you need: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

bonzodog2 · 05-09-2024 11:00am

Thanks. ChatGPT already set me straight !

daymobrew · 05-09-2024 11:54am

https://www.boards.ie/discussion/comment/122584955#Comment_122584955

Can you please elaborate?

bonzodog2 · 05-09-2024 12:14pm

here's the sample html chatgpt gave me. i havent reworked my code yet

<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Pixel Canvas</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>

<canvas id="pixelCanvas" width="100" height="100"></canvas></body>
</html>

bonzodog2 · 05-09-2024 12:16pm

script seems to be edited out by boards. heres something else

Key Points:<canvas> Element: Defines an area in the HTML where graphics can be drawn. In this case, we
set a 100x100 pixel canvas.JavaScript Drawing Context (2d): Obtained using getContext('2d'), this
context provides methods for drawing shapes, text, images, and other objects directly onto the
canvas.Pixel Manipulation:createImageData(): Creates a new, blank ImageData object.putImageData():
Draws an ImageData object at a specific location on the canvas.getImageData(): Retrieves pixel data
from the canvas (useful for reading pixel values).Advantages of Using <canvas>:High Performance: Unlike
tables or image grids, the <canvas> element is hardware-accelerated in modern browsers.Dynamic Updates:
Easily update individual pixels or entire regions without re-rendering the whole canvas.Low Memory
Overhead: Much more efficient in terms of memory compared to creating a DOM element for each
pixel.Powerful APIs: Provides a rich set of APIs for drawing shapes, applying transformations, handling
events, etc.Conclusion:Using the <canvas> element with JavaScript is a modern and efficient approach to
creating a dynamic, pixel-addressable HTML page. It provides greater flexibility and performance
compared to older methods like tables or grids of images.

bonzodog2 · 05-09-2024 12:17pm

also

https://www.w3schools.com/jsref/api_canvas.asp

bonzodog2 · 05-09-2024 12:21pm

heres the JS without the tags

    // JavaScript to manipulate pixels

    const canvas = document.getElementById('pixelCanvas');

    const ctx = canvas.getContext('2d');


    // Fill the canvas with black pixels

    ctx.fillStyle = 'black';

    ctx.fillRect(0, 0, canvas.width, canvas.height);


    // Function to set the color of a single pixel

    function setPixel(x, y, r, g, b, a) {

        const imageData = ctx.createImageData(1, 1); // Create a 1x1 pixel ImageData object

        const data = imageData.data;


        // Set RGBA values

        data[0] = r;   // Red

        data[1] = g;   // Green

        data[2] = b;   // Blue

        data[3] = a;   // Alpha (opacity)


        // Draw the pixel on the canvas at the specified coordinates

        ctx.putImageData(imageData, x, y);

    }


    // Example: Set a red pixel at (10, 10)

    setPixel(10, 10, 255, 0, 0, 255);


    // Example: Randomize pixel colors for the entire canvas

    function randomizePixels() {

        for (let x = 0; x < canvas.width; x++) {

            for (let y = 0; y < canvas.height; y++) {

                setPixel(x, y, Math.random() * 255, Math.random() * 255, Math.random() * 255, 255);

            }

        }

    }


    // Call the randomizePixels function

    randomizePixels();

Grid of images/pixels on a webpage

Comments