WEEK 11 (final project)

(final creative coding project)

For this week, we propose, design, and begin implementing our final class project. The assignment asks for a short description (1–3 sentences) and a list of at least 5–10 knowns and unknowns about the project.

My Final Project Proposal

For my final project, I’m creating a gacha-style character pulling game built with p5.js. Players can perform single pulls or 10-pulls to reveal randomized characters of different rarities. Each pull displays fully illustrated card artwork, and the player gradually builds a collection over time.

Knowns

  • I am using p5.js for drawing, layout, animation, and the card reveal system.
  • Characters have rarities (Common, Uncommon, Rare, Epic, Super Rare, Legendary).
  • Pulls use a weighted randomness system.
  • The game supports both Single Pull and 10-Pull modes.
  • I track the player's collection and count duplicates.
  • All character art is loaded as PNG card images stored in /public/cards.
  • The UI for pulling is built with regular HTML buttons (not p5 buttons).
  • The canvas is responsive and centered using Bootstrap.
  • The layout mimics professional gacha UIs.

Unknowns

  • What sort of animation effects to use on rare or legendary pulls.
  • Whether to add sound effects for reveals.
  • Whether to include a detailed card information popup on click.
  • If I want multiple banners with different character pools.
  • Whether to save the collection using localStorage.
  • How large the final character pool will be.
  • Whether to include animated backgrounds or particle effects.
  • Possible UI refinements for the “collection” panel.
  • If I want to add a pity meter for guaranteed high-rarity pulls.

Week 11 – Gacha Game (p5.js)

Click Single Pull or 10-Pull to reveal beautifully illustrated characters, each with their own rarity and artwork.

Week 11 Summary

A polished gacha-style character pulling game built with p5.js. Includes sprite artwork, rarity-based randomness, a growing collection system, and a responsive UI. This project demonstrates animation, image loading, interactivity, state management, and custom visual design.