The following code fragment provides a method to draw a heart shape within given rectangle region.

//
//        (x,y) - the top left corner of the surrounding rectangle
// width,height - the size of the surrounding rectangle
function drawHeart(canvas,x,y,width,height){
   var x0 = x + 0.5 * width, y0 = y + 0.3 * height;
   var x1 = x + 0.1 * width, y1 = y + 0.0 * height;
   var x2 = x + 0.0 * width, y2 = y + 0.6 * height;
   var x3 = x + 0.5 * width, y3 = y + 0.9 * height;
   var x4 = x + 1.0 * width, y4 = y + 0.6 * height;
   var x5 = x + 0.9 * width, y5 = y + 0.0 * height;

   var ctx = canvas.getContext("2d");
   ctx.save();

   ctx.beginPath();

   ctx.moveTo(x0,y0);
   ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);
   ctx.bezierCurveTo(x4,y4,x5,y5,x0,y0);

   ctx.stroke();

   ctx.restore();
}

To see this code in action, you can check out http://www.jswidget.com/ipaint.html

Image thresholding is the easiest method of image segmentation. It simply divides the image pixels into two categories. One contains the pixels with value less than the threshold and the other contains the pixels with value greater than the threshold. Though pick the right threshold value is difficult, there are many proposed methods on how to pick the right threshold value, such as using mean or median value, automatic thresholding algorithm, histogram valley point etc. In Adode Photoshop, it displays the luminosity histogram to help a user to pick the desired value. iPaintPro does the same as Adobe Photoshop.

The algorithm is very simple:

Lnew     = 0 if Lcur < threshold value

            = 255 if Lcur >= threshold value

