Initial concept

For this assignment, I initially wanted to make a smudge tool. In terms of pseudocode, I would get the mouse X and Y positions on drag, and apply the pixels from the previous mouse X/Y position to the new X & Y position.

Testing out changing pixels

Screen Recording 2023-10-31 at 8.00.13 PM.mov

After importing an image and loading pixels, I tested out changing some pixels on mousepress.

Getting the pixel index based on the mouseX/Y position

This is the part that was the most challenging/mind-boggling:

• I initially thought I can simply do mouseX*mouseY, but it was wrong and kept changing pixels in random places.
• So, I drew a diagram (below) to help me devise the formula to get the index of the R pixel in the pixel array, based on the X and Y position.
  • arrPosX is simple because each pixel increments by 4 in each row
  • arrPosY: Each increment in mouseY is an entire row increased, which is why it is multiplied by the full number of items in each “row” (i.e. img.width * 4)
  • I’d like to think of arrPos as: arrPosY is like the “tens” and arrPosX like the “ones”. e.g 10 (tens) + 4 (ones) = 14, and they increment independently.

let arrPosX = mouseX * 4;
let arrPosY = (mouseY * (img.width * 4));
let arrPos = arrPosX + arrPosY;

A very messy sketch to offload my brain’s processing power

• The initial pixel density was 2 based on the image, and because of that, I had a really hard time trying to figure out the formula for loops. I changed that to 1.

Getting the pixel area instead of single pixel

Now that I’ve gotten a pixel’s position based on the mouse position, I needed to also get pixels that surround this pixel.

• I had a few mistakes I made before deriving at this code snippet:
  • Not multiplying the allowance by 4
  • Having y increment by 4 instead of img.width*4

let allowance = 4 //Retrieve 4 pixels around the centre pixel

for (let x = arrPosX - allowance *4; x <= arrPosX + allowance*4; x += 4) {
    for (let y = arrPosY - (allowance * img.width * 4); y <= arrPosY + (allowance * img.width *4); y += (img.width*4)) {
      img.pixels[x+y] = 255;
			img.pixels[x+y+1] = 255;
			img.pixels[x+y+2] = 255;
    }
  }

When mouse is pressed, the pixels around the 4x4 radius turns white.

When mouse is pressed, the pixels around the 4x4 radius turns white.

The blur effect