BLAST

Experience the Pulse of Classic Sci-Fi

Development Chat Log

Initial App Concept and p5js Panel
Human Prompt

"I am a high school computer science teacher. I want to teach my p5js students how to create a panel of blinking lights like you used to see in the old 'Lost in Space' episodes of the 1960s. I'd like to use HTML, CSS, JavaScript and Bootstrap5 as well as the p5js platform. Can you create a single file for me that does this? It would be nice for it to have the panel of lights on the left and a control panel on the right to control the size, number and color of lights as well as other options that control how they blink randomly."

AI Response

Created lost_in_space_panel.html with a p5.js blinking lights panel and a Bootstrap control panel. Students can adjust the number, size, and color of the lights, the panel background, blink speed, randomness, and toggle synchronized blinking. All code is in one file for easy use.

Naming, Branding, and Theming

Human Comment:
To start this goal of 'branding' I took Copilot's previous work and 'shoehorned' it into code I obtained from a template at TNT. This template matches TNT's 'look and feel' and expedites the development process. If you look at that template source code you can study it's chat log to see how it was developed. From this starting place (and a bit of tweaking and fussing) I continued my Copilot prompting as you see below.

"I need a memorable 'spiffy' high-tech acronym for the app. Can you suggest a few names?"

Suggested several acronyms, including BLAST (Blinking Lights And Simulation Terminal), which was chosen for the app. Other suggestions included:

  • LISCON – Lost In Space Console Operations Nexus
  • SPARK – Simulation Panel for Artificial Retro Kinetics
  • COSMIC – Console Operations Simulation & Machine Interface Console
  • ASTRO – Automated Simulation Terminal for Retro Operations
  • NOVA – Nostalgic Operations Visualizer & Animator
  • ORBIT – Operations & Retro Blinking Interface Terminal
  • PULSE – Panel User Light Simulation Engine

BLAST was selected and the app title, navbar, and jumbotron were updated to use the new branding.

"What's a thematic tagline for this app rather than 'off we go'?"

Suggested several taglines. The chosen tagline: "Experience the Pulse of Classic Sci-Fi" was incorporated into the jumbotron.

UI/UX Improvements and Modal Intro

"The introDiv takes up too much vertical space and pushes the app basically out of sight as the app loads. Can you create a button under the 'Stage No' indicator and upon a click, launch a modal with the contents of the intro div?"

Moved the intro content into a Bootstrap modal. Added an 'About This App' button under the Stage No indicator to trigger the modal, keeping the intro accessible but not intrusive.

Control Panel Layout and Compactness

"To make the app control panel shorter vertically, can you move the Panel Background button to the right of the Light Color button?"

Refactored the control panel so the Panel Background color input sits to the right of the Light Color input, reducing vertical space and improving usability.

Adding and Wiring Up the Music Button

"Can you add a music button to toggle background music for the app?"

Added a music toggle button to the jumbotron. The button uses Bootstrap styling and toggles playback of a background audio element. The button icon updates to reflect the play/pause state. The implementation included:

  • Adding an <audio> element with the music file.
  • Adding a button with a music note icon.
  • JavaScript to play/pause the music and update the icon.

This feature demonstrates how to integrate multimedia controls into a web app and wire up UI elements to JavaScript event handlers.

Iterative Development and Educational Value

This project demonstrates the power of iterative, collaborative development using AI tools like GitHub Copilot. Key educational takeaways include:

  • How to break down a project into manageable steps and document progress.
  • How to use Bootstrap and p5.js together for interactive, visually appealing web apps.
  • How to refactor UI for better usability and accessibility.
  • How to integrate multimedia and advanced UI features (modals, icons, etc.).
  • How to document the development process for teaching and learning.

For the full app and source code, see BLAST: Blinking Lights And Simulation Terminal.