P5.js - Detect corner points within an image (JPG)-CodePudding

I would like to detect the corner points (Top Left and Bottom Right) of the image or the "painted" area. for this purpose I want to use the javascript library p5.js. The two functions findTop() and findBottom() should recognize the corner points.

The starting point is the sketch of a cat (Figure 1). At the end the two corner points of the drawing (see figure 2) are to be recognized.

figure 1 - cat

figure 2 - Detect Corners

The procedure is as follows: With the two For loops the image array (here pixels []) is run through. For each pixel it should be checked if the content is black and if yes, compared if it is the smallest x and y values (x1|y1). For control the respective pixel pair is colored pink. The second findBottom() function works similarly. Unfortunately I am not able to find the correct coordinates, but I don't know what I am doing wrong...

Any help would be greatly appreciated :-)

let img;
let x1, y1;
let x2, y2;

let wid = 720;
let hei = 400;

function setup() {
  createCanvas(wid, hei);
  img = loadImage('cat.jpg'); 
  pixelDensity(1);
}


function draw() {
  image(img, 0, 0);
  loadPixels();
  findTop();
  findBottom();
  ColorizePixel(x1,y1);
  ColorizePixel(x2,y2);
  updatePixels();
}

function findTop() {
  x1=wid;
  y1=hei;
      
      for(let y=0; y<width; y  ) {
        for(let x=0; x<height; x  ) {
       
          let index = (x   y * width) * 4;

          if(pixels[index] < 255 && x < x1){
            x1 = x;
          }
                    
          if(pixels[index] < 255 && y < y1){
          y1 = y;
          }
  }
}
}

function findBottom() {
  x2=0;
  y2=0;
      
      for(let y=0; y<width; y  ) {
        for(let x=0; x<height; x  ) {
       
          let index = (x   y * width) * 4;
          
          if(pixels[index] < 255 && x > x2){
            x2 = x;
          }
                    
          if(pixels[index] < 255 && y > y2){
            y2 = y;
          }      
  } 
}
}

function ColorizePixel(x,y){
  let chosenPixel = (y * width   x) * 4;
  pixels[chosenPixel]=255;
  pixels[chosenPixel 1]=0;
  pixels[chosenPixel 2]=255;
  pixels[chosenPixel 3]=255;
}

Result of running that code

Edit #2

let img;
let x1, y1,x2, y2;

let newImage;

let wid = 720;
let hei = 400;

function setup() {
  createCanvas(wid, hei);
  img = loadImage('cat.jpg'); // Load the image
  pixelDensity(1);
}


function draw() {
  image(img, 0, 0);
  loadPixels();
  findTop();
  findBottom();
  ColorizePixel(x1,y1);
  ColorizePixel(x2 ,y2);
  updatePixels();
  
}


function findTop() {
  
  x1=720;
  y1=400;
      
      for(let y=0; y<height; y  ) {
        for(let x=0; x<width; x  ) {
       
          let index = (x   y * width) * 4;
          
          if(pixels[index] < 122 && x < x1){
            x1 = x;
          }
          
          if(pixels[index] < 122 && y < y1){
          y1 = y;
          }
  }
}
}


function findBottom() {
  x2=0;
  y2=0;
      
      for(let y=0; y<height; y  ) {
        for(let x=0; x<width; x  ) {
       
          let index = (x   y * width) * 4;
          
          if(pixels[index] < 122 && x > x2){
            x2 = x;
          }
                    
          if(pixels[index] < 122 && y > y2){
            y2 = y;
          }      
  } 
}
}

//Farebe Pixel Pink ein
function ColorizePixel(x,y){
  let chosenPixel = (y * width   x) * 4;
  pixels[chosenPixel]=255;
  pixels[chosenPixel 1]=0;
  pixels[chosenPixel 2]=255;
  pixels[chosenPixel 3]=255;
}

Result of running that code #2

CodePudding user response：

You need to fill the background with white opaque color before drawing the image and before detecting the corners:

function draw() {
  background(255, 255, 255);
  image(img, 0, 0);

  // [...]
}

CodePudding user response：

I see two issues.

the loops

Your loops run y to width instead of height, and x to height instead of width. I didn't spot that earlier.

JPEG

You are working with a JPEG file. That means lossy compression.

Flat colors won't stay flat.

Don't expect white to be precisely 255.

Pick a less strict threshold, or else you might "catch" an entire jpeg block instead of just the non-white pixels, because with severe enough compression, a block that contains some different pixels will cause all of them to distort.