mix animal color and emotion

src/css/moodforest.css

@@ -0,0 +1,7 @@
+
+.animalBackground{
+  padding-top:100%;
+  background-repeat:no-repeat;
+  background-position:center;
+  background-size:contain;
+}

src/index.html

@@ -13,6 +13,8 @@
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
 
+  <link href="css/moodforest.css" rel="stylesheet">
+
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
@@ -37,6 +39,8 @@ <h1 class="text-center">Mood Forest</h1>
       <div class="col" id="alerts"></div>
     </div>
 
+    <canvas width="1000" height="1000" id="mandala_canvas"  style="display: none;"></canvas>
+
     <div class="row" id="animal" style="display: none;">
       <h1>Animal</h1>
       <div id="animal_selected"></div>
@@ -75,6 +79,14 @@ <h1>Animal</h1>
   <script src="js/localcontract.js"></script>
   <script src="js/contract.js"></script>
   <script src="js/app.js"></script>
+  <script src="js/mandala.js"></script>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="row">
+          Images CC from <a href="http://www.supercoloring.com/coloring-pages/arts-culture/mandala/animal-mandalas">http://www.supercoloring.com/coloring-pages/arts-culture/mandala/animal-mandalas</a>
+      </div>
+  </div>
 </body>
 
 </html>

src/js/app.js

@@ -1,5 +1,7 @@
 var json_data;
 
