Smooth nature snake – game re-dev with Kotlin (part 2)

This is the second part of creating a smooth nature snake game. You can read the first part here. In this part, we will cover the challenges in simulating the snake’s movement pattern.

How snakes move

Snakes move in zigzag patterns as demonstrated in the following figure.

We can see that the whole body of the snake forms a shape that is similar to the sine graph.

The sine function is more suitable for serpentine movement but not quite for side-winding. If you do care about the latter, I have tried a couple of equations to get it done and will cover that in another article.

Head-first approach

Now we go for the serpentine movement pattern. “How to simulate such movement in code?”

From the animation, it is not hard to see that the body follows its head. When the snake moves, the head moves forward and followed by other body parts. Similarly, we can first calculate the head’s next position and then the other body path can follow the previous location of the head.

Here is the pseudo-code:

snake_move {
     for i from tail to head
          location of body_segment(i) =  location of body_segment(i -1)
     head move to new position
}

OK then, to calculate the position of the head in the real game, we will need more than just a sine function. But to make it simple, let ‘s go for the easiest case first: calculate position supposed that the snake is moving horizontally.

The following equation is to draw the sinusoidal graph based on the phase.

Where latexp_t\) is the phase at time latexy\) is the amplitude at the time latexx\) axis is latex x’ = x \cos \theta + y \sin \thetalatex y’ = – x \sin \theta + y \cos \theta$

The code for rotating axes is as follows:

/**
         * @param rotateVector vector to rotate from original cartesian coordinate
         * @param x: original x cooordinate
         * @param y original y coordinate
         * @return the transposed PointF containing new coordinates x, y
         */
        fun RotatedCoordinate(x: Float, y: Float, rotateVector: PointF): PointF {
            val diag = VectorNorm(rotateVector)
            val sinOfCurrentMoveVec = rotateVector.y / diag
            val cosOfCurrentMoveVec = rotateVector.x / diag
            val dxTransposed = x * cosOfCurrentMoveVec - y * sinOfCurrentMoveVec
            val dyTransposed = x * sinOfCurrentMoveVec + y * cosOfCurrentMoveVec
            return PointF(dxTransposed.toFloat(), dyTransposed.toFloat())
        }

And the code to update the head position based on movement vector.

move(){
   ...
   val dTranspose = Maths.RotatedCoordinate(dxOrigin, dyOrigin.toFloat(), mCurrentMoveVector)
   //Location of head
   bodyPoints[0].set(
     mHeadTracker.x + dTranspose.x,
     mHeadTracker.y + dTranspose.y
  )
  ...
}

And the result:

To be continued…

So in this article, we have covered the smooth nature snake’s movement by using the head-first approach. Another tricky part is to draw the snake’s head that is turning to the movement direction. We will cover this in part 3.