making a pixel to binary converter

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.

Answers

  • Answer ✓

    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();
    }
    
  • edited July 2015

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

  • edited July 2015

    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;
    }
    
  • 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;
    }
    
Sign In or Register to comment.