let new_img_flag= false;

//PRESS S to SAVE

​

​

function preload() {

  //default image is from Tamen De Gushi, one of my favorite webtoons/comics!

//after uploading the image, copy and paste the title here:

  worldImage = loadImage("Screen Shot 2021-07-23 at 4.14.32 PM.png");

​

}

​

​

​

function setup() {

​

  // noLoop();

new_img_flag= true;

​

​

​

}

​

​

​

function draw() {

​

​

  if (new_img_flag===true){

  console.log(new_img_flag)

  createCanvas(worldImage.width, worldImage.height);

​

  background(255);

  brightness_to_op(worldImage);

   }else{

​

     background(255);

     image(worldImage,0,0, width, height);

     console.log(new_img_flag)

​

   }

  log_color()

​

}

​

​

​

function brightness_to_op(worldImage) {

//loads pixels

  worldImage.loadPixels();

// for loop increasing by 4 (the image is a grid of r,g,b,a values) while x is less than 4*(image width*image hieght)

//this will change all of the pixels in the image

for (var x = 0; x < 4 * (worldImage.width * worldImage.height); x += 4) {

//get red,green, blue channels

var r = worldImage.pixels[x + 0];

var g = worldImage.pixels[x + 1];

var b = worldImage.pixels[x + 2];

var l = round(((0.3 * r) + (0.59 * g) + (0.11 * b)));

//set red,green and blue as 0, aka black

worldImage.pixels[x + 0] = 0;

worldImage.pixels[x + 1] = 0;

worldImage.pixels[x + 2] = 0;

//set the alpha as 255-luminance, brightness to opacity

worldImage.pixels[x + 3] = 255 - l;

​

}

//once converted, update the image pixels

worldImage.updatePixels();

//ignore smoothing

noSmooth();

//display image

image(worldImage, 0, 0, width, height);

//last but not least, change the flag to ensure the conversion only has to happen once:

new_img_flag= false;

}

​

​

​

function keyTyped() {

​

  if (key === 's') {

​

    worldImage.save('photo', 'png');

​

  }

​

}

​

​

​

function log_color() {

  push();

  fill(125);

  textSize(20);

  text(red(get(mouseX, mouseY)),mouseX, mouseY );

  text("Press S to save",width/2, 40 );

  pop();

​

  console.log("at this point the alpha is", get(mouseX, mouseY));

​

}