Lcur is the calculated luminosity value of given (r, g, b) pixel using ITU-R BT.601 image grayscale method. (See my other post: http://jswidget.com/blog/2011/02/20/image-grayscale-itu-recommend-standards/).

Below is the screenshot taken from iPaintPro when doing image thresholding:

threshold


invert_complement

Invert and complement are two operations in digital image processing to get negative film effect. They are all to get the complement color from one color with a little different algorithm.

Invert operation is simple. We simply use 255 minus value in each channel. The result will be the negative film: COLORinvert = 255 – COLOR. From the formular, we can see that the invert operation actually make:

Inverted Color Table
Color     Inverted Color
Black
White
Red
Cyan
Green
Magenta
Blue
Yellow

In Color Theroy, this is actually also refered as complement color for RGB color model. Red, green, blue are primary colors. Cyan, magenta and yellow are secondary colors.

Complement is actually using this formular:

COLORcomplement = MAX(ColorR,ColorG,ColorB) + MIN(ColorR,ColorG,ColorB) – COLOR

This different between invert and complement is that invert not only change the hue value, the saturation and lightness are also changed. But the complement operation does not change the lightness.

For example,

Complement(Color(0,0,0)) = MAX(0,0,0) + MIN(0,0,0) – Color(0,0,0) = Color(0,0,0).
This means complement of black is still black

Complement(Color(255,255,255)) = MAX(255,255,255) + MIN(255,255,255) – Color(255,255,255) = Color(255,255,255)
This means complement of white is still white.

You can see the two different effects performed within iPainPro 1.0:


photo_shop_hist

Histograms are used in almost every image processing application. Often we will provide histogram in 4 different channels: Luminosity, Red, Green and Blue channel. By inspecting the historam of a image through different channels, an experienced artist can tell what the defects of the image is or what should do to fix those image defects. The following sample is the screebshot taken from Adobe Photoshop:


Computing the histogram is actually very easy. Since each channel can at most have 256 (0-255) levels. All we need do is to loop through the image data, and accumulate the number of pixels for each level as I did in the following code fragment. This code fragment is excerpted/modified from iPaintPro source code.

            //
            // each of the array will have 256 elements
            var hist = {l:[],r:[],g:[],b:[]};

            //
            // initialie the histogram statistics to 0 for all four channels
            for ( i = 0; i < 256; i ++ ){
               hist.l[i] = hist.r[i] = hist.g[i] = hist.b[i] = 0;
            }

            for ( i = 0; i < data.length; i += 4 ){
               var r = data[i], g = data[i+1], b = data[i+2];
               //
               // Calculate the luminance value of the pixel
               var l = Math.round(0.3 * r + 0.59 * g + 0.11 * b);

               //
               // compute the histogram value for each level
               hist.l[l] ++;
               hist.r[r] ++;
               hist.g[g] ++;
               hist.b[b] ++;
            }

Now you can try the live demo below or download the source code for the following demo in ZIP format.

ss_main

iPaintPro is designed to be an online Adobe Photoshop alternative application. It will be implemented using pure HTML5 <canvas> element and javascript. The interface experience will be as close as possible to Adobe Photoshop application so that current experienced photoshop users do not have to start a new learning curve. Not only that since most of today’s online photo processing applications are flash-based, they can not be accessed by devices made by Apple Inc., such as iPad, iPhone and iPod Touch etc, but iPaintPro, purely HTML5 based application, will be fully supported by those devices and most of mainstream browsers.

iPaintPro is still under development, however you can peek at the interface through the screenshot below:

ss_grayscale_image

International Telecommunication Union,ITU, recommends several standards to construct luminance from colored channel such as ITU-R BT.601, ITU-R BT.601 with Gamma Correction 2.2, ITU/EBU 3213, and ITU-R BT.709 etc.


ITU-R BT.601

In RECOMMENDATION ITU-R BT.601-6 section 2.5.2, the ITU recommends the construction of luminance and colour-difference signals as follows:
L = 0.299 * R + 0.587 * G + 0.114 * B.

Adobe Photoshop uses this standard and actually using the following algorithm:
L = 0.3 * R + 0.59 * G + o.11 * B

   function grayscale_bt601(red,green,blue){
      var l = Math.round(0.299 * red + 0.587 * green + 0.114 * blue);
      return {red:l,green:l,blue:l};
   }
   

ITU-R BT.601 Gamma Correction 2.2

L = (0.299 * R2.2 + 0.587 * G2.2 + 0.114 * B2.2)1/2.2

   function grayscale_bt601_gamma(red,green,blue){
      var l = Math.round(Math.pow(0.299 * Math.pow(red, 2.2) +
                                  0.587 * Math.pow(green, 2.2) +
                                  0.114 * Math.pow(blue, 2.2), 1 / 2.2));
      return {red:l,green:l,blue:l};
   }
   

ITU-R BT.709

Another recommendation came from ITU-R BT.709 standard. It defines the derivation of luminance signals using algorithm:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
The original document can be downloaded from Here: BT.709 : Parameter values for the HDTV standards for production and international programme exchange

   function grayscale_bt709(red,green,blue){
      var l = Math.round(0.213 * red + 0.715 * green + 0.072 * blue);
      return {red:l,green:l,blue:l};
   }
   

ITU/EBU 3213

ITU/EBU is defined as standard for European PAL television systems, it recommends the algorithm as:
L = 0.222 * R + 0.707 * G + 0.071 * B

   function grayscale_itu3213(red,green,blue){
      var l = Math.round(0.222 * red + 0.707 * green + 0.071 * blue);
      return {red:l,green:l,blue:l};
   }
   

You can download the source code here:
Source Code (.zip)

ss_grayscale_image

Except using single channel from colored image as the grayscale luminance value,applying arithmetical algorithm to red, green and blue channel are also seen in image processing program. The most common methods used are max, min, average of the red, green and blue channel values as grayed value.




Using maximum of red, green, blue

   function grayscale_max(red,green,blue){
      var l = Math.max(red,green,blue);
      return {red:l,green:l,blue:l};
   }
   

Using minimum of red, green, blue

   function grayscale_min(red,green,blue){
      var l = Math.min(red,green,blue);
      return {red:l,green:l,blue:l};
   }
   

Using average of red, green, blue

   function grayscale_avg(red,green,blue){
      var l = Math.avg(red + green + blue);
      return {red:l,green:l,blue:l};
   }
   

Using average of maximum of red, green, blue and minimum of red, green, blue

   function grayscale_avg_min_max(red,green,blue){
      var l = Math.round((Math.max(red, green, blue) +
                          Math.min(red, green, blue)) / 2);
      return {red:l,green:l,blue:l};
   }
   

You can download the source code here:
Source Code (.zip)

ss_main

A grayscale digital image is an image that carries only intensity information. A common stratege to convert a colored image to grayscale image is to match the luminance of the grayscale image to the luminance of the color image. Many algorithms have been developed to accomplish this. In this post, you will see different methods that has different effects when converting an colored the image to grayscale image. However, using which methods is really up to your selection.

Using single channel. Colored image contains 4 channels: red, green, blue and alpha.
This method simply use the value from one of the r, g, b channel of the color image to be the value of the grayscale image. This method is used in Adobe Photoshop color channel and iPaintPro properties window.


iPaintPro Channel Property using Single Channel Grayscale method


Using red channel

   function grayscale_red(red,green,blue){
      return {red:red,green:red,blue:red};
   }
   

Using green channel

   function grayscale_blue(red,green,blue){
      return {red:green,green:green,blue:green};
   }
   

Using blue channel

   function grayscale_blue(red,green,blue){
      return {red:blue,green:blue,blue:blue};
   }
   

You can download the source code here:
Source Code (.zip)

© 2011 iPaintPro Suffusion theme by Sayontan Sinha