let canvas = createCanvas(500,500)

  img = createImage(width, height)

  canvas.position(0, 20);

  colorMode(HSB, 255)

  canvas.drop(gotFile);

  textSize(24);

  textAlign(CENTER);

  text('Drag an image file onto the canvas.', width / 2, height / 2);

​

  button1 = createButton('convert to anaglyph');

  button1.position(0, height+20);

  button1.mousePressed(makeAnaglyph);

  button2 = createButton('save');

  button2.position(0, height+40);

  button2.mousePressed(saveimg);

}

​

function draw() {

  noSmooth()

  image(img, 0, 0,width, (img.height*width)/img.width);

  button1.position(0, 20+(img.height*width)/img.width)

  button2.position(0, 40+(img.height*width)/img.width)

}

​

function makeAnaglyph() {

  img.loadPixels();

  for (var y = 0; y < img.height; y++) {

    for (var x = 0; x < img.width; x++) {

      pix = img.get(x, y);

      //check for black pixels 

      if (pix[0] === 0 ){ 

        val = random(100);

        if (val < 10 ){

          c = selectred();

        }else{

          c = selectblue();

        }

        //check for red pixels

      } else if (pix[0] === 237){

        c = selectred();

        //all the rest are white pixels

      } else {

        val = random(100);

        if (val < 70 ){

          c = selectred();

        }else{

          c = selectblue();

        }

      }

      img.set(x, y, c);

    }

  }

  img.updatePixels();

}

​

function selectred(){

  h = random([random(55), random(200,255)])

  s = random()*8;

  if(s>1) {s=255;}

  return color(h, s, 255);

}

​

function selectblue(){

  h = random(70,150);

  return color(h, 255, 255);

}

​

function saveimg() {

  img.save('anaglyph', 'png')

}

​

function gotFile(file) {

  // If it's an image file

  if (file.type === 'image') {

    // Create an image DOM element but don't show it

    clear()

    img = loadImage(file.data);

  } else {

    console.log('Not an image file!');

  }

}