> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-trivia-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-trivia-app/code-template/template-build-tutorial/9.-visual-enhancement.md).

# 9. Visual Enhancement

### Using P5.js to Add Animation (Optional)

Let's include a function that will enable you to create fancy animations later. **Add the following function just after your setup( ) function.** Examples of how to add visual effects to your trivia game are available in the [code examples section](/code-trivia-app/more/code-mod-examples.md), but for now we will simply change the background color.

{% code title="JavaScript" %}

```javascript
//Loops continously for background effects and animations. (p5.js)
function draw() {
  if (trivia.state == "welcome") background("yellow");
  else if (trivia.state == "question") background("lightblue");
  else if (trivia.state == "correct") background("green");
  else if (trivia.state == "incorrect") background("red");
  else if (trivia.state == "thankyou") background("orange");
}
```

{% endcode %}

**You will also need to add the following code to the end of your CSS.**

{% code title="CSS" %}

```css
canvas {
  min-width: 100vw;
  min-height: 100vh; 
  position: absolute;
  top: 0;
  z-index: -1;
}
```

{% endcode %}

You should now see that the screen’s background color changes based on the current state of the game.