CanHaptics Project Iteration 2: Compiling the tools

Iteration 2: GUI of HaptiColour


How we got started on Iteration 2?

During co-coding, we revisited our discussion on different Haptic Guidance techniques (explored by Marco) and how can we make a curved wall (we decided to do this later in the design stage)

Who did what?

The first round of UI/UX testing

Where is my brush? No visible tooltip. Also, there is white padding as the brush is not touching the wall.
That offset!!! The brush is at an offset from the cursor (small dot) which leaves unwanted color traces; also the cursor is too small and not noticeable
Field testing! Making a cursor larger and testing the offset. As you can see, the offsets are different for different positions on the canvas.
Why is the color leaking? Colors leaking beyond the boundaries might lead to an unpleasant user experience.
Initial color spill! After starting the program, the brush would leave a splotch of color on the canvas.

Increasing the workspace dimensions

The workspace and wall spacing increased but the Haply force field didn’t shift. You can see the top corner rectangle guided by the force field and the actual bounding wall which is far out.

Integrating textures

This is the GUI for the Texture bank we shared with the class for feedback, first five textures were added by Marco (read more about them here), and the last three textures were added by me.
/*texture specific code*********************************************/
space = 1.2;
wall_h = 1.3;
wall_w = 0.1;
jloop = int(ydim/2);
iloop = int(xdim/space);
opacity = 0;
for (int j = 0; j<jloop; j++) {
for (int i = 0; i<iloop; i++) {
tgrid[j][i] = new FBox(wall_w, wall_h);
tgrid[j][i].setPosition((i+1)*space, (j+0.8)*2);
tgrid[j][i].setFill(40, 62, 102, opacity) ;
tgrid[j][i].setNoStroke() ;
A grid of damping elements that gives a brush-like texture effect
A grid of damping elements that gives a crayon-effect
if(((playerToken.h_avatar.isTouchingBody(colorSwatch[0])) || (playerToken.h_avatar.isTouchingBody(colorSwatch[1])) || (playerToken.h_avatar.isTouchingBody(colorSwatch[2])) || (playerToken.h_avatar.isTouchingBody(colorSwatch[3])) || (playerToken.h_avatar.isTouchingBody(colorSwatch[4])) || (playerToken.h_avatar.isTouchingBody(colorSwatch[5])))) {
playerToken.h_avatar.setDamping(850) ; //850
else {
if (drawingModeEngaged==true){
playerToken.h_avatar.setDamping(680) ;
playerToken.h_avatar.setDamping(0) ;

FBox touchWall ;
for (Wall item : wallList) {
touchWall = wallToWorldList.get(item);
if (C.isTouchingBody(touchWall)) {
playerToken.h_avatar.setDamping(damp); //820
void textureUpdate() {
for (int j=0; j<jloop; j++) {
for (int i=0; i<iloop; i++) {
if (playerToken.h_avatar.isTouchingBody(tgrid[i][j])) {
tvar = 1;}

Hapticolour Iteration 2

Final coloring test! Linnea added two color palettes — rainbow and pastel rainbow. My favorite is pastel rainbow! What’s yours?

Testing for Iteration 3 already!

In the current code, if you keep your cursor on the next palette or prev palette button, the palette will continuously change, which might make it harder to arrive at the right palette. While designing, an interaction of quick touch was assumed.
We need to set upper and lower bounds for the cursor size. Going outside a permissible range throws an error.
The “saved” text disappears very quickly and couldn’t be noticed. Also, several replicas of the same picture are saved if you press the button again and again. The UI assumes that you will save only after you have done some coloring; if you save an empty canvas, the program crashes.

What’s next?