click read more to make your browser upset (not clickbait)
how did i do this? why did i do this? click read more if you want. i promise it won't torture your browser.
it was very difficult getting this working on cohost because they sensibly have a limit to how large the request body of a post can be, and that limit is two hundred kill of bytes (roughly)
the idea came to me while i was talking to @konsti and i just went
so with this exchange i began working on my crime. i opened up jetbrains datalore because i have it free from my work and i don't want to fuck about with python install
turns out when you take an image and scale it (proportionally) to 400x400 and then generate html for every single one of the pixels it has, that generates a roughly 8mb file. i think that's more than the 200kb limit so i had to scale more. in the end i came up with the following code:
cohost crime dot py
from PIL import Image
from random import random
outl = []
px = 0
py = 0
scalefactor=4
scaleto=(31,31)
with Image.open("7.png") as pim:
pim.thumbnail(scaleto)
px = pim.width
py = pim.height
for y in range(0,pim.height):
for x in range(0,pim.width):
(r,g,b) = pim.getpixel((x,y))
clr = ""
if x == pim.width:
clr = 'clear:right;'
outl.append(f"<div style=\"height:{scalefactor}px;width:{scalefactor}px;float:left;display:inline-block;animation: {random()+random()}s ease {random()}s infinite normal none running bounce;background-color:rgb({r},{g},{b});{clr}\"></div>")
with open("out.txt", 'w') as fh:
fh.write(f"<div style=\"height:{py*scalefactor}px;width:{px*scalefactor}px;\">\n")
fh.write("\n".join(outl))
fh.write("</div>")
print(f"num pixels: {len(outl)}, strsize: {len(' '.join(outl))}")
scaling the image proportionally to 31x31 and then upscaling each pixel to 4x4 results in something vaguely comprehensible and the bounce animation turned out to be much less cursed than expected, but it sure is torturous on the browser !!!
