Project: the “snake” challenge

Please make some improvements to the snake by adding a nice head and tail, changing the colors, adding a background, etc. Be creative and tweak this according to your artistic taste :-) 

Please post your creations and comments in the discussion forum below: there is a dedicated thread for that!

It's also a very interesting example that shows the power of 2D transformations + interesting use of ctx.save() / ctx.restore(), as each segment of the snake is always drawn at a fixed position: only the coordinate system of the previous segment is translated/rotated -> no complicated computations!

The challenge is on! I hope you'll enjoy it!

What you could try:

• Be creative!

• Add some interesting features (forked tongue, head, tail, snake tortoise shells...), longer, faster, slower, drunk, etc

• Make the snake chase the mouse (the snakes moves slower, so it tries to follow the mouse)

• Animate not one snake, but many

• Make a game of it

• You can just change the loop of drawSnake to reverse the stacking order of segments. Try with this:

for(var i=x.length-1; i >=0; i--) in drawSnake()

Check out the pen below: if the snake's body crosses over itself, it will pass "on top", not "under", producing a nice "elastic effect". Do you understand why this effect is produced?

Another nice elastic snake from @kmatsu7, a student from a previous course: