JS/color.js

   1 /*
   2 CANVAS_SIZEはdraw.jsにおいてグローバルに宣言しているためこのファイル内では宣言していない。
   3 */
   4
   5
   6 function color(){
   7         var canvas = document.getElementById("canvas");
   8         var context = canvas.getContext("2d");
   9
  10         var canvas2 = document.getElementById("canvas2");
  11         var context2 = canvas2.getContext("2d");
  12
  13         var canvas3 = document.getElementById("blend_canvas");
  14         var context3 = canvas3.getContext("2d");
  15         canvas3.width = CANVAS_SIZE;
  16     canvas3.height = CANVAS_SIZE;
  17
  18         var image = context.getImageData(0,0,canvas.width,canvas.height);
  19         var image2 = context2.getImageData(0,0,canvas2.width,canvas2.height);
  20         image3 = context3.createImageData(canvas3.width,canvas3.height);
  21
  22
  23         var image_rgba = image.data;
  24         var image2_rgba = image2.data;
  25         var image3_rgba = image3.data;
  26
  27         image_rgba = color_change(image_rgba, 1);
  28         image2_rgba = color_change(image2_rgba, 2);
  29         image3_rgba = make_new_Image(image_rgba, image2_rgba, image3_rgba);
  30
  31         context3.putImageData(image3, 0, 0);
  32 }
  33
  34
  35 //ピクセル配列の値(色情報)の書き換え
  36 function color_change(image_rgba, mode){
  37         var max, min;
  38         var R,G,B;
  39         var H;
  40         var before_color,after_color;
  41         var diff_color;
  42
  43         //canvas選択　1-display1のcanvas ,2-display2のcanvas
  44         if(mode == 1){
  45                         before_color = parseInt(form4.before_color.value);
  46                         after_color = parseInt(form4.after_color.value);
  47         }else if(mode == 2){
  48                         before_color = parseInt(form4.before_color2.value);
  49                         after_color = parseInt(form4.after_color2.value);
  50         }
  51         diff_color = after_color - before_color;
  52
  53         /**************RGB->HSV*******************************/
  54         for (var i = 0; i < image_rgba.length ; i++){
  55                 R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
  56                 G = image_rgba[i * 4 + 1] / 255;
  57                 B = image_rgba[i * 4 + 2] / 255;
  58
  59                 if(R == G && G == B){
  60                         continue;
  61                 }else if(R >= G && R >= B){
  62                         if(G >= B){
  63                                 max = R;
  64                                 min = B;
  65                         }else if(B > G){
  66                                 max = R;
  67                                 min = G;
  68                         }
  69                 }else if(G >= R && G >= B){
  70                         if(R >= B){
  71                                 max = G;
  72                                 min = B;
  73                         }else if(B > R){
  74                                 max = G;
  75                                 min = R;
  76                         }
  77                 }else if(B >= R && B >= G){
  78                         if(R >= G){
  79                                 max = B;
  80                                 min = G;
  81                         }else if(G > R){
  82                                 max = B;
  83                                 min = R;
  84                         }
  85                 }
  86
  87                 if(max == R){
  88                         H = 60 * (G - B)/(max - min);
  89                         H %= 360;
  90                 }else if(max == G){
  91                         H = (60 * (B - R) / (max - min)) + 120;
  92                         H %= 360;
  93                 }else if(max == B){
  94                         H = (60 * (R - G) / (max - min)) + 240;
  95                         H %= 360;
  96                 }
  97
  98                 /*****************color change*********************/
  99                 //値書き換え（色相変換）
 100                 if (before_color != 1 && after_color != 1){
 101                         if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
 102                                 H = H + 60 * diff_color;
 103                         }
 104                 }else if(before_color == 1 && after_color != 1){
 105                         if(H >= 0 && H < 30){
 106                                 H = H + 60 * diff_color;
 107                         }else if(H >= 330 && H <= 360){
 108                                 H = H - 60 * (6 - diff_color);
 109                         }
 110                 }else if(before_color != 1 && after_color == 1){
 111                         if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
 112                                 H = H + 60 * (6 + diff_color);
 113                         }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
 114                                 H = H + 60 * diff_color;
 115                         }
 116                 }else{
 117                         continue;
 118                 }
 119
 120                 /***********************HSV->RGB************************/
 121                 if(H >= 0 &&  H < 60){
 122                         R = max;
 123                         G = (H / 60) * (max - min) + min;
 124                         B = min;
 125                 }else if(H >= 60 && H < 120){
 126                         R = -((H-120) / 60) * (max - min) + min;
 127                         G = max;
 128                         B = min;
 129                 }else if(H >= 120 && H < 180){
 130                         R = min
 131                         G = max;
 132                         B = ((H-120) / 60) * (max - min) + min;
 133                 }else if(H >= 180 && H < 240){
 134                         R = min
 135                         G = -((H-240) / 60) * (max - min) + min;
 136                         B = max;
 137                 }else if(H >= 240 && H < 300){
 138                         R = ((H-240) / 60) * (max - min) + min;
 139                         G = min;
 140                         B = max;
 141                 }else if(H >= 300 && H <= 360){
 142                         R = max;
 143                         G = min;
 144                         B = (-(H-360) / 60) * (max - min) + min;
 145                 }else{
 146                         continue;
 147                 }
 148
 149                 image_rgba[i * 4] = R * 255;
 150                 image_rgba[i * 4 + 1] = G * 255;
 151                 image_rgba[i * 4 + 2] = B * 255;
 152
 153         }
 154         return image_rgba;
 155 }
 156
 157
 158 /*************create new image data*************/
 159         /*
 160         image_rgba[count * 4]           //R
 161         image_rgba[count * 4 + 1]       //G
 162         image_rgba[count * 4 + 2]       //B
 163         image_rgba[count * 4 + 3]       //A
 164
 165         image2_rgba[count * 4]          //R
 166         image2_rgba[count * 4 + 1]      //G
 167         image2_rgba[count * 4 + 2]      //B
 168         image2_rgba[count * 4 + 3]      //A
 169         */
 170 function make_new_Image(image_rgba, image2_rgba, image3_rgba){
 171
 172         var alpha = parseFloat(form4.alpha.value);
 173         var beta = parseFloat(form4.beta.value);
 174
 175         for(var count = 0; count < image3_rgba.length; count++){
 176                 image3_rgba[count * 4] = (image_rgba[count * 4] * alpha) + (image2_rgba[count * 4] * beta);
 177                 image3_rgba[count * 4 + 1] = (image_rgba[count * 4 + 1] * alpha) + (image2_rgba[count * 4 + 1] * beta);
 178                 image3_rgba[count * 4 + 2] = (image_rgba[count * 4 + 2] * alpha) + (image2_rgba[count * 4 + 2] * beta);
 179                 image3_rgba[count * 4 + 3] = 255;
 180         }
 181         return image3_rgba;
 182 }
 183
 184
 185
 186 function set_alpha(){
 187         var alpha = parseFloat(form4.alpha.value);
 188         var beta = parseFloat(form4.beta.value); //beta = 1 - alpha
 189
 190         var comp = 1.00 - alpha
 191         form4.beta.value = comp.toFixed(2);
 192 }
 193
 194 function set_beta(){
 195         var alpha = parseFloat(form4.alpha.value);
 196         var beta = parseFloat(form4.beta.value);
 197
 198         var comp = 1.00 - beta;
 199         form4.alpha.value = comp.toFixed(2);
 200 }
 201
 202