Playing with Pixels in JavaScript

Programmatically generate PNG images, pixel by pixel!

This val uses PNGLib and Val Town's Express API to create and host PNG images. It can be particularly useful if you want to dynamically generate an image – for any website or API that accepts png urls.

1. Copy and paste the code below or fork one of the examples
2. Click the 🔒 lock to make your val public
3. Visualize your image in via its Express endpoint: Open the [⋮] menu > Endpoints > Copy express endpoint

Create val
// Code from @andreterron.hostpng_example
let my_image = @andreterron.png({
  width: 256,
  height: 256,
}, (p) => {
  const w = p.width, h = p.height;
  // Create colors (red, green, blue, alpha)
  const white = p.color(255, 255, 255, 255); // PNG starts filled with the first color
  const black = p.color(0, 0, 0, 255);
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      // Get the buffer index for this position
      let index = p.index(x, y);
      // Set the color for the specific pixel
      p.buffer[index] = (x * y) / (w * h) * 24 % 2 >= 1 ? black : white;
    }
  }
});

Code from @andreterron.hostpng_example, and it generates this image:

Migrated from folder: A_Make_A_Val_Day/_23_07_13_PNG/png