Was curious to try a “static” pixel based image. My kid’s school is running the Wizard of Oz this year, hence the Dorothy graphic.
Used sheets to easily map out my 20 x 50 grid, then copied the index numbers to Sublime, and used Sublimes text manipulation to convert to drop in “if index == x” statements.
Quick 1.5 minute screencast:
This is awesome! I want to make sure people who don’t watch the whole video get to see the final product:
Did you paste the big || condition list into the main render, or did you build a cached array once and index into it? I wonder if that’s a meaningful performance boost (though for a static image, maybe we don’t care).
// Build an array of hues and brightness values
hues = array(pixelCount)
values = array(pixelCount)
for (i = 0, i < pixelCount, i++) {
if (i == 240 || i == {big manual list of blue indices}) {
values[i] = 1
hues[i] = 0.66 // or whatever color you're painting
}
}
export function render(index) {
hsv(hues[index], 1, values[index])
}
Oh, that’s cool - didn’t realize you could do this approach. I was looking to see if “includes()” existed in the js subset - and when I realized it wasn’t I just stuck them in brute style. Thanks for the tip!
Could probably take it a step further and write an apps script in Google Sheets to grab the index and background color and create the array from that. For another day…
I love it!
Here’s another set of tricks you can leverage using array literals. You can use variables in array literals, so you could do something like this, creating a memory efficient nested array:
cBlue = [.666, 1, 1] //in HSV color space, but you could use RGB as well
cRed = [0, 1, 1]
// etc...
pixels = [cRed, cRed, cBlue, cBlue, etc...]
export function render(index) {
var color = pixels[index];
hsv(color[0], color[1], color[2])
}
I am trying something similar, but I get a syntax error with this on the
for (i = 0, i < pixelCount, i++)
statement I’m not sure why. Unexpected token.
Those commas ‘,’ are supposed to be semicolons ‘;’
These are the hazards of just typing in some code 