How can I do color cycling / palette cycling in MonoGame?

Windows
1

I am attempting to do color cycling in a shader. Basically, I have an indexed texture (Texture) that has 14 unique grayscale colors and is 16x16. It looks like this:

These are the 14 grayscale colors:

48, 48, 48
56, 56, 56
64, 64, 64
72, 72, 72
80, 80, 80
88, 88, 88
96, 96, 96
104, 104, 104
112, 112, 112
120, 120, 120
128, 128, 128
136, 136, 136
144, 144, 144
152, 152, 152

I then have a 14x1 dimension color map texture (ColorMap) that I’m trying to index based on the previous texture. It also has those 14 unique grayscale colors. It looks like this:

This is my code for rendering the textures:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace ColorShiftingTest
{
    public class Game1 : Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Texture2D colorMap;
        Texture2D texture;
        Effect shiftEffect;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);
            colorMap = Content.Load<Texture2D>("ColorMap");
            texture = Content.Load<Texture2D>("Texture");
            shiftEffect = Content.Load<Effect>("ColorShiftingEffect");
            shiftEffect.Parameters["ColorMapTexture"].SetValue(colorMap);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            var blendState = BlendState.NonPremultiplied;
            var samplerState = SamplerState.PointClamp;
            var renderSize = new Point(texture.Width * 8,
                                       texture.Height * 8);

            // rendered with no effect
            spriteBatch.Begin(SpriteSortMode.FrontToBack, blendState, samplerState);
            spriteBatch.Draw(texture, 
                             new Rectangle(Point.Zero, renderSize), 
                             Color.White);
            spriteBatch.End();

            // rendered with color shift effect
            spriteBatch.Begin(SpriteSortMode.FrontToBack, blendState, samplerState, 
                              null, null, shiftEffect);
            spriteBatch.Draw(texture, 
                             new Rectangle(new Point(130, 0), 
                             renderSize), 
                             Color.White);
            spriteBatch.End();

            base.Draw(gameTime);
        }
        
    }
}

And this is what my shader file ColorShiftingEffect looks like:

sampler2D Texture : register(s0);
sampler1D ColorMap = sampler_state
{
	Texture = (ColorMapTexture);
	Filter = POINT;
	AddressU = WRAP;
	AddressV = WRAP;
	AddressW = WRAP;
};

struct out_vertex
{
	float4 position : SV_POSITION;
	float4 color    : COLOR;
	float2 texCoord : TEXCOORD0;
};

float4 main_fragment(in out_vertex VAR) : SV_TARGET
{
	float4 c = tex2D(Texture, VAR.texCoord);
	float4 t;

	t = tex1D(ColorMap, c.r);

	return t;
}

technique T0
{
	pass P0
	{
		PixelShader = compile ps_5_0 main_fragment();
	}
}

This is the output that I get, when I am expecting them both to be the same:

UxIs0ki.png816×518 15.1 KB

Is anyone able to help me get this working properly? If I haven’t explained something let me know and I’ll expand on it. The end effect I’m looking to achieve is this (when the proper color map is created):

You can also see an example of what I’m trying to do here: http://www.effectgames.com/demos/canvascycle/

2

You’re using the value of the color as the texture coordinate?

This way - with your colors - coords are 6/32, 7/32, 8/32… You’ll want to get a range of 1 for the colors after mapping so you use the whole colormap (since 0 is left of the colormap and 1 is the right) so you can either do a linear remap of c.r in the above snippet or change the first texture to use the full color range (0/14, 1/14, 2/14, …, 13/14. I’m not sure if this will work on the edges, so you might want to sample in the middle of a color in the colormap, then the values are 1/28, 3/28, …, 27/28). Then you can add Displacement * 1/14 to the value you sample te colormap at to do the shifting where displacement is an extern uniform in the range [0, 14[ (this works because the sampler of the colormap wraps around).