• Ideation

https://editor.p5js.org/Sky-Seo/full/cwRyWiTWg

https://editor.p5js.org/Sky-Seo/sketches/cwRyWiTWg

Overview

This code simulates an interactive rain and cup-catching raindrops. Drops of rain fall randomly, and when they hit cups placed on the screen, a unique sound plays for each cup. Users can interact with the scene by clicking to generate drops.

Structure

1. Global Variables

Defines key objects, arrays, and configuration settings.

javascript
Copy code
let cups = [];       // Stores cup objects
let drops = [];      // Stores drop objects
let cupImages = [];  // Stores cup images
let cupSounds = [];  // Stores cup sound effects
let numCups = 5;     // Number of cups
let dropDiameter = 20;   // Diameter of drops
let timing = 50;         // Drop generation interval
let dropSpeed = 1.1;     // Drop speed multiplier
let bg, bg2, rain;       // Background images and rain sound

let lastClick = 0;   // Tracks time of last click
let pause = 4000;    // Pause duration after a click

2. Preloading Assets

Loads images and sounds before the sketch runs.

function preload() {
  // Load images for cups
  for (let i = 0; i < numCups; i++) {
    cupImages = [
      loadImage("cup1-1.png"),
      loadImage("cup2-1.png"),
      loadImage("cup3-1.png"),
      loadImage("cup4-1.png"),
      loadImage("cup5-1.png")
    ];
    // Load sounds for cups
    cupSounds = [
      loadSound("0.mp3"),
      loadSound("1.mp3"),
      loadSound("2.mp3"),
      loadSound("3.mp3"),
      loadSound("4.mp3"),
    ];
  }

  // Load background images and rain sound
  bg = loadImage("bg.jpg");
  bg2 = loadImage("bg2.png");
  rain = loadSound("rain.mp3");
}