making a pixel to binary converter

johanispro3

Hello,

I'm new here to processing and to programming in general. I've tried to get into coding but I never had a goal to work to. Now I finally found something I want to build: a program that converts a image that you can draw yourself into a binary code.

I've made a simple start; a drawing program with erasing tool that draws a black line on white. but I'm running into 2 problems

1: zooming in, I want to convert a 16x16 image to binary but making a screen of that size is just way too small. I need to find a way to make it bigger without changing resolution.

2: The actual conversion a black pixel needs to become a 1 and a white (background) needs to become a 0. example of a 3x3 output: (every code is a horizontal row)

101
010
101

a friend of mine told me it's handy to use a bit shifter for this, but I just don't know how!

Any help would be appreciated.

GoToLoop

Some old threads related to image cropping:
http://forum.processing.org/two/discussion/5618/crop-image
http://forum.processing.org/two/discussion/7149/how-do-i-use-a-custom-brush-on-a-separate-layer-using-pgraphics

asimes

Basic idea for scaling a 16 x 16 image up. Note that width and height are both divisible by 16:

boolean[][] bitImage;

void setup() {
  size(512, 512, P2D);

  // Make a random bit image
  bitImage = new boolean[16][16];
  for (int i = 0; i < 16; i++)
    for (int j = 0; j < 16; j++)
      bitImage[i][j] = (int)random(2) == 0 ? true : false;

  loadPixels();

  // Scale the bitImage up to screen resolution
  for (int i = 0; i < width; i++)
    for (int j = 0; j < height; j++) {
      int bitI = i / (width / 16);
      int bitJ = j / (height / 16);
      int pixelIndex = i + j * width;
      pixels[pixelIndex] = bitImage[bitI][bitJ] ? 0 : 0xffffffff;
    }

  updatePixels();
}

johanispro3

Thx asimes! I now have a 16x16 drawing app with pixels that are 16x16 on my screen!

asimes

I made another interpretation of what a bitImage could mean by using a long instead of a double array of booleans. A long has 64 bits which means it can represent an 8 x 8 image of bits. This is probably more in the spirit of what your friend was talking about:

// A long has 64 bits, enough for an 8 x 8 image
long bitImage;

void setup() {
  size(512, 512, P2D);  
  loadPixels();

  randomBitImage();
  displayBitImage();
  printBitImage();
}

void draw() {
}

void mousePressed() {
  randomBitImage();
  displayBitImage();
  printBitImage();
}

void displayBitImage() {
  // ----------------------------------------------------------------------------
  // I hard coded 512 instead of using width and height
  // (j >> 6) == (j / 64) == (j / (512 / 8)), the 8 is the width of the bitImage
  // ((i >> 6) << 3) == (i / (512 / 8) * 8)
  // (1L << bitIndex) is a power of 2 in the range [1, 64)
  // ----------------------------------------------------------------------------
  for (int i = 0; i < 512; i++) {
    for (int j = 0; j < 512; j++) {
      int bitIndex = (j >> 6) + ((i >> 6) << 3);
      int pixelIndex = j + (i << 9);
      pixels[pixelIndex] = (bitImage & (1L << bitIndex)) != 0 ? 0 : 0xffffffff;
    }
  }
  updatePixels();
}

void printBitImage() {
  for (int i = 0; i < 8; i++) {
    for (int j = 0; j < 8; j++) {
      int bitIndex = j + (i << 3);
      //print(bitIndex + "\t"); // This remains for debugging
      print((bitImage & (1L << bitIndex)) != 0 ? "1 " : "0 ");
    }
    println();
  }
  println();
}

void randomBitImage() {
  // ----------------------------------------------------------------------------
  // As far as I know there is not random function for a long in Processing so
  // instead I concatenated integer casted randoms
  // ----------------------------------------------------------------------------
  // Handle bits [0, 16)
  bitImage = (long)random(0xffff);

  // Handle bits [16, 32)
  bitImage |= (((long)random(0xffff)) << 16) & 0xffff0000L;

  // Handle bits [32, 48)
  bitImage |= (((long)random(0xffff)) << 32) & 0xffff00000000L;

  // Handle bits [48, 64)
  bitImage |= (((long)random(0xffff)) << 48) & 0xffff000000000000L;
}

asimes

As an example of why this is more like what your friend was talking about, here is a sketch that makes a random bit image and left shifts the image every time the mouse is pressed:

long bitImage;

void setup() {
  size(512, 512, P2D);  
  loadPixels();

  randomBitImage();
  displayBitImage();
  printBitImage();
}

void draw() {
}

void mousePressed() {
  // Left shift the image
  bitImage <<= 1;

  displayBitImage();
  printBitImage();
}

void displayBitImage() {
  for (int i = 0; i < 512; i++) {
    for (int j = 0; j < 512; j++) {
      int bitIndex = (j >> 6) + ((i >> 6) << 3);
      int pixelIndex = j + (i << 9);
      pixels[pixelIndex] = (bitImage & (1L << bitIndex)) != 0 ? 0 : 0xffffffff;
    }
  }
  updatePixels();
}

void printBitImage() {
  for (int i = 0; i < 8; i++) {
    for (int j = 0; j < 8; j++) {
      int bitIndex = j + (i << 3);
      print((bitImage & (1L << bitIndex)) != 0 ? "1 " : "0 ");
    }
    println();
  }
  println();
}

void randomBitImage() {
  bitImage = (long)random(0xffff);
  bitImage |= (((long)random(0xffff)) << 16) & 0xffff0000L;
  bitImage |= (((long)random(0xffff)) << 32) & 0xffff00000000L;
  bitImage |= (((long)random(0xffff)) << 48) & 0xffff000000000000L;
}