Public vals
155
png
@andreterron
Script
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. Usage Copy and paste the code below or fork one of the examples Click the 🔒 lock to make your val public Visualize your image in via its Express endpoint: Open the [ ⋮ ] menu > Endpoints > Copy express endpoint // 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: Other Examples @andreterron.gradient @andreterron.random_colors @andreterron.women_and_power