Mounds 3

Mounds 3 has been added to as a project on fxhash. Go forth and mint!

I’ve been working on a new set of drawing for my next project on fxhash. For this new project, I wanted to have a few new ways to manipulate the images when they get used.

Colorization

Since all the images I use in these projects are black and white, I could read the pixels from the images and swap out the black and white for another color.

      img.loadPixels()
      imgColorized.loadPixels()
      colr = [0, 0, 255];
      for (let x = 0; x < img.width; x++) {
        for (let y = 0; y < img.height; y++) {
          let index = (x + y * img.width) * 4
          let red = img.pixels[index]
          let green = img.pixels[index + 1]
          let blue = img.pixels[index + 2]
          let al = img.pixels[index + 3]

          if (red <= 5 && green <= 5 && blue <= 5 && al > 0) {
            imgColorized.pixels[index] = colr[0]
            imgColorized.pixels[index + 1] = colr[1]
            imgColorized.pixels[index + 2] = colr[2]
            imgColorized.pixels[index + 3] = al
          } else {
            imgColorized.pixels[index] = 255
            imgColorized.pixels[index + 1] = 255
            imgColorized.pixels[index + 2] = 255
            imgColorized.pixels[index + 3] = al
          }
        }
      }
      imgColorized.updatePixels()

Pixelization

To further manipulate the images, I used a technique to create a pixelated version of the image. I can scale the image to a specific factor, read that scaled-down image’s pixels, then recreate the image with rectangles. The result gives the images a retro video game look.

let pw = (img.width / factor)
let ph = (img.height / factor)
let pImg = createImage(int(pw), int(ph))
let colr = [0, 0, 255];
pImg.copy(img, 0, 0, img.width, img.height, 0, 0, pw, ph)
pImg.loadPixels()

for (let px = 0; px < pImg.width; px++) {
    for (let py = 0; py < pImg.height; py++) {
        let index = (px + py * pImg.width) * 4
        let red = pImg.pixels[index]
        let green = pImg.pixels[index + 1]
        let blue = pImg.pixels[index + 2]
        let al = pImg.pixels[index + 3]
        if (red <= 5 && green <= 5 && blue <= 5 && al > 0) {
            fill(colr[0], colr[1], colr[2], al)
        } else {
            fill(255, 255, 255, al)
        }
    }

    noStroke()
    rect(px * factor, py * factor, factor, factor)
}

Samples

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

•