float3 CalculateBezierPoint(float t, float3 p1, float3 p2) { //see: http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/ // We don't need point 0 or 3 as they are 0,0 and 1,1 respectively. float u = 1.0f - t; float tt = t*t; float uu = u*u; float uuu = uu * u; float ttt = tt * t; float3 p = uuu * float3(0,0,1); //first term p += 3 * uu * t * p1; //second term p += 3 * u * tt * p2; //third term p += ttt * float3(1,1,1); //fourth term return p; } float3 CalculateBezierColour(float3 colour, float3 p1, float3 p2) { // Keep z at 1. p1.z = 1.0; p2.z = 1.0; // X-axis represents orignal value, y represents transformed. r = CalculateBezierPoint(colour.r, p1, p2).y; g = CalculateBezierPoint(colour.g, p1, p2).y; b = CalculateBezierPoint(colour.b, p2, p2).y; return float3(r, g, b); } float3 CustomPass(float4 position : SV_Position, float2 texcoord : TEXCOORD0) : SV_Target { float3 colorInput = tex2D(s0, texcoord).rgb; // http://cubic-bezier.com/#0,.50,1,.50 float amount = 0.5; float3 bez1 = float3(0.0, amount , 1.0); float3 bez2 = float3(1.0, 1.0 - amount, 1.0); return CalculateBezierColour(colorInput, bez1, bez2); }
So as you know, I've spent quite some time trying to figure out various equations (of 2D lines) to turn into functions to modify the colours of a game, namely Siege - to make it easier to see. In these graphs the x axis represents the original colour and the y axis represents the modified colour. However, this creates quite an interesting problem, what if the equation of the line involves imaginary numbers (i.e is an expression of y in terms of x that when inverted uses imaginary numbers)? Well you can try it but it won't work. Besides, it becomes quite annoying to try and recalculate the algorithm if you modify the line too much. So I have come up with a solution: Why not use a Bézier curve to calculate the colour, after all, the curve is easier on the graph and in the program. So after doing a little research on: devmag.org.za/2011/04/05/bzier-curves-a-tutorial/ and some graphing websites (desmos and cubic-bezier) I took the code of the first site and modified it to look like this:
You will note that when the variable amount is at 0.5, it becomes the same shader as my previous one for siege (without the linear interpolation). Below is an animation of the Binding of Isaac: Rebirth and a graph representing the colour change. The values range from 0 to 1 with steps of 0.05.
Let it be known that I don't know why it starts so blue because those values should make it the same as the original colour. Spooky.
0 Comments
Leave a Reply. |
AuthorHi there, the name's Matthew Jenkinson and I'm currently working at Firesprite. In my spare time I work on programming projects like you see here. Archives
March 2021
CategoriesLinks to each effect in order:
|