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 )
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("https://kinopio.club/logo.png")
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("https://kinopio.club/logo.png")
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
I’ve been experimenting with a new feature called gradient backgrounds. Basically it creates a random/pleasing background using multiple layers of simple gradient – based off ░ ░ ▓ █ .
Unlike the demo site, the gradient backgrounds in kinopio are static (so as not to distract) but you’d be able to change them (probably by picking from a few other randomly generated ones) in the space BackgroundPicker.
Some of the random bks are nicer than others, but the delta isn’t huge. Still tuning it tho.
It’s still WIP, doesn’t save and isn’t configurable yet, but you can try it yourself at Kinopio – Thinking Canvas
Some questions I’m still trying to figure out:
should this be the default (replacing the current squiggle bk)?
how should this feature work with the ability to set a custom background for all spaces. Should I add the ability to set a random gradient as the thing to use for new spaces?
Yes, this seems like a nice default many people would choose. The backgrounds are nice, and they add variety since they are random. My initial thought is that I would use this default personally.
I remember looking into grain to hide the color banding that can sometimes occur but I forget why I didn’t do it (maybe it made it look less sleek?). Do you have an example of the kind of grain/texture you were thinking of?
Here is just a quick example. I made a gradient in Pixelmator and threw on grain at size 15% and intensity 50%. Admittedly this probably isn’t a great example…
There’s a couple examples in this space: Kinopio – Thinking Canvas that show it well, specifically the maalavidaa one, but of course these are fine tuned and not autogenerated.
)
shipped