Psychedelica

The first screen is a warning

Psychedelica does not start when you open it. It shows you this, and waits:

This application provides an immersive simulation through vivid visual and audio outputs. Itincludes flashing lights, rapidly changing colors, dynamic objects, and intense audio effects.

Then a Proceed button. Nothing renders and nothing plays until you press it.

For a portfolio piece built to be impressive on sight, putting a wall of text in front of the impressive part is the opposite of what the format rewards. It is also correct. Photosensitive epilepsy is triggered by exactly this: flashing, high-contrast, rapidly changing colour. The Web Content Accessibility Guidelines set the threshold at three flashes per second (WCAG 2.3.1), and a gate the user has to clear is the accepted way to handle content that may cross it.

Every other project on this list opens straight into the work. This one asks first, and that decision costs it the thing a demo is usually optimised for.

Past the gate

Dozens of wireframe and point-cloud primitives, toruses, icosahedra, cones and cubes, drifting across a saturated field, with Tone.js driving sound that moves with them. Psychedelica.js holds the scene and PsychedelicMusic.js the audio, and the two run against the same clock so the visuals and the soundscape stay in step rather than merely coexisting.

It is a PWA, so it installs and runs offline. At 28MB the repository is by far the largest of the five, which is what a project made of geometry and audio assets costs.

Built in a day

Three commits, all on 20 September 2024. The default Vue scaffold is still in the tree next to the real code: HelloWorld.vue, TheWelcome.vue, WelcomeItem.vue and the whole icons/ directory shipped from npm create vue and were never deleted. The parts that mattered got the attention, and the starter files were left where they fell.

Links

Live: psychedelica.abchaudary.me. Source: github.com/abdullahchaudary/psychedelica.