This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

I did an interactive application using ThreeJS, Audio API, and Shaders, 9 scenes show different interactive fractals and effects applied.
You can access it from a cellphone or a computer. I recommend using headphones to enjoy the experience.

URL Parameters

You can switch between different initial visual modes using URL parameters, this will apply only to the first scene:

• ?effect=basic - Basic 3D scene with objects
• ?effect=psychedelic - Psychedelic shader effect
• ?effect=crt - CRT distortion effect (default)

Demo

Demo

Code Repository

Code

How I Used Amazon Q Developer

I created a super big prompt following some rules like:

• Assigning a personality to the IA (You are a WebGL Expert)
• Detailed instructions in each scene to create the screens and the shaders
• Added a basic structure and mapped the audio files, I get the files from pixabay (royalty free files).

Prompt

You are an expert in Shaders, webGL and ThreeJS. Create a minimal HTML file for a WebGL-based demo using Three.js. The canvas must fill the entire browser window with no scrollbars and load a JavaScript module named main.js. In main.js, do the following:

Scene 1: Psychedelic Intro

• Create a full-screen plane using a custom ShaderMaterial.
  Pass u_time and u_resolution as uniforms to both vertex and fragment shaders.

• Animate the scene using requestAnimationFrame.

• Write a basic vertex shader that directly passes the vertex position to gl_Position.

• Write a fragment shader that displays a colorful, animated, psychedelic effect using sine and cosine waves. Colors should change over time to evoke a retro 90s visual style.

• Overlay a CRT-style distortion effect: simulate scanlines, screen curvature, and RGB channel offsets to mimic an old monitor.

• Add a scrolling text banner like the Star Wars intro (from bottom to top), using either HTML/CSS or a Three.js text mesh.
  Load and autoplay a looping background track (assets/music1.mp3).

• Handle browser autoplay restrictions and add a button to mute/unmute the music.

Scenes 2 to 6: Interactive Fractal Visuals
For each of the following five full-screen WebGL scenes, use a new fragment shader and its own background music:

• In Scene 2 (Sierpinski): X-axis controls scale, Y-axis controls variation
  • In Scene 3 (Julia): Mouse position changes the constants in the Julia set equation
  • In Scene 4 (Mandelbrot): Mouse position changes the view offset
  • In Scene 5 (Newton-Raphson): X-axis controls polynomial degree, Y-axis controls relaxation factor
  • In Scene 6 (Menger Sponge): X-axis controls scale, Y-axis controls variation
  • In Scene 7 (Koch Curve): X-axis controls scale, Y-axis controls iterations
  • In Scene 8 (Blood Vessels): X-axis controls scale, Y-axis controls detail
  • In Scene 9 (Atoms): X-axis controls atom size, Y-axis controls number of electrons

For all fractal scenes:

• Use ShaderMaterial with full-screen fragment shaders.
• Use u_time, u_resolution, and u_mouse as uniforms.
• Update fractal constants dynamically based on mouse movement.
• Each scene should render and update in real time.

Navigation

• Create a menu on the main page to switch between all the scenes.
• When a scene loads, the corresponding music file should also load and autoplay.
• For each scene containing a fractal, implement real-time dynamic interaction based on mouse movement. The mouse position should modify the constants used in the fractal’s equation. Each shader must include u_time and u_resolution uniforms, and the fractal should be rendered in real time. Create a navigation button on the main page that links to each individual fractal scene. Additionally, load and play the corresponding .mp3 audio file for each scene when it loads.
• In all scenes that display fractals, add a fixed text element centered on the screen. This text should show the mathematical formula of the corresponding fractal. Ensure the text has a legible color with sufficient contrast against the background. Additionally, implement a subtle flowing animation (e.g., shimmer or gentle wave) triggered when the user hovers the mouse over the text.
• Add this text in the center of the screen in the scene 9: "In the sacred dance of the universe, fractals mirror the infinite within the finite, each pattern echoing the breath of creation. Quantum physics whispers that reality is not solid, but woven from probabilities—just as fractals emerge from simple laws into endless complexity. In this harmony, spirit and science converge, revealing that the cosmos may be a divine self-reflecting dream." This quote won't overlap the formula text,

Notes

Check the README in github to see all the documentation, which algorithms used, etc.