Last post, I went over how to get data from the webcam and display it on a texture.

Now I’ll go over how I used some color utilities I found online to shift the color from the webcam around the color wheel. In order to move a color around the color wheel, I needed to convert the color from RGB (Red, green, blue) to HSB (Hue, saturation, brightness). I can’t remember where I found this, but below is a C# version of HSBColor that I had originally found in javascript:

public struct HSBColor
{
	public float h;
	public float s;
	public float b;
	public float a;
	
	public HSBColor(float h, float s, float b, float a)
	{
		this.h = h;
		this.s = s;
		this.b = b;
		this.a = a;
	}
	
	public HSBColor(float h, float s, float b)
	{
		this.h = h;
		this.s = s;
		this.b = b;
		this.a = 1f;
	}
	
	public HSBColor(Color col)
	{
		HSBColor temp = FromColor(col);
		h = temp.h;
		s = temp.s;
		b = temp.b;
		a = temp.a;
	}
	
	public static HSBColor FromColor(Color color)
	{
		HSBColor ret = new HSBColor(0f, 0f, 0f, color.a);
		
		float r = color.r;
		float g = color.g;
		float b = color.b;
		
		float max = Mathf.Max(r, Mathf.Max(g, b));
		
		if (max <= 0)
		{
			return ret;
		}
		
		float min = Mathf.Min(r, Mathf.Min(g, b));
		float dif = max - min;
		
		if (max > min)
		{
			if (g == max)
			{
				ret.h = (b - r) / dif * 60f + 120f;
			}
			else if (b == max)
			{
				ret.h = (r - g) / dif * 60f + 240f;
			}
			else if (b > g)
			{
				ret.h = (g - b) / dif * 60f + 360f;
			}
			else
			{
				ret.h = (g - b) / dif * 60f;
			}
			if (ret.h < 0)
			{
				ret.h = ret.h + 360f;
			}
		}
		else
		{
			ret.h = 0;
		}
		
		ret.h *= 1f / 360f;
		ret.s = (dif / max) * 1f;
		ret.b = max;
		
		return ret;
	}
	
	public static Color ToColor(HSBColor hsbColor)
	{
		float r = hsbColor.b;
		float g = hsbColor.b;
		float b = hsbColor.b;
		if (hsbColor.s != 0)
		{
			float max = hsbColor.b;
			float dif = hsbColor.b * hsbColor.s;
			float min = hsbColor.b - dif;
			
			float h = hsbColor.h * 360f;
			
			if (h < 60f)
			{
				r = max;
				g = h * dif / 60f + min;
				b = min;
			}
			else if (h < 120f)
			{
				r = -(h - 120f) * dif / 60f + min;
				g = max;
				b = min;
			}
			else if (h < 180f)
			{
				r = min;
				g = max;
				b = (h - 120f) * dif / 60f + min;
			}
			else if (h < 240f)
			{
				r = min;
				g = -(h - 240f) * dif / 60f + min;
				b = max;
			}
			else if (h < 300f)
			{
				r = (h - 240f) * dif / 60f + min;
				g = min;
				b = max;
			}
			else if (h <= 360f)
			{
				r = max;
				g = min;
				b = -(h - 360f) * dif / 60 + min;
			}
			else
			{
				r = 0;
				g = 0;
				b = 0;
			}
		}
		
		return new Color(Mathf.Clamp01(r),Mathf.Clamp01(g),Mathf.Clamp01(b),hsbColor.a);
	}
	
	public Color ToColor()
	{
		return ToColor(this);
	}
	
	public override string ToString()
	{
		return "H:" + h + " S:" + s + " B:" + b;
	}
	
	public static HSBColor Lerp(HSBColor a, HSBColor b, float t)
	{
		float h,s;
		
		//check special case black (color.b==0): interpolate neither hue nor saturation!
		//check special case grey (color.s==0): don't interpolate hue!
		if(a.b==0){
			h=b.h;
			s=b.s;
		}else if(b.b==0){
			h=a.h;
			s=a.s;
		}else{
			if(a.s==0){
				h=b.h;
			}else if(b.s==0){
				h=a.h;
			}else{
				// works around bug with LerpAngle
				float angle = Mathf.LerpAngle(a.h * 360f, b.h * 360f, t);
				while (angle < 0f)
					angle += 360f;
				while (angle > 360f)
					angle -= 360f;
				h=angle/360f;
			}
			s=Mathf.Lerp(a.s,b.s,t);
		}
		return new HSBColor(h, s, Mathf.Lerp(a.b, b.b, t), Mathf.Lerp(a.a, b.a, t));
	}
	

}

