Koko-aio shader discussions and updates

And me, naive, was thinking it implemented just some kind of dumb non uniform scaling.

Tsk!

@Brandon8o, sorry, but if you want wider bgs, in koko-aio, i fear you have to modify them via gimp/photoshop/* :slight_smile:

3 Likes

Not sure how to do that, but in theory would it serve as a low cost workaround to get a similar effect for wider aspect ratios?

I could probably figure out how to make my own wider background, but where would I put it in the file system to have it all work?

@Duimon found that the max decreases 0.02 every time Contrast increases .1 and vise versa. So I updated the equation to take that into consideration.

(RGB - 128) * ((0.395 - (Contrast - 1.30) * (((3.75 - Contrast) * .125) + .00125)) / 128)

Edit: Found that the equation didn’t work on the “extremes” i.e. 0.71 and 2.00, so I took at least 50 screenshots to fix it. I had 0.71, 1.40 and 2.00 exact values to divide by 128 and still took a few hours. This change shows I was wrong it wasn’t decreasing 0.02 it was decreasing 0.0125 every .1.

Explanation for those interested.

(RGB - 128) * ((Default Max Color - Distance from Default Contrast * (((Max Contrast- Contrast) * Distance to go .01 * 100) + Distance to go .01)) / 128)

I have tested with 0.71 as well which works fine with the change. For those wondering math was my best subject in school.

Edit 2: Figured out the Multiplication values where essentially the (Max Contrast - Contrast) * .01 Steps from Max Contrast * 100 + .00125 .

2 Likes

The pixel aspect on screen will be 1:1, so you can just make it wider the way you want.

As for where to put the file, it is defined in the preset you are using; so either you open the slangp file and read the location from there or find the image manually in your filesystem.

What preset are you using?

I went ahead and created a github page for the converter. If anybody runs into a problem with it then let me know.

https://hgoda90.github.io/HEX-koko-aio-Color-Converter/

Edit: Tweaked the equation some more.

if(contrast < 1){
    $('#bezel-r').text((((hexToRgb(hex).r - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .1 + .105) + (contrast * .01 + .0105))) / 128)).toFixed(10));
	$('#bezel-g').text((((hexToRgb(hex).g - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .1 + .105) + (contrast * .01 + .0105))) / 128)).toFixed(10));
	$('#bezel-b').text((((hexToRgb(hex).b - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .01 + .055) + (contrast * .001 + .0055))) / 128)).toFixed(10));
}
else{
	$('#bezel-r').text((((hexToRgb(hex).r - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .01 + .105) + (contrast * .001 + .0105))) / 128)).toFixed(10));
	$('#bezel-g').text((((hexToRgb(hex).g - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .01 + .105) + (contrast * .001 + .0105))) / 128)).toFixed(10));
	$('#bezel-b').text((((hexToRgb(hex).b - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .001 + .055) + (contrast * .0001 + .0055))) / 128)).toFixed(10));
}

Made a lot of changes to the Converter github page. I also found that the best settings for Contrast is between .7 and 2.1 before everything goes crazy.

HEX to koko-aio Color Converter

2 Likes

I was using the SegaCD logo preset under Duimon additional presets. I opened it up and I see it references a graphics file, so I can go ahead and experiment with replacing that with a wider aspect background image to see what happens.

If I’m just doing my own background though, I suppose there would be no reason to have to use the Duimon version I was using, since I could probably just add a background to one of the regular Koko-aio bezels??

Another question I have concerns the ambilight presets. Is it possible to just swap a background image and have those still work? Or is it more complicated in terms of getting the lighting behavior to work a certain way with the image?

Yes, and yes to the other question too.
Also, extensive documentation is available in docs-ng.md text file.

I see. Would I replace background_over or background_under? I’m still a bit confused about the difference between these two

1 Like

background_over places the image over the bezel while background_under places the bezel over the image.

bg_under is the one you will want to go with for Duimon’s Graphics. bg_over is typically for images that are pre-cut ie The Bezel Project overlays.

1 Like

Thank you. I was able to modify the image and that’s ready, now the problem is that since the background file is in a root folder (I assume) on my phone it won’t let me change it…ugh. I tried seeing if I could change the directory to one I can modify and that just screwed everything up. Why can nothing be straightforward :_(

1 Like

I was able to figure out a workaround by copying file to the folder and removing original (it’s just it won’t let me rename files once they are withing the folder which is a weird but whatever) so now it’s working really well using Koko-aio Duimon ambilight preset, I just had to change the shader parameter to set image over content alpha channel to 0 instead of 1.

The original Duimon bezel also has a separate image just for the red lights on the mega drive console background image, and I’m curious if that could be incorporated with the ambilight preset in a way where the image layer that just has the two red lights is not affected by the ambilight affect. Is that doable? If so how would I do that?

1 Like

Glad you managed to make it; on my phine, first thing I do is to move all default paths to the eternal storage.

Cx file explorer is handy to access/backup retroarch.cfg too.

The led is something I not implemented, because the number of available texture slots is limited and I think we’ve just one free left I want to reserve for future use.

Ditto on other Android devices. I do this as soon as I fire up RA for the first time. (I create the needed folders before that.)

1 Like

What a nice typo :slight_smile: :slight_smile:

3 Likes

Cool to finally get it working with the wider aspect on the s22 screen. Looks great.

4 Likes

@kokoko3k when I was looking around I found a post on stackoverflow where somebody changed a black square to a hex color. It uses the CSS filter option and an algorithm to figure out the proper settings. I thought of koko-aio since it changes a gray bezel to color.

It seems a js approach is quite convenient over using just css filters here.

1 Like

I thought it was just an interesting topic because of the change from one color to another. A CSS filter would definitely not help in this instance.

1 Like

Not a direct Koko-Aio question here, but I was wondering if there exist any ambilight-likr presets that use the regular Mega Bezel reflection shaders. I see that the Duimon mega bezel graphics have different layers for the background and the LED and the decal logo, etc. It would be cool if there were ambilight-like versions that I could use on my regular desktop computer that have the cool ambilight effect for the background but that have the little led console lights as a separate layer that stays lit up regardless of the ambient light from the screen, to kind of mimic more of the real world look it would have. I realize this kind of layering isn’t really a feature in the koko-aio ambilight presets, but maybe those more more heavy duty mega bezel shaders can do stuff like that?