Art is the Answer is an exploration of the way we interpret information. When a question is asked, Wolfram Alpha’s response is displayed as a procedurally generated artistic abstraction. Art is the Answer disrupts the succinct question/answer call/response of Wolfram Alpha’s usual use and asks the user to interpret what the answer to their question might be, and how the shapes displayed affect that interpretation.
I started, as I often do when I encounter new technology, by examining each component and breaking them down into their simplest terms in an attempt to develop a mental model. I took a close look at the demo code and copied it over in to my sketch. Having not worked with PubNub with any depth previously (in the Networking assignment of Creation & Computation I spent most of the time working on physical builds) I knew I didn’t want to get too complicated with regards to APIs – I left PubNub and Wolfram Alpha alone after connecting them. Since we were working with p5, a tool designed originally for making art, I decided that I would break down the response from Wolfram Alpha into data that p5 could use for art’s sake.
I was sure there must be a way to turn letters into numbers – after all, in code, everything is a number eventually. I did a little research into letter/number encoding. The first hit I got was for A1Z26 code, a simple cipher in which A=1 and Z=26. I doubted this would suit. Eventually I remembered ASCII and hexadecimal code, and while I was researching these I came across the function
charCodeAt(). This function returns the UTF-16 code at the referenced location. A few tests showed that this would be perfect. It was time to get into arrays and for loops.
I had never worked with arrays with any depth before, nor for loops outside of simple limited mathematical situations. I knew that in order to get this to work I would have to store every letter of Wolfram Alpha’s response in an array, and run that array as a for loop so the variables could be used to draw shapes.
Above is my first successful attempt at translating Wolfram Alpha’s response letters into shapes on a p5 canvas. Printed in the console is the UTF-16 value of each letter. Those values are entered into an array which in turn is called during every calling of a for loop, and the values are entered as the fill, size, and coordinates of the shapes.
The problem was that since every value was identical within each loop, I always got a print out of a series of greyscale shapes along a diagonal.
After consulting with some classmates, I adjusted the parameters of the shape so that they would not all be identical: they would call the Character Code of the letter in their step (
p[i] ) as well as the Character Code of the letters one or two places ahead of their step (
p[i+1] ) .
So now we had a variance in shape size and colour, but the numbers being returned from Wolfram Alpha were too small to make a pleasant scatter effect on the canvas – the x and y coordinates were all under 200 on a canvas that was 900 units wide. I decided a few random numbers in the mix to serve as multipliers would be useful to get that effect.
I played around with including the random number generator from Wolfram Alpha as well, but that proved to be a little too complicated to work in to the existing for loop. It also proved unnecessary: the
random() function included in p5 was sufficient.
One random numbers were included as multipliers to the numbers returned from Wolfram Alpha, I had the kind of results you see above. Rather than scattering them around the canvas, they distributed them fairly evenly.
I set the random number to be between 0 and 10, and set the
translate() by to move itself by this random amount each loop. Thus, the relative point of origin of every shape was changing in a random direction by a random amount each loop. Finally I had the kind of imagery I had imagined.
This project is mechanically similar to my mindPainter project, and it would be interesting to combine them in some way.
I would like to polish the art that this produces so the shapes it paints are not consistently primitives like rectangles and squares.
I would like to add a mechanism wherein a user can click or press a key to see the answer to their question in text – although, this might undermine what is in my opinion the strongest aspect of the piece: that the user has no way to getting to their answer without interpreting the artwork.
Demo code by Nick Puckett & Kate Hartman
p5 Reference by Processing Foundation
MDN Web Tools by Mozilla
ASCII Table by asciitable.com
UTF-16 by fileformat.info