Clarissa Pace

Depth Estimation:

During the end of class I started working on depth estimation example from class, seeing how I could manipulate the display of the image based on the estimated depth values.

async function analyzeImage() {
  let results = await depthEstimation(img.canvas.toDataURL());
  const { depth } = results;
  for (let y = 0; y < depth.height; y += 1) {
    // Loop through each column
    for (let x = 0; x < depth.width; x += 1) {
      // Calculate the 1D array index from 2D coordinates
      let index = x + y * width;
      let depthValue = depth.data[index];
      fill(depthValue);
      noStroke();
      **if(depthValue > 100){**
        let col = img.get(x, y);
      
      fill(col);
      rect(x, y, 1, 1);}

Explanation of code:

For each pixel, if it depth value is greater than 100, it retrieves the color from the same position in the original image and draws this color on the canvas. If the depth value is not greater than 100, it does not draw anything for that pixel. The result of that was this weird cut out of this cow image below:

Adding on to this: COLOR MAPPING

First step was to apply a color map to the depth values before displaying the image. Then, I created three different depth ranges: farther, closer, mid-distance.

The result of that was:

This was kind of fun, but I realized I wanted it to be more of a tint effect, rather than covering the whole image. I’d set the fill function to be directly assigned the RGB values for the pastel colors without modifying the original colors from the image.

I then decided to use lerp function we talked about in previous classes to blend the pastel colors with the original colors of the image.

The first result came out with not enough color I’d wanted, so I played around with how the colors would blend, evenly or unevenly. The factor was originally set to 0.5 to blend evenly, but I wanted the colors to stand out a bit more, so I upped it to 0.8.