During user testing for my physcial computing class, a peer suggested incrementing the degree of rotation in a linear gradient with the potentiometer instead of the sharp changes that applied after the potentiometer reached a threshold value.

To do so, I would have to replace the linear gradient function with a loop of lines and a translated origin to rotate around the center of the canvas.

At first, it looked rather similar to the original linear gradient. However, the more I spun the rotary encoder around, additional colors were added to the gradient. Furthermore, if I tried rotating the loop of lines, gaps in the gradient would appear.

Untitled

I tried applying the same thought to the linear gradient function by translating the origin and rotating the linear gradient. It was very pleasing to the eye. However, to do so, I had to drastically increase the height so that when flipped vertically, the sides would still be covered by the gradient. Unfortunately, as a result of changing the proportion in the gradient dimensions, the FSRs became really tricky to get right.

Untitled

As it was taking a long time trying to figure out the correct parameters, I moved on to try a different idea. My instructor mentioned that it would be nice to integrate some movement, such that the user can leave behind a piece of art. Rather than changing orientation, I repurposed the potentiometer to change speed of movement.

let mov = map(pot, 0, 1023, 0,100)

///

function bounce(num, max, min, speed) {  
  if(num > max || num < min) {
    speed *= -1
  }
  return speed;
}

I first mapped the potentiometer values to 100, my set maximum for speed. I also added a bounce function that would help with the ebb and flow of the linear and radial gradients.

For the linear gradient, I tried making a wave motion by changing the starting Y and ending Y value.

if (sY > 100 && eY <= 300){
  sYspeed = bounce(sY, 300, 110, sYspeed)
  eYspeed = bounce(eY, 290, 100, eYspeed)
   
  sY += (sYspeed * mov); 
  eY += (eYspeed * mov);
}

For the radial gradient, I wanted to create a pulsating motion. However, since the ending radius is being used for the FSRs, I could only manipulate the starting radius.

if (sR > 0 && eR <= 400){
  sRspeed = bounce(sR, 50, 1, sRspeed)
   
  sR += (sRspeed * mov);
}