https://editor.p5js.org/alannabean/sketches/Jqcy7XKwo

I’ve been noodling a little on this sketch over the past month — it’s super simple, but a tool I’m excited about using and expanding on. At any rate, it’s taught me about handling user input in p5, which I hadn’t played around with before.

It’s an image processor to convert pictures into pixel charts. I make small 2D video games and do colorwork knitting, so a nonzero amount of my creative life involves figuring out how to render (or just suggest) an object or idea in as few discrete blocks as possible.

A baby sweater I knitted for a friend last year

The colorwork chart I made to knit it, using a pixel art drawing program

The idea came about when Ranjani and I were working on the first pair project together, on pixel manipulation. We did the two-tone pixel mirror assignment alongside each other, and talked about some possible ways to extend it before ultimately trying out something else that better fit the assignment.

That initial experiment, using webcam input, was how I found out about using sliders + saving images in p5. I experimented with different step sizes on the slider, in order to constrain the “pixel” sizes, and found a range I liked.

I didn’t really think I would be using much webcam footage for pixel art purposes, though, and so wanted to figure out how to make it so I or an external user could upload any image — basically a DIY filter.

https://p5js.org/reference/p5/createFileInput/

The answer, like so many, was in the p5 documentation — there were simple and useful examples of how to prompt and handle uploaded images, which I basically lifted wholecloth into my existing sketch.

One part that tripped me up was writing a sort of nested callback function — the callback seemed to need its own callback — which wasn’t immediately clear and felt clunky. I also found myself getting tangled up in order of operations, like when and how to hide the “original” image and redraw the background so that you’d actually get what you expect in real time. And I thought I’d crashed my computer at one point due to a silly mistake I couldn’t diagnose for what felt like hours — incrementing the steps on the slider too close together (1 or 2 vs 10) so that each time it was adjusted, the entire machine had to do a bajillion more calculations and chugged to a halt.

There’s a lot here I would fix or else spend more time on. The aspect ratio is wonky, for one thing; it works best with horizontal images that aren’t too big or too small, and I know there are ways I could restrict and/or scale whatever input is submitted. Also: ugly. I’d also-also like to figure out if it’s possible to export images from p5 as file types other than PNG or otherwise convert them automatically — could I somehow get this into the Aseprite file format, for example, or a sprite strip? Right now the PNG is cool as a reference but not immediately usable as, say, a 2D game object or modifiable chart. Labeled + numbered axes is probably the easiest and most natural next step, especially in terms of colorwork.

What was most compelling about this exercise was how it made me view images — already collections of pixels, at a much more intricate scale than I tend to focus on. It’s one thing to look at an apple, or a picture of one, and draw its outline in a couple dozen squares — that’s careful arrangement, addition and subtraction, placement, selection, every choice important or at least with its own weight.

This tool is sort of the opposite: it overlays the abstraction on whatever you feed it. More specifically, it teases that abstraction out — it’s a reminder that every onscreen image is reducible to a set of numbers, and that those numbers can be tweaked and toggled.

Here is a screenshot of some code I took as I attempted to troubleshoot the sketch:

Here is the resulting pixel chart at 10x on the slider: