Sheets + Sublime for static pixel image mapping

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 :slight_smile:

1 Like