Generated Backgrounds

(copied from discord)

What if there were a some number of “generated” backgrounds that are kind of like shaders instead of pictures - each generated background could be a hand-crafted function from coordinate to color.

So for instance one might look something like this:

But the point is that it is not an image: it could continue generating things indefinitely in both directions as the user expands their view… and it wouldn’t repeat either - each section background would be different visually from each other section.

The whole point of doing this would be so you could navigate around a kinopio space and you might remember what the background looks like - it’s constant between refreshes - so from a quick glance at the background you would know where you are.

It wouldn’t be limited to gradients either - like a generated village or something could work so long as each screen-sized subregion is visually distinctive.

(If there were a way to make your own such backgrounds I would definitely do that :laughing:)


what data or inputs would the background pattern/colors be generated from? or is it full random?

in the short-term, there might be other websites that generate backgrounds to custom sizes that you could use and drop into kinopio

1 Like

In my mind a generated background would be a deterministic function that takes the page id and a coordinate on the page and returns a color. So the only source of randomness would be the page id, which could be used as a seed to generate things.

But the function could use an image internally if it wanted to, so this would be a function that always generates a tiled background of a particular image:

function myGeneratedBackground(_page_id, x, y) {
  let myImage = getImageUrl("")
  return my_image.colorAt(x % myImage.width() , y % myImage.height())

Or maybe if people want to do some work up front it should be more “a function that takes a page id and returns a mapping from coordinate to color”:

function myGeneratedBackground(_page_id) {
  // optionally do work here
  let myImage = getImageUrl("")
  return ((x, y) => {
    // calculate color
    return my_image.colorAt(x % myImage.width() , y % myImage.height())

This is definitely better here so it doesn’t get the image once per pixel :laughing: