Finding the transparency and color of the overlapping between two Frames

Help and Feedback Scripting Support
,
#1

Hello! I’ll mainly put this topic into the scripting support because of the mathematics and coding that I need to acquire my desired results. I also couldn’t find any topics related to my question whatsoever.

I tend to overlay differently colored, translucent frames on top of another, which create an intersection. Let’s say we have two frames. Frame A has a color of RGB(255, 0, 0) and a transparency of 0.2, while Frame B has a color of RGB(0, 0, 255) and a transparency of 0.5. In this case, Frame B has the higher ZIndex. What I want to find here is the color and transparency of C, the intersection of the two frames.

image

At first, I thought that I could interpolate between the colors halfway to get the intersection’s color, and multiply the transparencies of the two frames. However, I will only get a miscolored result:

image

The basic formula I use also doesn’t take in account about what ZIndex is.

image

I’m entirely unfamiliar about all of the calculations related to this question, and I do not necessarily excel at this area of UI design. I hope the specifics are enough!

1 Like
#2

To get a color of intersection, you can just lerp it.
The function for lerp

local function Lerp(a, b, t)
    return a + (b-a) * t
end

and to get color

local function getColorbetween(frame1,frame2)
return Color3.new(Lerp(frame1.BackgroundColor3.R, frame2.BackgroundColor3.R, 0.5),Lerp(frame1.BackgroundColor3.G, frame2.BackgroundColor3.G, 0.5),Lerp(frame1.BackgroundColor3.B, frame2.BackgroundColor3.B, 0.5))
end

Also, to get transparency

local function getTransparencybetween(frame1,frame2)
    return frame1.BackgroundTransparency * frame2.BackgroundTransparency
end