Animating with p5js

Mid-Autumn Festival is this Sunday! It’s one of the big event we celebrate in my country. Traditionally, we would gather for moonlight BBQ parties at a house or riversides. An interesting fable about this event is that once there was a rabbit who was sent to the moon by the gods because of its kind act toward them. Having said, I relate myself as the hare who is far away from home this year.

Development & Difficulties:
In this project, we were asked to include two things, elements that could be controlled by mouse and elements that could change independently over time. I tried to input the criteria in my artwork with the following elements.
1. Star – shines at random position continuously within the canvas
2. Moon – moves and resizes with mouse movement
3. Skyline – color changes with mouse movement
4. Rabbit – eyes and shadows changes with mouse movement

One of the problem I encountered was to map more than two sets of colors in p5js. I was intending to do a more complicated color mapping with the skyline at first; changing the colors from orange to blue to dark blue as mouseX start at 0, to halfway its width, then to full width. Sort of like a sunset effect. But I was not able to achieve it. One of the residents told me that I might need to bring in the if-else statement to do so.

Full Code Here:

Q: How to map three or more sets of colors for a given width?