CanHaptics Project Iteration 1: Setting up the Canvas

An ‘art’ created while playing with tooltips

Goal

We are building a haptic-assisted coloring platform for novice artists and
enthusiasts based on the Haply 2-DoF device. The goal is to create a tool that people can use for coloring 2D shapes with haptic assistance to (1) improve fine motor skills and (2) reduce anxiety and increase mindfulness.

Brainstorming

We started our first iteration design process by sketching ideas about how we imagine a haptic-guided coloring platform. Sketching is a fun grounding practice while working in a team. It makes it easy to talk about the concept in our heads and reflect. Here are some of the sketches made by Linnea, Marco, and me.

Linnea’s sketch made using the 10 x 10 approach
Marco penned down interactive UI elements
I worked on the interactive elements and haptic feedback sketches
Thematically grouped ideas discussed during team brainstorming and faculty meeting (Miro Board Link)

Haptic Guidance

We did another narrowly focused brainstorming and came up with theme-specific ideas. For Haptic Guidance, we mostly focussed on bounding wall-based feedback. If you color within the lines, there will be no force feedback but as you go close to the lines, there will be an opposing force, so that you don’t cross the lines. We further scoped this down to: “What the user will experience (1) when they will get close to the wall? and (2) while crossing the wall?”

Haptic Guidance Ideas
One of Marco’s explorations where the level of damping increases when you get close to a wall.

Haptic Richness

When you use a physical art medium, you experience contact-texture based on the type of tooltip. For example, a brush soaked in water-based color will have a smooth contact texture, a brush dipped in the paint will have slight friction, crayons, on the other hand, will have high friction and irregular roughness. It would be great to have these contact-texture effects in a digital coloring platform to enrich the experience. We brainstormed several ideas to render texture through Haply. Viscosity-based damping was the fundamental element we used in these designs.

different texture ideas were drawn during brainstorming
haptic texture demo (code)

Setting Up First Sketching Prototype

In addition to exploring different components, we also worked on having a base prototype where we can integrate all the elements after testing. To keep it simple and quick, I got started with Linnea’s Maze code and build a coloring sheet made out of rectangular boxes.

modified maze.txt file
a simple coloring sketch
if (true) {
angle += 5;
float val = cos(radians(angle)) * 12.0;
for (int a = 0; a < 360; a += 75) {
float xoff = cos(radians(a)) * val;
float yoff = sin(radians(a)) * val;
fill(0);
ellipse((corr_posEE.x)*40 + xoff, (corr_posEE.y)*40 + yoff, val, val);
}
fill(255);
ellipse((corr_posEE.x)*40, (corr_posEE.y)*40, 2, 2);
}
the tool shows the overlaid ‘tracing’ element but leaving no traces (code)
void draw() {
/* put graphical code here, runs repeatedly at defined framerate in setup, else default at 60fps: */
if (renderingForce == false) {
background(255);
world.draw();
}
public void b1(int theValue) {
tooltip = button_img[0];
haplyAvatar = loadImage(tooltip);
haplyAvatar.resize((int)(hAPI_Fisica.worldToScreen(tooltipsize)), (int)(hAPI_Fisica.worldToScreen(tooltipsize)));
playerToken.h_avatar.attachImage(haplyAvatar);
}
Playing with different visual tooltips (code). Which one is your favorite?

User Interface Designing

How can we move between bounded areas?
Linnea added a color panel and keyboard controls to move the cursor across bounding boxes

What didn’t go quite right?

As discussed before, the process of making the traces took some time to understand. Additionally, making the code modular is something really challenging as I am not fully familiar with Fisica library functions yet and how the updates work in Processing (here is a code in process). Very often, processing throws these non-descriptive errors and sometimes I am unsure whether is it because of low memory space in my computer or there is a legit error. I haven’t worked extensively with GUI elements in processing and I am yet to find a good solution so that I don’t have to copy-paste button functions gazillion times.

What are the next steps?

We currently explored three different dimensions of the process. Although we explore some initial ideas, we still have a lot more to try and test. We played with modular elements and haven’t dwelled deeper into the Fisica Library and its functions. It's something that we would check in further iterations.