The other half of this is a set of color utilities that I found. It’s just a set of static methods which allow you to shift a color around the color wheel by a certain percentage:

public class ColorUtils {

	public static Color GetComplimentaryColor(Color rgb) {
		return GetShiftedColor (rgb, .5f);
	}

	public static Color GetShiftedColor(Color rgb, float shift){
		var hsbColor = new HSBColor (rgb);
		
		var shiftedHue = HueShift (hsbColor.h, shift);
		hsbColor.h = shiftedHue;

		return hsbColor.ToColor ();
	}

	public static Color SetValues(Color color, float? saturation, float? brightness){
		var c = color;
		if (saturation.HasValue) {
			c = SetSaturation(c, saturation.Value);
		}
		if (brightness.HasValue) {
			c = SetBrightness(c, brightness.Value);
		}
		return c;
	}

	public static Color SetSaturation(Color color, float saturation){

		var hsb = new HSBColor (color);
		hsb.s = saturation;
		return hsb.ToColor ();
	}

	public static Color SetBrightness(Color color, float brightness){
		
		var hsb = new HSBColor (color);
		hsb.b = brightness;
		return hsb.ToColor ();
	}


	static float HueShift(float h, float shiftAmount) 
	{ 
		h+=shiftAmount; 
		while (h>=360.0f) h-=360.0f; 
		while (h<0.0f) h+=360.0f; 
		return h; 
	}

}

The last part is a custom playmaker FSM action. The webcam color is set to a playmaker variable earlier in the FSM, but this script basically applies the webcam color, as well as any complimentary colors to any object in the scene which has a particular tag. The object must have particular materials attached to it called “Color1”, “Color2”, and “Color3”.

[ActionCategory("Custom")]
	public class SetColorsAction : FsmStateAction {

		[RequiredField]
		[UIHint(UIHint.Variable)]
		public FsmColor colorVariable;

		private GameObject[] _objectsToSet;

		public FsmFloat saturation;
		public FsmFloat brightness;

		[Tooltip("Repeat every frame.")]
		public bool everyFrame;


		public override void Reset()
		{
			_objectsToSet = GameObject.FindGameObjectsWithTag ("DynamicMaterials");
			base.Reset();
			colorVariable = new FsmColor{UseVariable=true};
			saturation = .3f;
			brightness = .5f;
		}
		
		public override void OnEnter()
		{
			DoSetColors ();
			if (!everyFrame) {
				Debug.Log ("test");
				
				Finish();
			}
		}

		public override void OnUpdate(){
			DoSetColors ();
		}

		public void DoSetColors(){
			foreach(var go in _objectsToSet){
				if(go.renderer.isVisible){
					foreach (var m in go.renderer.materials) {
						
						if(m.name.Contains("Color1")){
							var originalColor = m.GetColor("_Color");
							var c = ColorUtils.SetValues(colorVariable.Value, saturation.Value, brightness.Value);
							
							
						}
						
						if(m.name.Contains("Color2")){
							var c = ColorUtils.GetShiftedColor(colorVariable.Value, .33f);
							c = ColorUtils.SetValues(c, saturation.Value, brightness.Value);
							m.SetColor("_Color", c);
							
						}
						
						if(m.name.Contains("Color3")){
							var c = ColorUtils.GetShiftedColor(colorVariable.Value, .66f);
							c = ColorUtils.SetValues(c, saturation.Value, brightness.Value);
							m.SetColor("_Colour", c);
							
						}
					}
				}

			}

		}
	}

The Game Jam was a great experience, and while I’m not sure using a webcam to paint objects is really viable for a game, I ended up learning a lot in the process. Let me know in the comments if you have any questions, or any good ideas for how this sort of thing could be used in a game!