Emily Harris and Joelene Tomecek
A Color Mixing Tablet Application for Children Ages Four to Seven
THE GLOWING RHYTHM
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/colorwheel/
http://codeforartists.com/samples/cfa-processing-jscolorwheel.php
http://stackoverflow.com/questions/16384550/proc
essing-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-sketchreferenceerror-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


Animation


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.
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


Color Mixing


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.
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


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


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.
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


Improve Tangible Object Design


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.
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.