this.pixels v3.3.4

we moved to this.pixel

Pixels

Pixels is a package containing custom web components for handling pixel-based operations. One of the main components in this package is PixelGrid.

First, you install the this.pixels package in your project:

npm install this.pixels

In your project's index.js or any other file where you want to use PixelGrid, you import it like this:

const PixelGrid = require('this.pixels');

Now, you can create an instance of PixelGrid and use it as needed:

const pixelGrid = new PixelGrid(800, 600); // Create a new instance with width 800 and height 600
// Get the color of a specific pixel at coordinates (x, y)
const pixelColor = pixelGrid.getPixel(x, y);
// Set the color of a specific pixel at coordinates (x, y)
pixelGrid.setPixel(x, y, [255, 0, 0, 255]); // Set the pixel to red
// Access all the pixels in the pixel grid
const allPixels = pixelGrid.pixels;

The PixelGrid class will now be available for you to use in your project, thanks to the this.pixels package. It provides an abstraction over the canvas element and allows you to perform low-level manipulation of image data using its methods.

PixelGrid

PixelGrid is a web component that provides an abstraction over a standard HTML5 Canvas. It makes the canvas behave like a 2D array (or matrix) of pixels..., where each pixel can be accessed or modified individually. This class is primarily designed for use in projects involving neural networks, machine learning and similar data-intensive applications.

The pixels of the canvas are stored in a 1D array in RGBA format, where each pixel is represented as an array of 4 integers (from 0 to 255) representing the red, green, blue and alpha (transparency) values respectively. The class provides methods for getting and setting the color of individual pixels. PixelGrid allows for low-level manipulation of image data, enabling complex image processing tasks. It is particularly suited for applications that need to treat image data as a vector or matrix of numerical values, such as neural network-based image classifiers, image filters, and other machine learning algorithms.

Note: This class assumes that the width and height of the canvas are specified at the time of instantiation, and does not currently support dynamically resizing the canvas. The canvas is assumed to be empty at initialization, and the initialize method must be called before the canvas can be used.

This class extends the HTMLElement and can be used directly in the HTML like this:

<pixel-grid width="400" height="300"></pixel-grid>