P5.js: A Pacman Animation

After learning the basics of P5.js such as made a drawing using primitive 2D shapes, then the next step is to create an animation. P5.js is actually a really cool framework to make animations. There are plenty functions that can be used easily. But still, it wasn’t that easy for me to create an animation I wanted. I was still having a hard time figuring out how to playing with objects and variables.

(TL;DR here’s the final Pacman!)

In this project, there are 3 different components: (1) elements controlled by mouse, (2) elements that animate over time, and (3) elements that are different every time this project is played.

Elements controlled by mouse

There are 2 elements controlled by mouse in this project: (1) a rectangle that moves as the mouse moves, and (2) the Pacman will be hidden (change color to black) when the mouse is clicked.

I was planning to make the Pacman changed color from yellow to red, but unfortunately I couldn’t figure out how to use a variable in an object. So, instead of using RGB color, I used gray scale color and I could only change the color between black and white.

Here’s the code how I change the Pacman color when the mouse is clicked.

function mouseClicked() {
  if (colorValue == 255) {
    colorValue = 0;
  } else {
    colorValue = 255;

And here’s the code how a rectangle will move as mouse moves.

 // mouse
rect(mouseX, mouseY, 15, 15);

Elements animate over time

There are several elements that animate over time, using color changes and moving object. In color changes, I stored values in variables and adding the values over time. For example on the title, the R/G/B value will increment from 0-255 while draw function is called in loops.

// title A
if (gRed <= 255) {
  fill(255, gRed, 20);
  triangle(160, 80, 200, 170, 120, 170);
} else {
  gRed = 0;

For the moving object (example: Pacman), I used variables for X position, speed, and direction. They will increment while draw function is called.

// Pacman
xPac = xPac + (speed*10) * direction;
if ((xPac > width-diameterPacman) || (xPac < diameterPacman)) {
  direction = -direction;
} if (direction == 1) {
  arc(xPac, 350, diameterPacman, diameterPacman, 0.5, 5.5);
} else {
  arc(xPac, 350, diameterPacman, diameterPacman, 3.5, 8.9);

Elements that are different every time it is played

I wanted to make the background that would change the color. And I planned to make it like an old TV. Since P5.js has random() function, I thought it would help me. But if I wanted to make it looks like an old TV, it had to be shaped from tiny rectangles. Since I thought it would be a very hard work to draw every rectangles, then I used the for loop to draws those tiny rectangles. The for loop was used for repetition. It repeated every rectangle drawing.

Here’s the for loop code that I used.

// background
for (let i = 0; i < 67; i++) {
  for(let j = 0; j < 67; j++) {
    fill(random() * 100);
    rect(rectxPacPos + (rectxPacNexPact * i), rectYPos + (rectYNexPact * j), 40, 600);

Overall, it was a very exciting project. Even though there are some things that I don’t really understand how it works. Here’s the final Pacman animation! Also, you can see the code here.


Leave a Reply

Your email address will not be published. Required fields are marked *