thirdddd oneee, we movingg fastt asf

we managed coloredddd images and simple integration of the whole concept (not cleanly working bc sizing is very not nicely done lol sorry)

nevertheless

i wanted to take time on explaining HOW i am rendering images and how and why its working!

How???!

pt 1. get the img

pretty self explaining…..
we load it with http get and then decode it with the golang image thing….ezzzz

pt 2. sizing

if we look a little into the future….i wanna integrate css…meaning sizes of the diffrent elements…and because of that…ill just say if width and height is given itll js be sized that way, BUT if either one is 0 this value gets calucated with the other and the ratio of the actual image to keep it sized correctly!

pt 3. the coloring and asciification of the image

finally smth interesting lol
this is the part in the scnd image

this part will be a little long but ill try to keep it short..

the first thing we need is some characters to represent different brightness levels:
const chars = “ .:=+*#%@”
the idea here is pretty simple: characters near the beginning are visually “lighter”, while characters near the end are more filling ig and therefore look darker.
yayy
then we basically iterate trough the entire image…but not in actual pixel size…but in calculated one how we need it…bc of we will have the image in lower resolution….
and then we just yoink that part and take its rgb valuessss
but here is the next problem…for the brightness we cannot just use the raw rgb things…we need to convert them to grayscale…because a maxed out green looks brighter than a maxed out blue! (prettyyy simple) now the not so simple part…for the converion i use a so called weighed avg…the same opencv uses….i did not understand a single thing written in those docs tho BUTTT i found a fancy blog post on rgb to grayscale convertion…soooo i just yoinked the formula!
so far so good…now just pic a corresponding char to the brightness print that…and you got yourself a niceeee image…but colors tho? now its grayscale
WAITT we already have the rgb colors?! so just use some random ass ansii codes (ive copied from stackoverflow) to tell each char to have the fitting rgb of the image…how simple is that
after we js tell the terminal to be normal again and we got ourselves a nice and clean ascii generator!

love it

final words for today

thx to anyone actually reading this <3 was really fun to build it and it takes me a huge step to my goal of a working browser in your terminal. i cannot promise that every devlog will be so detailed…and ofc this all did not happen in just these 52 min…most of it already happend last devlog…i just did not want to explain it back then lol