THE GLOWING RHYTHM

Emily Harris and Joelene Tomecek

A Color Mixing Tablet Application for Children Ages Four to Seven

Introduction

Team Members Joelene Tomecek

Creation of Tangible Objects Concept and Design

Emily Harris Implementation of Code Concept and Design

Introduction

Concept The Glowing Rhythm is a tablet application, designed for

children of ages four to seven, which evokes creativity through multi-sensory experience. It combines tangible interaction using soft objects with audio-visual contents.  It creates an integrated physical and virtual environment for children that makes learning more interesting than general tablet applications.  The Glowing Rhythm combines the idea of color mixing with sound manipulation to create a synesthetic application for children.

Conceptual Research

Similar Physical Toys for Children Teething Ring

Teething rings have a torus shape, similar to our tangible objects, which allow children to correlate this shape with a toy at an early age. We also observed that young children are successful in interacting with this shape.

Ring Stacking Toy This classic toy gave us inspiration

for the design of our tangible object. Upon observation, we found that children of many ages were successful learning and playing with the torus shape of the rings.

Conceptual Research

Similar Tablet Applications for Children Painting Apps and Coloring Book

Apps When doing research, we found a

plethora of applications which allow children to express their creativity through the use of color. These apps inspired us to base our own app around colors.

“PaintSparkle” This app is a basic painting application

which allows you to choose a color of your choice out of a list of selected colors and paint with you finger. When painting, an animation plays (almost like a confetti effect). This helped us create a connection between an animation and color. We also found the color wheel in this app interesting which allows you to choose any color you would like.

Conceptual Research

“Color Mixing” by iNsight This app allows the user to adjust the levels of red, green, and blue

in their color through the use of three separate sliders. As the user adjusts their color, the corresponding image on screen updates the color, allowing the user to see the amount of red, green, and blue individually. The app also allows the user to see the mixture of the three colors with another image, along with the final color of all color channels mixed. The app also has the ability to switch the color space from RGB to CMY and also HSV.

Technical Research

Color Wheel Before implementing our design, we researched

how other people have dealt with color using Processing. We found many examples of different ways to make color wheels along with their respective code files. Many of these examples calculated the color of a specific section of the wheel using steps, meaning the colors had no gradient in between each other. Rather, the colors were separated into solid slices of a specific size for each color, limiting the number of different colors in the wheel to 24 or 48. This inspired us to implement the color choosing method in a similar fashion. Several examples that we found are below:

http://www.openprocessing.org/sketch/8614 http://processingjs.org/learning/basic/colorwhee

l/ http://codeforartists.com/samples/cfa-processin

g-js-colorwheel.php http://stackoverflow.com/questions/16384550/p

rocessing-rgb-wheel-to-control-arduino-rgb-led

Technical Research

Sound While conceptualizing our app, we researched the possibility of adding sound to

