Alienation of QR Codes by means of Processing

If you are a user of Processing or Processing.js and are mainly interested in an artistic alienation of QR codes, you have various possibilities to load the pattern of a QR code into a "sketch".

Possibilities for Processing:

• Integrate pattern as array literal directly into a sketch (only works for small QR codes).
• Read patterns from a JSON file

Possibilities for Processing.js:

• Integrate patterns as an array literal directly into a sketch (only works for small QR codes).
• Read patterns (e.g. using jQuery) from an <input>- or an <script>-element
• enter patterns into a sketch using JavaScript

Since this page is primarily aimed at processing beginners, only the first two methods mentioned are presented here.

A guide explains how to use the pages in this website, their behaviour may be adjusted in the settings.

Generation of a QR Code Pattern for Processing

Using the following form, you can generate a QR code pattern for a given text and either transfer it as an array literal or download it to your computer as a JSON file.

Use as Array Literal

Using the example of a small "sketch" that simply displays the QR code pattern unaltered, we will show how to use the pattern as an array literal:

int[][] ModuleArray = new int[][] {
  insert your array literal here
};

final int ScreenSize     = 512;                  // width and height of screen
final int minBorderWidth = 40;           // min width of border around QR code

void setup () {
  size(512,512); // ScreenSize,ScreenSize
  background(255);
  fill(0);

  int QRCodeSize = ModuleArray.length;
  int ModuleSize = max(1,floor((ScreenSize-2*minBorderWidth)/QRCodeSize));

  int xOffset = floor((ScreenSize-QRCodeSize*ModuleSize)/2);
  int yOffset = xOffset;

  for (int y = 0; y < QRCodeSize; y++) {
    for (int x = 0; x < QRCodeSize; x++) {
      if (ModuleArray[y][x] > 0) {
        rect(xOffset+x*ModuleSize,yOffset+y*ModuleSize, ModuleSize,ModuleSize);
      }
    }
  }

  noLoop();
}

Reading from a JSON File

Reading a pattern from a JSON file is a little more involved - in addition, the "QR-Code.json" file must be located in the same directory in which the Sketch itself was saved.

The following example simply outputs the QR code pattern unaltered:

final int ScreenSize     = 512;                  // width and height of screen
final int minBorderWidth = 40;           // min width of border around QR code

int[][] ModuleArray;

int[][] loadedQRCodePattern () {
  JSONArray ModuleArray = loadJSONArray("QR-Code.json");
  int       RowCount    = ModuleArray.size();

  int[][] Result = new int[RowCount][];
    for (int y = 0; y < RowCount; y++) {
      Result[y] = ModuleArray.getJSONArray(y).getIntArray();
    }
  return Result;
}

void setup () {
  size(512,512); // ScreenSize,ScreenSize
  background(255);
  fill(0);

  ModuleArray = loadedQRCodePattern();

  int QRCodeSize = ModuleArray.length;
  int ModuleSize = max(1,floor((ScreenSize-2*minBorderWidth)/QRCodeSize));

  int xOffset = floor((ScreenSize-QRCodeSize*ModuleSize)/2);
  int yOffset = xOffset;

  for (int y = 0; y < QRCodeSize; y++) {
    for (int x = 0; x < QRCodeSize; x++) {
      if (ModuleArray[y][x] > 0) {
        rect(xOffset+x*ModuleSize,yOffset+y*ModuleSize, ModuleSize,ModuleSize);
      }
    }
  }

  noLoop();
}