colorfull shirts

app/Game/Client/GameObjects/Doll.js

@@ -2,10 +2,11 @@ define([
 	"Game/Core/GameObjects/Doll",
     "Game/Config/Settings",
     "Lib/Utilities/NotificationCenter",
-    "Lib/Utilities/Exception"
+    "Lib/Utilities/Exception",
+    "Lib/Utilities/ColorConverter"
 ],
  
-function (Parent, Settings, Nc, Exception) {
+function (Parent, Settings, Nc, Exception, ColorConverter) {
  
     function Doll(physicsEngine, uid, player) {      
         this.animationDef = {
@@ -28,6 +29,10 @@ function (Parent, Settings, Nc, Exception) {
         this.headMesh = null;
         this.holdingArmMesh = null;
 
+        var converter = new ColorConverter();
+        this.primaryColor = converter.getColorByName(player.getNickname());
+        console.log(this.primaryColor.toString(16))
+
         Parent.call(this, physicsEngine, uid, player);
     }
 
@@ -66,6 +71,17 @@ function (Parent, Settings, Nc, Exception) {
 
     Doll.prototype.createMesh = function() {
 
+        var self = this;
+
+        var setShirtColor = function (mesh) {
+            Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'colorRangeReplace', {
+                minColor: 0x3b4a31,
+                maxColor: 0x657f54,
+                newColor: self.primaryColor,
+                brightnessOffset: 0.56
+            });
+        }
+
         // Body
 
         var padF = function(n) {
@@ -98,6 +114,8 @@ function (Parent, Settings, Nc, Exception) {
                 var callback = function(mesh) {
                     self.animatedMeshesContainer[arm][key] = mesh;
                     Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+
+                    setShirtColor(mesh);
                 };
 
                 Nc.trigger(Nc.ns.client.view.animatedMesh.create, texturePaths, callback, { 
@@ -119,11 +137,6 @@ function (Parent, Settings, Nc, Exception) {
         var callback = function (mesh) {
             self.headMesh = mesh;
             Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
-
-            Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'pixelate', {
-                sizeX: 4,
-                sizeY: 4
-            });
         }
         Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
             pivot: {
@@ -134,10 +147,14 @@ function (Parent, Settings, Nc, Exception) {
             height: 12
         });
 
+        // Holding arm
+
         texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/holdingArm.png";
         var callback = function (mesh) {
             self.holdingArmMesh = mesh;
             Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+
+            setShirtColor(mesh);
         }
         Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
             visible: false,

app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js

@@ -0,0 +1,89 @@
+define([
+    "Lib/Vendor/Pixi"
+],
+ 
+function (PIXI) {
+
+    var Parent = PIXI.AbstractFilter;
+ 
+    function ColorRangeReplaceFilter() {
+        Parent.call(this);
+
+        this.passes = [this];
+
+        // set the uniforms
+        
+        this.uniforms = {
+            minColor: {type: '3fv', value: [0,0,0]},
+            maxColor: {type: '3fv', value: [0,0,0]},
+            newColor: {type: '3fv', value: [0,0,0]},
+            brightnessOffset: {type: '1f', value: 0}
+        };
+
+        this.fragmentSrc = [
+            'precision mediump float;',
+            'varying vec2 vTextureCoord;',
+            'varying vec4 vColor;',
+            'uniform sampler2D uSampler;',
+            'uniform vec3 minColor;',
+            'uniform vec3 maxColor;',
+            'uniform vec3 newColor;',
+            'uniform float brightnessOffset;',
+
+            'void main(void) {',
+            '   vec4 pixel = texture2D(uSampler, vTextureCoord);',
+            '   if(pixel.x >= minColor.x && pixel.y >= minColor.y && pixel.z >= minColor.z',
+            '      && pixel.w == 1.0',
+            '      && pixel.x <= maxColor.x && pixel.y <= maxColor.y && pixel.z <= maxColor.z) {',
+
+            '         pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), 1.0);', // desaturate to gray
+            '         pixel.rgb += brightnessOffset;',
+            '         pixel.rgb *= newColor;',
+            '   }',
+            '   gl_FragColor = pixel;',
+            '}'
+        ];
+    }
+
+    ColorRangeReplaceFilter.prototype = Object.create(Parent.prototype);
+    ColorRangeReplaceFilter.prototype.constructor = ColorRangeReplaceFilter;
+
+    
+    Object.defineProperty(ColorRangeReplaceFilter.prototype, 'minColor', {
+        get: function() {
+            return PIXI.rgb2hex(this.uniforms.minColor.value);
+        },
+        set: function(value) {
+            this.uniforms.minColor.value = PIXI.hex2rgb(value);
+        }
+    });
+    
+    Object.defineProperty(ColorRangeReplaceFilter.prototype, 'maxColor', {
+        get: function() {
+            return PIXI.rgb2hex(this.uniforms.maxColor.value);
+        },
+        set: function(value) {
+            this.uniforms.maxColor.value = PIXI.hex2rgb(value);
+        }
+    });
+
+    Object.defineProperty(ColorRangeReplaceFilter.prototype, 'newColor', {
+        get: function() {
+            return PIXI.rgb2hex(this.uniforms.newColor.value);
+        },
+        set: function(value) {
+            this.uniforms.newColor.value = PIXI.hex2rgb(value);
+        }
+    });
+
+    Object.defineProperty(ColorRangeReplaceFilter.prototype, 'brightnessOffset', {
+        get: function() {
+            return this.uniforms.brightnessOffset.value;
+        },
+        set: function(value) {
+            this.uniforms.brightnessOffset.value = value;
+        }
+    });
+
+    return ColorRangeReplaceFilter;
+});

app/Game/Client/View/Views/PixiView.js

@@ -2,75 +2,21 @@ define([
     "Game/Client/View/Views/AbstractView",
     "Game/Client/View/DomController", 
     "Lib/Vendor/Pixi",
+    "Game/Client/View/Views/Pixi/ColorRangeReplaceFilter",
     "Game/Config/Settings",
     "Lib/Utilities/NotificationCenter",
     "Lib/Utilities/Exception"
 ], 
 
-function (Parent, DomController, PIXI, Settings, Nc, Exception) {
+function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception) {
     
     var AVAILABLE_MESH_FILTERS = {
         "blur": PIXI.BlurFilter,
         "desaturate": PIXI.GrayFilter,
         "pixelate": PIXI.PixelateFilter,
-        "colorRangeReplace": ColorRangeReplace,
+        "colorRangeReplace": ColorRangeReplaceFilter,
     };
 
-    var ColorRangeReplace = function() {
-        PIXI.AbstractFilter.call( this );
-
-        this.passes = [this];
-
-        // set the uniforms
-        this.uniforms = {
-            matrix: {type: 'mat4', value: [1,0,0,0,
-                                           0,1,0,0,
-                                           0,0,1,0,
-                                           0,0,0,1]},
-            gray: {type: '1f', value: 1},
-            shirtColor: {type: '4fv', value: [1,1,1,1]}
-        };
-
-        this.fragmentSrc = [
-            'precision mediump float;',
-            'varying vec2 vTextureCoord;',
-            'varying vec4 vColor;',
-            'uniform float invert;',
-            'uniform mat4 matrix;',
-            'uniform sampler2D uSampler;',
-            'uniform float gray;',
-            'uniform vec4 shirtColor;',
-
-            'void main(void) {',
-            '   vec4 pixel = texture2D(uSampler, vTextureCoord);',
-            '   vec3 min_color = vec3(49.0/256.0, 64.0/256.0, 39.0/256.0);',
-            '   vec3 max_color = vec3(106.0/256.0, 131.0/256.0, 90.0/256.0);',
-            '   if(pixel.x >= min_color.x && pixel.y >= min_color.y && pixel.z >= min_color.z',
-            '      &&',
-            '      pixel.x <= max_color.x && pixel.y <= max_color.y && pixel.z <= max_color.z) {',
-            '         pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), gray);',
-            '         pixel = pixel * shirtColor;',
-            '   }',
-            '   gl_FragColor = pixel;',
-
-          //  '   gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
-          //  '   gl_FragColor = gl_FragColor;',
-            '}'
-        ];
-    };
-/*
-    ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-    ColorMatrixFilter.prototype.constructor = ColorMatrixFilter;
-
-    Object.defineProperty(ColorMatrixFilter.prototype, 'matrix', {
-        get: function() {
-            return this.uniforms.matrix.value;
-        },
-        set: function(value) {
-            this.uniforms.matrix.value = value;
-        }
-    });
-*/
     function PixiView () {
 
         Parent.call(this);
@@ -196,9 +142,10 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) {
                 break;
 
             case 'colorRangeReplace':
-                if (options.min) filter.min = options.min;
+                if (options.minColor) filter.minColor = options.minColor;
-                if (options.max) filter.max = options.max;
+                if (options.maxColor) filter.maxColor = options.maxColor;
-                if (options.new) filter.new = options.new;
+                if (options.newColor) filter.newColor = options.newColor;
+                if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset;
                 break;
 
             case 'pixelate':
@@ -221,8 +168,6 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) {
 
         filters.push(filter);
         mesh.filters = filters;
-
-        console.log(mesh.filters)
     };
 
     PixiView.prototype.removeFilter = function(mesh, filterName) {
@@ -456,6 +401,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) {
     };
 
     PixiView.prototype.onZoomIn = function() {
+        console.log("onZoomIn")
         if(this.currentZoom + Settings.ZOOM_FACTOR <= Settings.ZOOM_MAX) {
             this.currentZoom += Settings.ZOOM_FACTOR;
         }

app/Lib/Utilities/ColorConverter.js

@@ -0,0 +1,41 @@
+define([
+],
+ 
+function () {
+ 
+    function ColorConverter() {
+    	var palette = []; 
+	    var element, color;
+	    var start = 4;
+	    var step = 2;
+        var max = 6;
+	    for(var r=start; r<max*step+start; r+=step) {
+	        for(var g=start; g<max*step+start; g+=step) {
+	            for(var b=start; b<max*step+start; b+=step) {
+	                
+	                color = r.toString(16) 
+	                		+ r.toString(16) 
+	                		+ g.toString(16) 
+	                		+ g.toString(16)
+	                		+ b.toString(16)
+	                		+ b.toString(16);
+	                
+	                palette.push(parseInt(color, 16));
+	            }
+	        }
+	    }
+
+	    this.palette = palette;
+    }
+ 
+    ColorConverter.prototype.getColorByName = function(name) {
+	    var ac = 0;  
+		for(var c = 0; c < name.length; c++) {
+			ac += name.charCodeAt(c);
+		}
+		return this.palette[ac * 9 % this.palette.length];
+    }
+ 
+    return ColorConverter;
+ 
+});