How can i make my HTML canvas dots move more naturally?

Question

Link to my code pen here

I would like opinions on how i could make the canvas dots move in a more fluid, liquid like way.

I've tried limiting the direction for a certain number of renders (draw()), which has improved it a little! But it still lacks fluidity, coming across as rigid and 'hard-coded'.

This switch statement is the way direction is set, either passed a random integer or the previous direction.

 switch (direction) {
                    case 1:
                      star.x--;
                      break;
                    case 2:
                      star.x++;
                      break;
                    case 3:
                      star.y--;
                      break;
                    case 4:
                      star.y++;
                      break;
                    case 5:
                      star.y--;
                      star.x--;
                      break;
                    case 6:
                      star.y--;
                      star.x++;
                      break;
                    case 7:
                      star.y++;
                      star.x++;
                      break;
                    case 8:
                      star.y++;
                      star.x--;
                      break;
}

Thanks!