var threshold=40;

var newcol;

var comp;

var col;

var clickcount=0;

var desired;

​

​

function preload(){

  img= loadImage('convert.jpeg');

  img.loadPixels();

​

}

function setup() {

  createCanvas(400, 400);

  desired=color(0,0,0,255);

  image(img, 0,0);

  // col=color(100,100,100);

}

​

function draw() {

  //background(220);

  fill(desired);

  rect(0,0, 20,20)

}

​

​

function keyPressed()

{

//console.log(keyCode);  

switch(keyCode)

{

  case 49:desired=color(140,71,51,255);

    //console.log(col);

    break;

    case 50:desired=color(150,140,8,255);

    //console.log(col);

    break;

    case 51:desired=color(60,52,31,255);

    //console.log(col);

    break;

    case 52:desired=color(0,0,0,255);

    //console.log(col);

    break;

}

}

function mousePressed()

  {

​

    if((mouseX>=0) && (mouseX<=width) && (mouseY>=0) && (mouseY<=height))

    {

​

    col=img.get(mouseX, mouseY);

 fill(col);

    var r=red(col);

   var g=green(col);

   var b=blue(col);

  rect(0,0, 20, 20);  

    img.loadPixels();

  for(var i=0; i<img.pixels.length; i+=4)

      {

      if((abs(img.pixels[i]-r)<threshold) && (abs(img.pixels[i+1]-g)<threshold) && (abs(img.pixels[i+2]-b)<threshold))

        {

        //console.log("Match");

        img.pixels[i]=red(desired);

        img.pixels[i+1]=green(desired);

        img.pixels[i+2]=blue(desired);

        img.pixels[i+3]=255;

        //console.log(img.pixels[i]);

          //break;

        }

      }

    img.updatePixels();

    image(img, 0,0);

    //console.log(img.pixels[100]);

    //console.log(comp);

    //console.log(col)

    // console.log(img.pixels.length);

    }

  }