+var image_id = 0;
+
 App = {
   animals: null,
   web3Provider: null,
@@ -28,49 +30,68 @@ App = {
   },
 
   displayItem: function(parent, method, argument, picture) {
-    /*
     $("\
-          <div class=\"col-sm-6 col-md-4 col-lg-3\">\
-            <div class=\"panel panel-default panel-pet\">\
-              <div class=\"panel-body\" onclick=\"App."+ method + "(" + argument + ")\">\
-                <img class=\"img-rounded img-center img-responsive\" src=\"" + picture + "\" data-holder-rendered=\"true\">\
+            <div class=\"col-sm-6 col-md-4 col-lg-3\">\
+              <div class=\"panel panel-default panel-pet\">\
+                <div class=\"panel-body\"" + (method ? (" onclick=\"App." + method + "(" + argument + ")") : "") + " \">\
+                  <div style=\"background-image:url('" + picture + "');\"  class=\"animalBackground\"></div>\
+                </div>\
               </div>\
             </div>\
-          </div>\
-        </div>").appendTo(parent);
-        */
+          </div>").appendTo(parent);
+  },
+
+  displayItemColor: function(parent, method, argument, color) {
     $("\
             <div class=\"col-sm-6 col-md-4 col-lg-3\">\
               <div class=\"panel panel-default panel-pet\">\
                 <div class=\"panel-body\"" + (method ? (" onclick=\"App." + method + "(" + argument + ")") : "") + " \">\
-                  <div style=\"background-image:url('" + picture + "');padding-top:100%;background-repeat:no-repeat;background-position:center;background-size:contain;\"></div>\
+                  <div style=\"background-color:" + color + ";\"  class=\"animalBackground\"></div>\
                 </div>\
               </div>\
             </div>\
           </div>").appendTo(parent);
   },
 
-  displayChoseAnimal: function(parent, animal, color, mood) {
-    if (animal) {
-      App.displayItem(parent, "selectAnimal", animal, App.animals[animal - 1]["picture"]);
-    }
-    if (color) {
-      App.displayItem(parent, "selectColor", color, App.colors[color - 1]["picture"]);
-    }
-    if (mood) {
-      App.displayItem(parent, "selectMood", mood, App.moods[mood - 1]["picture"]);
-    }
+  displayItemCaneva: function(parent, method, argument, picture, colors, mood) {
+    $("\
+            <div class=\"col-sm-6 col-md-4 col-lg-3\">\
+              <div class=\"panel panel-default panel-pet\">\
+                <div class=\"panel-body\"" + (method ? (" onclick=\"App." + method + "(" + argument + ")") : "") + " \">\
+                  <div id=\"image_id_" + image_id + "\" class=\"animalBackground\"></div>\
+                </div>\
+              </div>\
+            </div>\
+          </div>").appendTo(parent);
+    Mandala.init(picture, "image_id_" + image_id, colors, mood);
+    image_id += 1;
   },
 
-  displayAnimal: function(parent, animal, color, mood) {
+  displayAnimal: function(parent, animal, color, mood, selectFunction, selectValue) {
     if (animal) {
-      App.displayItem(parent, null, animal, App.animals[animal - 1]["picture"]);
-    }
-    if (color) {
-      App.displayItem(parent, null, color, App.colors[color - 1]["picture"]);
-    }
-    if (mood) {
-      App.displayItem(parent, null, mood, App.moods[mood - 1]["picture"]);
+      let colors = null;
+      if (color) {
+        colors = [
+          [App.colors[color - 1].rgb.r, App.colors[color - 1].rgb.g, App.colors[color - 1].rgb.b]
+        ];
+        if (mood) {
+          App.displayItemCaneva(parent, selectFunction, mood, App.animals[animal - 1]["picture"], colors, App.moods[mood - 1]["picture"]);
+        } else {
+          App.displayItemCaneva(parent, selectFunction, color, App.animals[animal - 1]["picture"], colors, null);
+        }
+      } else {
+        colors = [
+          [255, 255, 255]
+        ];
+        App.displayItemCaneva(parent, selectFunction, animal, App.animals[animal - 1]["picture"], colors, null);
+      }
+    } else {
+      if (color) {
+        App.displayItemColor(parent, selectFunction, color, "#" + App.colors[color - 1].hex);
+      }
+      if (mood) {
+        App.displayItem(parent, selectFunction, mood, App.moods[mood - 1]["picture"]);
+      }
     }
   },
 
@@ -176,18 +197,18 @@ App = {
       $("#chose_animal").empty();
       if (!App.selected["animal"]) {
         for (i = 0; i < App.animals.length; i++) {
-          App.displayChoseAnimal($("#chose_animal"), i + 1, 0, 0);
+          App.displayAnimal($("#chose_animal"), i + 1, 0, 0, "selectAnimal");
         }
       } else if (!App.selected["color"]) {
         for (i = 0; i < App.colors.length; i++) {
-          App.displayChoseAnimal($("#chose_animal"), 0, i + 1, 0);
+          App.displayAnimal($("#chose_animal"), App.selected["animal"], i + 1, 0, "selectColor");
         }
       } else if (!App.selected["mood"]) {
         for (i = 0; i < App.moods.length; i++) {
-          App.displayChoseAnimal($("#chose_animal"), 0, 0, i + 1);
+          App.displayAnimal($("#chose_animal"), App.selected["animal"], App.selected["color"], i + 1, "selectMood");
         }
       } else {
-        App.displayChoseAnimal($("#chose_animal"), App.selected["animal"], App.selected["color"], App.selected["mood"]);
+        App.displayAnimal($("#chose_animal"), App.selected["animal"], App.selected["color"], App.selected["mood"], null);
         if (!addr_animal) {
           $('#choseButton').show();
         } else {
@@ -201,6 +222,9 @@ App = {
     if (name == "animal") {
       $("#animal_selected").empty();
       App.displayAnimal($("#animal_selected"), window.localStorage.getItem('animal'), window.localStorage.getItem('color'), window.localStorage.getItem('mood'));
+      console.log($("#animal_selected").children()[0]);
+      $($("#animal_selected").children()[0]).removeClass();
+      $($("#animal_selected").children()[0]).addClass("cel");
       $('#animal').show();
     } else {
       $('#animal').hide();

src/js/mandala.js

@@ -0,0 +1,136 @@
+Mandala = {
+  ctx: null,
+  imageData: null,
+  data: null,
+
+  draw: function(ctx, width, height, img, colors) {
+
+    ctx.drawImage(img, 0, 0, width, height);
+    //img.style.display = 'none';
+    console.log("canvas:" + width + "::" + height);
+    imageData = ctx.getImageData(0, 0, width, height);
+    Mandala.color(ctx, imageData, width, height, colors);
+  },
+
+  drawMood: function(ctx, width, height, mood_img) {
+    ctx.drawImage(mood_img, width * 80 / 100, height * 80 / 100, width * 20 / 100, height * 20 / 100);
+  },
+
+  init: function(image_url, destination_id, colors, mood_url) {
+    let canvas = $("#mandala_canvas").get(0)
+    let ctx = canvas.getContext('2d');
+    let width = canvas.width;
+    let height = canvas.height;
+
+    var img = new Image();
+    img.onload = function() {
+      Mandala.draw(ctx, width, height, img, colors);
+      if (mood_url) {
+        var mood_img = new Image();
+        mood_img.src = mood_url; //'images/manadala/tiger-mandala-coloring-page.png';
+        mood_img.onload = function() {
+          Mandala.drawMood(ctx, width, height, mood_img);
+          $("#" + destination_id).css("background-image", "url(" + canvas.toDataURL() + ")");
+        };
+      } else {
+        $("#" + destination_id).css("background-image", "url(" + canvas.toDataURL() + ")");
+      }
+    };
+    img.src = image_url;
+
+
+
+
+  },
+
+  colorFieldAdd: function(data2, i, next) {
+    ret = 0;
+    if (i > 0 && i < data2.length) {
+      if (data2[i] == 1) {
+        next.push(i);
+      }
+    }
+  },
+
+  colorField: function(data, data2, width, height, i, color_r, color_g, color_b, color_a) {
+    next = [i];
+    /*
+    if (i == 0) {
+      Mandala.colorFieldAdd(data2, i + (width - 1), next);
+      Mandala.colorFieldAdd(data2, data2.length - 1, next);
+      Mandala.colorFieldAdd(data2, data2.length - 1 - (width - 1), next);
+    }
+    */
+    let j = 0;
+    while (j < next.length) {
+      i = next[j];
+      if (data2[i] == 1) {
+        data2[i] = 0;
+        data[i * 4] = color_r;
+        data[(i * 4) + 1] = color_g;
+        data[(i * 4) + 2] = color_b;
+        data[(i * 4) + 3] = color_a;
+        Mandala.colorFieldAdd(data2, i - width, next);
+        Mandala.colorFieldAdd(data2, i + width, next);
+        if ((i + 1) % width != 0) {
+          Mandala.colorFieldAdd(data2, i + 1, next);
+        }
+        if (i % width != 0) {
+          Mandala.colorFieldAdd(data2, i - 1, next);
+        }
+      }
+      j++;
+    }
+  },
+
+  color: function(ctx, imageData, width, height, colors) {
+    let data = imageData.data;
+    let data2 = Array(data.length / 4);
+    for (var i = 0; i < data2.length; i += 1) {
+      if (data[i * 4] < 128 && data[i * 4 + 1] < 128 && data[i * 4 + 2] < 128) {
+        data2[i] = 0;
+        data[i * 4] = 0;
+        data[i * 4 + 1] = 0;
+        data[i * 4 + 2] = 0;
+      } else {
+        data2[i] = 1;
+      }
+    }
+    for (var i = 0; i < data2.length; i += 1) {
+      if (data2[i] == 1) {
+        let color_r = 255;
+        let color_g = 255;
+        let color_b = 255;
+        if (colors.length) {
+          color = 0;
+
+          color = Math.floor(Math.random() * colors.length);
+          color_r = colors[color][0] + 20 - Math.floor(Math.random() * 40);
+          color_g = colors[color][1] + 20 - Math.floor(Math.random() * 40);
+          color_b = colors[color][2] + 20 - Math.floor(Math.random() * 40);
+          if (color_r > 255) color_r = 255;
+          if (color_g > 255) color_g = 255;
+          if (color_b > 255) color_b = 255;
+          if (color_r < 0) color_r = 0;
+          if (color_g < 0) color_g = 0;
+          if (color_b < 0) color_b = 0;
+
+        } else {
+          color_r = Math.floor(Math.random() * 255);
+          color_g = Math.floor(Math.random() * 255);
+          color_b = Math.floor(Math.random() * 255);
+        }
+        //transparent background
+        let color_a = 255;
+        /*
+        if (i == 0) {
+          color_a = 0;
+        }
+        */
+        Mandala.colorField(data, data2, width, height, i, color_r, color_g, color_b, color_a);
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+  },
+
+}