CxD Archive
Code: Trivia App
Code: Trivia App
  • About
  • Prerequisite Knowledge
  • Code Template
    • Template Build Tutorial
      • 1. Screens as Containers
      • 2. Welcome Screen
      • 3. Question Screen
      • 4. Thank You Screen
      • 5. Core JS Functions
      • 6. Load Questions and Go
      • 7. Respond to Answer Clicks
      • 8. Finishing the Game
      • 9. Visual Enhancement
    • Managing the Question DB
  • More
    • Code Mod Examples
      • Style Changes with CSS
      • Support True/False Questions
      • Add "Next Question" Button
      • Add a Category Selection Screen
      • Add Sound Effects on Answer Clicks
      • Add Basic Scoring
      • Add a Question Timer
      • Add a Question Timer with Pause Button
      • Custom Feedback Text for Individual Questions
      • Use Images with Questions
      • Display the Total Question Count at Welcome
      • Add Background Animation
    • Trivia JS Library Reference
    • P5.js
    • ★ Trivia Project Guidebook
Powered by GitBook
On this page
  • Spinning Block Example
  • Other Example Animations
Export as PDF
  1. More
  2. Code Mod Examples

Add Background Animation

PreviousDisplay the Total Question Count at WelcomeNextTrivia JS Library Reference

Last updated 6 years ago

Spinning Block Example

The function below uses p5.js functions to create a spinning block that you can add to your app background.

1 - Add the following function to the bottom of your JavaScript.

JavaScript
function spinningBlock() { 
    background("gray"); 
    translate(width / 2, height / 2); //move to the middle
    rotate(PI / 90 * frameCount); //rotate more with each frame
    rect(-26, -26, 52, 52); //place the rectangle
}

2 - Now you simply need to call this function when you want it to display in the background. In the example below, spinningBlock( ) is called in the draw( ) function when the trivia game state is "welcome" on line 3. If you want, you can choose to call the function at a different point.

JavaScript
//Loops continously for background effects and animations. (p5.js)
function draw() {
  if (trivia.state == "welcome") spinningBlock();
  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");
}

Other Example Animations

Here are more examples of custom animation functions that could be implemented like the spinningBlock() above.

//Just a ball that bounces around on the screen
function ballInBox() {
  background("gray");
  //adjust ball x/y positions based on frameCount
  //and know when to "bounce"
  var x = frameCount%width;
  if (floor(frameCount/width)%2 == 0) x = width - x;
  var y = frameCount*1.3%height;
  if (floor(frameCount*1.3/height)%2 == 0) y = height - y;
  translate(x, y);
  ellipse(0, 0, 3, 3);
}
//balloons rising to the top
function balloons() {
  background("gray");
  var sFrame = floor(frameCount / (4*height))*4*height; //starting frame for looping
  for (var i = 0; i < 30; i++) { //let's do 30 balloons
    randomSeed(10510 * i + 2); //ensures a repeatable random #
    var y = int(random(height*4) - (frameCount - sFrame)/2);
    randomSeed(30260 * i + 1); //ensures another repeatable random #
    var x = int(random(width));
    fill("red");
    line(x, y, x, y + 30);//balloon string
    ellipse(x, y, 10, 15);//balloon
  }
}

The spinningBlock is a simple example of adding an animation to your background, but you can come up with your own animation and call it something different than spinningBlock( ). For example, you may choose to create an animation that looks like balloons rising up and call it balloons( ). It may be challenging, but you can use functions from the (as we did above for the spinning block) to create some really interesting animations.

p5.js
spinningBlock( )
ballInBox( )
balloons( )