BLAST

The music button lets users play or pause background music in the app. Here's how it works, step by step, with code and explanations for beginners:

// Get references to DOM elements
const musicBtn = document.getElementById('musicToggle');
const music = document.getElementById('bgMusic');
const musicIcon = document.getElementById('musicIcon');
let musicPlaying = false;

function updateMusicIcon() {
  musicIcon.className = musicPlaying ? 'bi bi-pause-circle' : 'bi bi-music-note-beamed';
}

musicBtn.addEventListener('click', () => {
  if (musicPlaying) {
    music.pause();
  } else {
    music.play();
  }
});

music.addEventListener('play', () => {
  musicPlaying = true;
  updateMusicIcon();
});
music.addEventListener('pause', () => {
  musicPlaying = false;
  updateMusicIcon();
});
updateMusicIcon();

• Getting DOM elements: getElementById finds the button, audio, and icon elements in the HTML.
• updateMusicIcon: Changes the icon to a pause or music note depending on whether music is playing.
• Button click event: When the button is clicked, it either plays or pauses the music.
• Audio events: When the music starts or stops, the icon updates to match.
• Responsive logic: If the music button is hidden (on very small screens), the music is automatically paused so it doesn't play without a visible control.

This code is a great example of how JavaScript interacts with the DOM to make web pages interactive. Try changing the icon, button, or music file to experiment further!

How the 3D Light Effect Was Created

This section explains, step by step, how the 3D light effect was implemented in the BLAST app. You'll see the HTML, CSS, and JavaScript involved, with tips on how to fine-tune the effect. This is a great way for novices to learn about the DOM, creative coding, and interactive UI design.

1. HTML: Adding the 3D Controls

We added a 3D switch and a shine slider to the control panel. Here is the relevant HTML snippet:

<div class="mb-3 row g-2 align-items-center">
    <div class="col-auto form-check">
        <input type="checkbox" class="form-check-input" id="threeDSwitch">
        <label class="form-check-label" for="threeDSwitch">3D</label>
    </div>
    <div class="col-auto align-self-center" id="shineSliderCol" style="display:none; min-width:150px;">
        <label for="shineSlider" class="form-label mb-0" style="font-size:0.9em;">Shine</label>
        <input type="range" class="form-range" id="shineSlider" min="0" max="10" value="3" style="width:100px; display:inline-block; vertical-align:middle;">
        <span id="shineValueLabel" style="margin-left:6px; font-size:0.95em;">3</span>
    </div>
</div>

• threeDSwitch: Turns the 3D effect on or off.
• shineSlider: Controls the size/strength of the shine (0 = none, 10 = max).
• shineValueLabel: Shows the current shine value as you move the slider.

2. CSS: Styling the Controls

No special CSS is required for the 3D effect itself, but you can style the control panel for clarity and accessibility. For example:

#control-panel label {
    color: #fff;
}

3. JavaScript: Drawing the 3D Lights

The 3D effect is created by drawing each light as a set of concentric circles with a gradient from a brightened base color at the center to the base color at the edge. The shine slider controls how much of the light is shiny. Here is the core logic (using p5.js):

// State
let threeD = false;
let shineAmount = 3; // 0-10, default 3

// UI Handlers
const shineSliderCol = document.getElementById('shineSliderCol');
const shineSlider = document.getElementById('shineSlider');
shineSlider.value = shineAmount;
const shineValueLabel = document.getElementById('shineValueLabel');
shineValueLabel.textContent = shineAmount;
shineSlider.addEventListener('input', e => {
  shineAmount = parseInt(e.target.value);
  shineValueLabel.textContent = shineAmount;
});
document.getElementById('threeDSwitch').addEventListener('change', e => {
  threeD = e.target.checked;
  if (threeD) {
    shineSliderCol.style.display = '';
    shineValueLabel.style.display = '';
  } else {
    shineSliderCol.style.display = 'none';
    shineValueLabel.style.display = 'none';
  }
});

// Drawing the 3D lights
function draw3DSphere(x, y, d, baseColor) {
  let steps = 10; // Number of gradient steps (increase for smoother look)
  let c = color(baseColor);
  let shineT = constrain(shineAmount / 10, 0, 1); // 0 = no shine, 1 = max shine
  if (shineT === 0) {
    fill(c);
    noStroke();
    ellipse(x, y, d);
    return;
  }
  // Calculate a "brightened" base color for the center of the shine
  // Tweak this value to adjust shine strength (e.g., 0.3 = 30% brighter)
  function brighten(col, percent) {
    let r = red(col), g = green(col), b = blue(col);
    r = r + (255 - r) * percent;
    g = g + (255 - g) * percent;
    b = b + (255 - b) * percent;
    return color(r, g, b);
  }
  let brightCol = brighten(c, 0.3); // 0.3 = 30% brighter (tweak here)
  for (let i = steps; i > 0; i--) {
    let t = i / steps;
    let isShine = t <= shineT;
    let r, g, b, a;
    if (isShine) {
      // Blend from brightCol at center to base color at edge of shine
      let blend = Math.pow(t / shineT, 2);
      r = lerp(red(brightCol), red(c), blend);
      g = lerp(green(brightCol), green(c), blend);
      b = lerp(blue(brightCol), blue(c), blend);
      a = lerp(180, 0, t / shineT);
    } else {
      r = red(c);
      g = green(c);
      b = blue(c);
      a = lerp(180, 60, t);
    }
    fill(r, g, b, a);
    noStroke();
    ellipse(x, y, d * t);
  }
}

4. How to Fine-Tune the Effect

• Shine Strength: Change let brightCol = brighten(c, 0.3); to a higher or lower value (e.g., 0.2 for less shine, 0.5 for more) to adjust how bright the center is.
• Gradient Smoothness: Increase steps for a smoother gradient, or decrease for a more "chunky" look.
• Shine Range: Adjust the max value of the shine slider in the HTML to allow more or less shine.
• Blend Curve: The Math.pow(t / shineT, 2) controls how quickly the shine fades. Try changing the exponent for a different falloff.

5. What Can Novices Learn?

• How to use HTML to add interactive controls to a web app.
• How to use JavaScript to connect UI controls to visual effects.
• How to use the DOM to show/hide elements and update values live.
• How to use math and color blending to create realistic visual effects.
• How to structure code for clarity and easy experimentation.

Try changing the values above and see how the lights look! This is a great way to learn about the DOM, JavaScript, and creative coding.