Changing color of unity concentric circle shader

Question

Trying to change the colors of this shader from black and white to a multitude of colors, is there any way one would be able to do this? I'm pretty new to unity and trying my best with what I've got. If possible I'd like to be able to do at least 3 different colors, but I understand if that's not really feasible with what's made here. If so, could someone potentially point me towards something similar that I can try using instead?

http://www.shaderslab.com/demo-01---concentric-circles.html

Here's the code from the shader itself.

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/ConcentricCircles" {
    Properties {
        _OrigineX ("PosX Origine", Range(0,1)) = 0.5
        _OrigineY ("PosY Origine", Range(0,1)) = 0.5
        _Speed ("Speed", Range(-100,100)) = 60.0
        _CircleNbr ("Circle quantity", Range(10,1000)) = 60.0
    }
 
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #pragma target 3.0
 
            float _OrigineX;
            float _OrigineY;
            float _Speed;
            float _CircleNbr;
 
            struct vertexInput {
                float4 vertex : POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            struct fragmentInput{
                float4 position : SV_POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            fragmentInput vert(vertexInput i){
                fragmentInput o;
                o.position = UnityObjectToClipPos (i.vertex);
                o.texcoord0 = i.texcoord0;
                return o;
            }
 
            fixed4 frag(fragmentInput i) : SV_Target {
                fixed4 color;
                float distanceToCenter;
                float time = _Time.x * _Speed; 
                           
                float xdist = _OrigineX - i.texcoord0.x;
                float ydist = _OrigineY - i.texcoord0.y;
               
                distanceToCenter = (xdist * xdist + ydist * ydist) * _CircleNbr;
               
                color = sin(distanceToCenter + time);
                return color;
            }
            ENDCG
        }
    }
}

Answer 1

I am not great at shaders, but I can help out a bit. You would want to add a _Color property. The value can be changed in code, or in the inspector. There are different ways to apply the color either by summation or multiplication. Both options produce different results. It will only replace the white portion, or add highlights around the white. The reason for the black portions is due to how the sin function works.

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Test" {
    Properties {
        _OrigineX ("PosX Origine", Range(0,1)) = 0.5
        _OrigineY ("PosY Origine", Range(0,1)) = 0.5
        _Speed ("Speed", Range(-100,100)) = 60.0
        _CircleNbr ("Circle quantity", Range(10,1000)) = 60.0
        _Color ("Main Color", Color) = (1,1,1,1)
    }
 
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #pragma target 3.0
 
            float _OrigineX;
            float _OrigineY;
            float _Speed;
            float _CircleNbr;
            fixed4 _Color;
 
            struct vertexInput {
                float4 vertex : POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            struct fragmentInput{
                float4 position : SV_POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            fragmentInput vert(vertexInput i){
                fragmentInput o;
                o.position = UnityObjectToClipPos (i.vertex);
                o.texcoord0 = i.texcoord0;
                return o;
            }

            
 
            fixed4 frag(fragmentInput i) : SV_Target {
                fixed4 color;
                float distanceToCenter;
                float time = _Time.x * _Speed;
                           
                float xdist = _OrigineX - i.texcoord0.x;
                float ydist = _OrigineY - i.texcoord0.y;
               
                distanceToCenter = (xdist * xdist + ydist * ydist) * _CircleNbr;
               
                color = sin(distanceToCenter + time) + _Color;
                return color;
            }
            ENDCG
        }
    }
}

Replace the line color = sin(distanceToCenter + time) + _Color; with color = sin(distanceToCenter + time) * _Color; to see the other option. The left image is with additive while the right is multiplicative. I set the color in the editor to green. You can also try changing the sin function to another trig function which produces different results as well.

Edit: This line is pretty cool color = sin(distanceToCenter + time) + cos(distanceToCenter + time) * _Color;

Edit 2: As per request, here is one way to get multiple different colors. As the sin function is being used, the values are between [-1, 1], so at times this would equal 0, or (0,0,0,1) which is black. You can make if conditionals to catch ranges of these values then directly set the color. Here is how I approach it.

Shader "Custom/Test" {
    Properties {
        _OrigineX ("PosX Origine", Range(0,1)) = 0.5
        _OrigineY ("PosY Origine", Range(0,1)) = 0.5
        _Speed ("Speed", Range(-100,100)) = 60.0
        _CircleNbr ("Circle quantity", Range(10,1000)) = 60.0
        _Color1 ("Color 1", Color) = (1,1,1,1)
        _Color2 ("Color 2", Color) = (1,1,1,1)
        _Color3 ("Color 3", Color) = (1,1,1,1)
    }
 
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #pragma target 3.0
 
            float _OrigineX;
            float _OrigineY;
            float _Speed;
            float _CircleNbr;
            fixed4 _Color1;
            fixed4 _Color2;
            fixed4 _Color3;
 
            struct vertexInput {
                float4 vertex : POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            struct fragmentInput{
                float4 position : SV_POSITION;
                float4 texcoord0 : TEXCOORD0;
            };
 
            fragmentInput vert(vertexInput i){
                fragmentInput o;
                o.position = UnityObjectToClipPos (i.vertex);
                o.texcoord0 = i.texcoord0;
                return o;
            }

            
 
            fixed4 frag(fragmentInput i) : SV_Target {
                fixed4 color;
                float distanceToCenter;
                float time = _Time.x * _Speed;
                           
                float xdist = _OrigineX - i.texcoord0.x;
                float ydist = _OrigineY - i.texcoord0.y;
               
                distanceToCenter = (xdist * xdist + ydist * ydist) * _CircleNbr;

                float preColor = sin(distanceToCenter + time);

                if(preColor < -0.8)
                {
                    color = _Color1;
                }
                else if(preColor < 0.2)
                {
                    color = _Color2;
                }
                else
                {
                    color = _Color3;
                }
               
                return color;
            }
            ENDCG
        }
    }
}

And my result

Just assign the three colors you would like in the inspector. You can edit the code to change how many thresholds there are, or what the thresholds are.