Zentangle Box
Part 1: Proposal
What am I making?
A Zentangle Box. It is an interactive box with several sensors embedded on the top that communicate with p5.js to generate Zentangle doodle drawings on the screen. The analog sensors allow for infinite drawings, so people can keep coming back to create new designs as they desire!
What is the purpose?
The art of Zentangle drawing helps a person focus, relax, increase creative flow, and improve mental wellness in general! However, for many people that aren’t artistically inclined, drawing can seem uninteresting or even too much pressure to make something perfect. My Zentangle box will allow anybody to be an artist, all they have to do is interact with the sensors and fascinating designs will be generated. I want my Zentangle box to increase accessibility of drawing for relaxation.
Who is it for?
My product is for ages about 12 and up. Anyone can use it, but it’s specifically geared towards individuals who need a creative, relaxing outlet but aren’t particularly gifted artists.
How will I build it?
My Zentangle box will house the Arduino and have a hole cut to fit a USB cable to enable serial communications between the sensors and the p5.js workspace.
I am going to embed 6 photocell resistors, 3 potentiometers, and a button to be in line with the top of the box. This installation will preserve a smooth feel to the box and the calming experience to using it. As different photocells are covered, the line weight and shading of the Zentangle shapes will be modified. Additionally, each potentiometer has a different effect on the drawing. One will change the base geometric shape of the design (from circles to squares), the second will increase the number of shapes on the screen (from one to six), and the third will cycle through a variety of borders & backgrounds to the doodle. Lastly, hitting the button will trigger an event to save the image on the screen, using the save() function in p5.js.
Initially, I will make a prototype for user testing using cardboard box (12” x 9” x 4”) and embed my 6 photocell resistors, 3 potentiometers, and button into the top of that. I want to get user input on size of box, and how it feels to interact with my box using both hands. Hopefully I can work out any confusion that my users have with my product, because the end result should be a calming thing to interact with instead of a cause of frustration in any way.
With my user feedback in mind about the sensors, size, and usability of my box, I will then move from the cardboard prototype to the final acrylic box for my end product!
Bill of Materials
- 6 x $1.50 – Mini photocell resistors
- 3 x $11.95 – Softpot Membrane Potentiometers
- 1 x $5.95 – Pushbutton
- 1 x $5.50 – SparkFun Analog/Digital MUX Breakout
- 1 x $13.60 Frosted Acrylic 144 in2
- 1 x $0.00 Wood (scrap) 312 in2
- 1 x $0.00 Arduino Uno
- 1 x $0.00 USB Cable
Drawing
Here is a visual representation of my plan for the project. The laptop is connected to the box via USB cable, with a p5.js window open on the screen. On the left side of the box are the light sensors, and the right has the potentiometers. In the right upper hand corner is the button that the user can press to save the photo.
Interactivity
To use the box, first experiment with different configurations of the sensors. As you see the patterns changing, start to relax and reflect on which ones you like the best. Then, once you’ve found one you like, hit the button to save your creation!
Questions
Some questions I have going into the project:
- Is my idea too complex / not complex enough to be engaging?
- Should I incorporate sound to make the user experience more relaxing / meditative?
- Are black & white Zentangles variable enough? (with my set of sensors)
- Does the configuration of sensors make sense
Product Development
Initially I was really excited p5.js, so I was experimenting with creating spirographs before I got my electrical components from Sparkfun.
After I picked up all of my sensors and components, I made a schematic to continuously refer back to. 
This was important because I’d never worked with so many sensors, and it was very helpful when soldering. Next, I made sure all of my sensors worked using a breadboard and the serial monitor in Arduino.
Once I tested all 9, I soldered stranded wires and resistors to all of them so I could incorporate all of them with the breakout board and move off the breadboard.
I color coded the wires because I knew things would get chaotic when everything was inside the box!
For my breakout board, I used pins 0 – 5 for the 6 photocells and 10 – 12 for the potentiometers.
In order to figure out proportions for my box, I laser cut a practice one.
Meanwhile, laser cut the pieces for my final box. had to move the button to the front and shrink the dimensions to make it more comfortable to put both hands on top at once. I painted the wood white to make it more visually analogous to pen and paper zen tangles.
Once my box was constructed, I could embed the components into their slots I had laser cut for them.
However, simply sliding all my sensors in resulted in chaotic wiring inside the box so I soldered all the power and ground connections together respectively so I could easily connect them to my Arduino where needed. Also made my connections much more secure inside the box. I also made a custom shield of sorts, by soldering header pins to a piece of proto-board that would fit perfectly into my Arduino.
And everything fit very nicely in the enclosure! I secured the Arduino by the hole in the box with an extra piece of wood. Also, I replaced the electrical tape around the breakout board with hot glue to make sure my soldering was as secure / insulated as possible.
Once everything was secured and in my box, I made sure all of the sensors were writing to the serial monitor in Arduino.
Then, I made sure that p5.js was receiving the right values and responding in the sketch.
Finalizing the Product
After that, it was just putting any finishing touches on the p5.js and letting my friends play with it! Since I had time, I experimented with putting colors in the sketch (even though zentangle drawings are technically pen and ink). Overall, I’m really happy with how it turned out.
Here is my Arduino code for the project. Once I figured out how to use the breakout board, it was pretty straightforward. Basically all I needed to do was isolate the breakout pins that were connected to my 9 sensors, and send them serially to p5.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Final Project Object Fall 2018 | |
| // Elsa Roeber | |
| ///////////////////// | |
| // Pin Definitions // | |
| ///////////////////// | |
| // Mux control pins | |
| const int selectPins[4] = {8, 9, 10, 11}; // s0-8, s1~9, s2~10, s3~11 | |
| const int cOutput = 5; | |
| const int cInput = A0; | |
| // photocell variables | |
| int pc1 = 0; | |
| int pc2 = 0; | |
| int pc3 = 0; | |
| int pc4 = 0; | |
| int pc5 = 0; | |
| int pc6 = 0; | |
| int sum = 0; | |
| int average = 0; | |
| // potentiometer variables | |
| int pot1 = 0; // numerator for spirograph | |
| int pot2 = 0; // denominator for spirograph | |
| int pot3 = 0; // varies the size of inner spirograph | |
| // button | |
| int buttonState = 0; // for saving the picture | |
| ///////////////////// | |
| // Set Up // | |
| ///////////////////// | |
| void setup(){ | |
| Serial.begin(9600); // establish serial communications | |
| for(int i = 0; i < 4; i++){ | |
| pinMode(selectPins[i], OUTPUT); | |
| digitalWrite(selectPins[i], HIGH); | |
| } | |
| pinMode(cInput, INPUT); // set up c pins as input | |
| pinMode(12, INPUT); | |
| } | |
| ///////////////////// | |
| // Loop // | |
| ///////////////////// | |
| void loop(){ | |
| // button signal | |
| int buttonSig = digitalRead(12); | |
| if(buttonSig == HIGH){ | |
| buttonState = 1; | |
| }else if(buttonSig == LOW){ | |
| buttonState = 0; | |
| } | |
| // loop through all 3 potentiometer pins (10 – 12) | |
| for(byte pin = 10; pin <= 12; pin++){ | |
| selectMuxPin(pin); // select one at a time | |
| if(pin == 10){ | |
| pot3 = analogRead(A0); // varies the size of inner spirograph | |
| }else if(pin == 11){ | |
| pot2 = analogRead(A0); // denominator for spirograph | |
| }else if(pin == 12){ | |
| pot1 = analogRead(A0); // numerator for spirograph | |
| } | |
| } | |
| delay(100); | |
| // loop through all 6 photocells (0 – 5) | |
| for(byte pin2 = 0; pin2 <= 5; pin2++){ | |
| selectMuxPin(pin2); // select one at a time | |
| if(pin2 == 0){ | |
| pc1 = analogRead(A0); | |
| }else if(pin2 == 1){ | |
| pc2 = analogRead(A0); | |
| }else if(pin2 == 2){ | |
| pc3 = analogRead(A0); | |
| }else if(pin2 == 3){ | |
| pc4 = analogRead(A0); | |
| }else if(pin2 == 4){ | |
| pc5 = analogRead(A0); | |
| }else if(pin2 == 5){ | |
| pc6 = analogRead(A0); | |
| } | |
| } | |
| // average all photocells | |
| sum = pc1 + pc2 + pc3 + pc4 + pc5 + pc6; | |
| average = sum/6; | |
| // print all the values | |
| Serial.print(pot1); // this is the one furthest to the left | |
| Serial.print(","); | |
| Serial.print(pot2); // middle | |
| Serial.print(","); | |
| Serial.print(pot3); // furthest right | |
| Serial.print(","); | |
| Serial.print(average); // average of all photocells | |
| Serial.print(","); | |
| Serial.println(buttonState); | |
| delay(100); | |
| } | |
| ///////////////////// | |
| // Helper Function // | |
| ///////////////////// | |
| // the selectMuxPin function sets the s0, s1, s2, and s3 pins accordingly, given a pin from 0 – 15 | |
| void selectMuxPin(byte pin){ | |
| for(int i = 0; i < 4; i++){ | |
| if(pin & (1<<i)) | |
| digitalWrite(selectPins[i], HIGH); | |
| else | |
| digitalWrite(selectPins[i], LOW); | |
| } | |
| } |
Here is the link to my final p5.js sketch that I used. Some of the lines are commented out because I was experimenting with my doodles at the end of the project!
Finished Result
Reflections
Anyone Elsa? 