let canvasHeight;

​

let img;

let img2;

let img3;

let resizeScale = 0.3;

​

let threshold = 0.5; // 0 to 1

​

function preload(){

  //img = loadImage("https://picsum.photos/400/400");

  img = loadImage("https://cdn.discordapp.com/attachments/1103583600965853215/1197408549102424194/IMG20240118151312.jpg?ex=65bb289c&is=65a8b39c&hm=def6bcddd5424e96c6ef2c69a2c2a2d28b71edb6f79553e9657825304990187f&")

  console.log("hiii");

  console.log('SOURCEIMAGES/source (' + 1 + ').jpg');

}

​

function setup() {

  canvasWidth = img.width * resizeScale;

  canvasHeight= img.height * resizeScale

  let canvas = createCanvas(canvasWidth, canvasHeight);

  //createCanvas(img.width / 2, img.height / 2);

  //image(img, 0, 0);

  img2 = createImage(img.width, img.height);

  generateImage();

  canvas.drop(file)

}

​

function file()

{

  img.remove();

  img = createImg(file.data, '');

  image(img, 0, 0);

}

​

let inputDirection = "across";

let inputDirectionA = "up";

let inputDirectionB = "across";

​

let updateImage = true;

​

function draw() {

  let previousThreshold = threshold;

  if (inputDirection == inputDirectionA)

    threshold = 1 / canvasHeight * (mouseY);  

  else

    threshold = 1 / canvasWidth * (mouseX);  

  //console.log(threshold)

  if (keyIsDown(39))

  {

    if (!rightHeld){

      rightHeld = true;

      console.log("blup");

    //img = loadImage("https://cdn.discordapp.com/attachments/780968233456893954/1206440102134550548/IMG20240212132115.jpg?ex=65dc03e6&is=65c98ee6&hm=a64a891f62d0ddfa6c9d3b3cb14683f695a77c759ac1caff6faac01fc81d8c14&");  

     img = loadImage("https://media.discordapp.net/attachments/775079306899488797/1203004589511680091/SmoochySnoutCard.png?ex=65e1f954&is=65cf8454&hm=b24d83f65309cf3209d54c7ece373a35609349e95b0013a431c0e0320299ceee&format=webp&quality=lossless&width=662&height=662&") 

    canvasWidth = img.width * resizeScale;

    canvasHeight= img.height * resizeScale;

    resizeCanvas(canvasWidth, canvasHeight);

    }

    //img2 = createImage(img.width, img.height);

  }

  else{

    rightHeld = false;

  }

  /*

  else if (keyIsDown(37))

  {

    if (sourceImageArrayIndex - 1 > 0){

        sourceImageArrayIndex --;

    }

    else{

        sourceImageArrayIndex = sourceImageCount;

    }

​

    img = loadImage(imgArray(sourceImageArrayIndex));

    img2.remove();

    img2 = createImage(img.width, img.height);

  }

  */

  if (previousThreshold != threshold && updateImage){

    background(255);

    generateImage()

  }

  if (keyIsDown(SHIFT))

  {

    if (!tabHeld)

    {

      tabHeld = true;

      if (inputDirection == inputDirectionA)

        inputDirection = inputDirectionB

      else

        inputDirection = inputDirectionA

      //img = loadImage("https://picsum.photos/400");

    }

  }

  else{

    tabHeld = false;

  }

  if (keyIsDown(32))

  {

    if (!spaceHeld)

    {

      spaceHeld = true;

      if (updateImage)

      {

        updateImage = false;

        //clear() // this *should* give you a transparent image when you hit enter

        generateImage();

      }

      else

        updateImage = true;

    }

  }

  else{

    spaceHeld = false;

  }

  if (keyIsDown(ENTER))

  {

    if (!enterHeld)

    {

      enterHeld = true;

      img2.save();

    }

  }

  else{

    enterHeld = false;

  }

}

​

function generateImage(){ 

  console.log("generating image");

  img.loadPixels();

  img2.loadPixels();

  for (let i = 0; i < img.width * img.height; i ++)

  {

    let pixelRedCoordinate = i * 4; // green is pixelRedCoordinate + 1, then blue the alpha

    let pixelValue = (img.pixels[pixelRedCoordinate] + img.pixels[pixelRedCoordinate + 1] + img.pixels[pixelRedCoordinate + 2]) / 3;

    //console.log(pixelRedCoordinate);

    if (pixelValue > threshold * 255)

    {

      img2.pixels[pixelRedCoordinate] = 255;

      img2.pixels[pixelRedCoordinate + 1] = 255;

      img2.pixels[pixelRedCoordinate + 2] = 255;

      img2.pixels[pixelRedCoordinate + 3] = 0;

    }

    else

    {

      img2.pixels[pixelRedCoordinate] = 0;

      img2.pixels[pixelRedCoordinate + 1] = 0;

      img2.pixels[pixelRedCoordinate + 2] = 0;

      img2.pixels[pixelRedCoordinate + 3] = 255;

    }

    /* // makes a greyscale image

    img2.pixels[pixelRedCoordinate] = pixelValue;

    img2.pixels[pixelRedCoordinate + 1] = pixelValue;

    img2.pixels[pixelRedCoordinate + 2] = pixelValue;

    img2.pixels[pixelRedCoordinate + 3] = img.pixels[pixelRedCoordinate + 3];

    */

  }

  img2.updatePixels();

  image(img2, 0, 0);

  img3 = createImage(img.width * resizeScale, img.height * resizeScale);

  img3.copy(img2, 0, 0, img2.width, img2.height, 0, 0, img3.width, img3.height);

  //image(img3, 0, 0);

}