combine audio with visual components. We found a blog which discussed the ability to add low pass sound filters to audio files to alter the way the file sounds (http://code.compartmental.net/tools/minim/quickstart/ ).

However, when adding sound to our app, we ran into several technical difficulties. The first of these problems was figuring out how to get Minim to work with our Processing.js file. When researching this problem, we found the blog http://forum.processing.org/one/topic/processing-js-unable-to-execute-pjs-sketch-referenceerror-minim-is-not-defined-19-7-2013.html, which informed us that Minim is incompatible with Processing.js due to its dependency on Java. With the help of the video found at http://vimeo.com/77834339, we were able to download a different sound library, called “Buzz”, which is written in JavaScript.

After solving this problem, we ran into another issue in which our sound files do not play smoothly while looping. The sound files restart in mid play. This problem is worsened when more than one sound file is trying to play at once. Although the sound files sometimes play properly as we intended, we are still currently researching this issue. This problem prevented us from adding sound to the current version of our app, although the addition of sound is still planned for future development.

Implementation of the Code

Our application was written in Processing 2.0.3 and converted to JavaScript in order for web usage.

Pattern Recognition Our app is highly dependent on the recognition of our tangible

objects when they are on the screen. In order to detect our objects, we took the skeleton code, provided to us by Stephen Aldriege, and calculated the touch points of our objects with a provided function. We could then register our shapes in our app.

Animation In order to create our current animation, we have four

different loops which each create a different outer ring composed of individual circles of a specific size. Each of these loops calculates the position of each of its individual circles by using sine (for the y) and cosine (for the x). The position of each circle is then re-calculated every frame to make the rings rotate.

Rotation and Color Choosing Also in the skeleton code provided, the rotation of the tangible

objects are calculated by With this rotation angle, we added a function which assigns a

fill color for the animation based on the degree of rotation of the object. The function takes in the current rotation angle and has pre-defined colors for each angle of rotation. In all, the user can choose their color from 48 possibilities.

Implementation of Code

Updating the Current Location In order to update the current location of the objects, we

created a new function that calculates the center point of the three touches from each tangible object. We then store this location in a variable in the TouchShape class, allowing us to access it when we draw the animation.

Color Mixing Implementing the mixing of the colors, we created two

functions, one to calculate the distance of each individual circle from the other object’s current center location. The distance of each circle is then checked to see if it is within a certain range of proximity to the other animation’s center. When the circles are within this range, another function is called that mixes the two colors, using fifty percent of each color to create the third color.

Saving the Last Point Saving the last location of the objects was a necessary step

in order to have the animations continuously play, whether or not the corresponding animation was on the screen. In order to do this, we simply modified the provided code to draw the animations when the corresponding shapes are both active and inactive.

Implementation of Tangible Objects Dome Shape

We wanted the children to interact with the object by rotating it, so at first we tried on using a dome. We used white material so the light from the iPad would make the object glow. However, the dome was too deformable and could easily be smashed by a child.

Implementation of Tangible Objects

Torus Shape We then decided to use a

torus shape so the child had something to hold on to as well as see the color he was choosing from the hole in the middle.

The next decision was to choose the material. We began by using a simple white cotton material, but after watching how fast it could fall apart we decided to go with something stronger, so we used white felt.

Implementation of Tangible Objects Prototypes

We went through a number of prototypes to try and create the most suitable object for children. We wanted our design to be self explanatory, so that we did not need to explain where to hold it in order for it to work. We used a thick conductive thread to connect everything together and we used three circles of conductive material on the bottom of each object so the iPad would be able to sense the object.

Implementation of Tangible Objects Final Design

The size of the object was finalized after our first user study with Sunshine. We had trouble figuring out how a child would hold and interact with our object, but when we gave Sunshine all our different sized prototypes to use, she worked the best with our largest prototype.

The current tangible object has ten different colored circles at the top to inform the child which side is up and which side is down. These circles are sewed on using conductive thread. On the bottom of the object, there are three conductive points which are also sewed on using conductive thread, which connects to the top thread. This creates the flow of energy from the child’s hand to the three points at the bottom of the object.

User Study/User Experience

In Class User Study on November 12, 2013 Sunshine, a 3 year old girl,

was our first age appropriate user. From this experience, we were able to design our current tangible object as well as realize the need to continuously play the animation, even when the tangible objects are not on the screen.

User Study/User Experience

The Children’s Museum of Brazos Valley on November 23, 2013 From this experience, we learned that

young kids (ages 2-4) were more transfixed by simply watching the animation and naming the corresponding colors. The older kids seemed to enjoy and understand the idea of color mixing; however, the kids ages 8+ seemed to loose interest quickly.

Although the majority of responses to our app were positive, we did notice several problems while observing our users. The first involved our tangible objects. At several points of the user study, some of the kids tried to use the objects upside down. We thought that by placing colored felt on the top of our objects, users would be able to differentiate between up and down. However, this was not always the case.

User Study/User Experience

The Children’s Museum of Brazos Valley on November 23, 2013 Another issue we found with the tangible objects was the

squishable nature of the material. When our users couldn’t make a connection between the object and the iPad, they instinctively began squeezing the object. This would only deform the points of contact on the tangibles, making the users more frustrated.

Upon asking questions to the users, we found the large majority of kids would enjoy playing this app with other kids. However, at some points of the user study, the space around the iPad got too crowded, causing tension between the users. This is the primary reason we would like to expand our app to a larger touch screen surface and create more tangible objects to allow for more users to play simultaneously.

Future Plans

Expand to a Larger Tablet Due to our observations during the user studies, we would like to expand our app

to work with a larger touch screen surface, such as a touch table or multiple iPads. This would allow more users to play with the app at once which would enhance their overall experience.

Sound We plan to add sound to our app in order to produce a synesthetic experience for

children. We would like to have a technique which enables the users to alter the sound that they hear and correlate that to the colors they have chosen.

Color Mixing During the user study at the Children’s Museum of Brazos Valley, it was brought to

our attention that our current method of mixing two colors is not true to the mixing of physical colors, such as paint. We plan on researching different methods to achieve an appropriate technique for mixing our digital colors.

Make a Game Mode One specific user mentioned the idea of adding a game to the app. She found

playing fun; however, she said she would find it even more fun to have challenges. One idea she liked was to have the users figure out what colors they needed to mix to make a specified color.

Future Plans

Create a Menu Along with different modes to play, we would like to add a menu to

the app. This would allow the users to choose which mode they would like to play.

Improve Tangible Object Design Since some of our users had trouble differentiating between up

and down for the tangible objects, we would like to improve the design to make it more clear which way the objects are supposed to be held. Also, we would like to find a different material to make the objects firmer and less likely to deform.

Different animations or some technique to manipulate the animation We have observed that our current animation has the potential to

get boring to children. To fix this, we would like to add a method to alter the animation, or simply have different animations for each tangible object.