I am a fan of minimalist geometric art, and have been for years. I took extracurricular painting classes in college to explore acrylics, geometry, and color theory. I always liked the idea of merging technology with art as well. Augmented reality interactive canvases, audio enhanced images, and the like.
While I paint much less now, the ideas of technology inspired art still linger in my mind. With QR codes popping up on restauraunt menus everywhere, and share codes on Spotify making their debut as well designed links, the idea embedding data into images started to develop more.
Just as these QR codes have application specific data embedded into their design, and the Spotify share codes have link information embedded into a waveform visualization, I started to wonder, what other information could we embed in a visual format? And what would be an aesthetically pleasing format that, unless you knew what you were looking for, would otherwise look like an abstract art piece.
I drew inspiration from the popular game “Dots”, where the objective is to draw lines connecting dots of the same color. There is an obvious structure to the dots; they’re arranged in a grid, the columns, rows, and colors separate dots or group them together. So what if I took this idea and figured a way to embed something else into the dot matrix?
I experimented first with voice messages. The idea was to convert an audio file into hex code, and then take those hex codes and convert them into colors, and place the colors as dots on a grid. Unfortunately, after a quick back-of-the-envelope calculation, I realized that audio-to-image formats wouldn’t work for a standard canvas size, or the dots would be too small to discern, and the resulting image would be dull and uninteresting.
So the I thought “text”. Instead of an audio recording converted to a dot matrix, what about text? Convert that into hex or binary and use that to build the dot grid. This approach worked, but still left extremely large canvases for large bodies of text. I wanted the project to be able to fit on a 24in x 36in canvas.
There are Instagram ads all over my feed for the star charts on the day of an anniversary, or the wood carvings of maps of cities where you met your significant other. That seemed like a good place to start. Take the text of a specific sentimental date, and work from there.
So I did. I took a date, my anniversary, and converted the string “Month dd, YYYY” into binary, and padded the end of the binary string such that the resulting binary code could be divided up evenly into a square grid, each 1 and 0 and space taking up exactly 1 space on the grid.
First, a date object is converted to a string in JavaScript, and then the string is converted to binary:
const date = new Date(dateString);
const options = {month: 'long', day: 'numeric', year: 'numeric'};
console.log(date.toLocaleDateString('en-US', options));
//"January 1, 2023"
let binary = '';
for (let i = 0; i < str.length; i++) {
binary += str[i].charCodeAt(0).toString(2) + ' ';
}
console.log(binary.trim());
//"01001010 01100001 01101110..."Once the binary string is generated, I replace all spaces ” ” with the character “A” (just to avoid any .trim() confusion), and I pad the end of the binary string with enough “A”s so that the total number of characters is a perfect square (that is, the square root is a whole number).
let replacedStr = str.replace(/ /g, 'A');
let squareNum = Math.ceil(Math.sqrt(replacedStr.length));
let paddedStr = replacedStr.padEnd(squareNum ** 2, 'A');
//"1000100A1100101A1100011A..."Now, with a padded binary string whose characters can be mapped perfectly to a square grid, I convert the string into dots. The purple dots are 1’s and the blue dots are 0’s, while the green dots are the spaces between binary codes.
Here is the final result:
The next step in this project is to start actually painting with this method, playing around with colors, spacing, and accents, to produce a painting that catches the eye while not being too busy.
Afterwards, I want to develop a mobile application that can scan the painting and tell you the information embedded in it, regardless of color scheme and size.