import {
    Application,
    AudioAnalyser,
    BeatDetector,
    Color,
    Music,
    Scene,
    Text,
    Texture,
    Vector,
} from '@codexo/exojs';
import {
    AlphaFadeOverLifetime,
    ConeDirection,
    Constant,
    particlesExtension,
    ParticleSystem,
    RateSpawn,
} from '@codexo/exojs-particles';
import { mountControls } from '@examples/runtime';

const app = new Application({
    canvas: {
        width: 1280,
        height: 720,
        mount: document.body,
        sizingMode: 'fit',
    },
    clearColor: Color.black,
    extensions: [particlesExtension],
});

const colors = [new Color(255, 120, 140), new Color(120, 220, 255), new Color(130, 255, 170), new Color(255, 220, 120)];

class AudioReactiveParticlesScene extends Scene {
    private music!: Music;
    private analyser!: AudioAnalyser;
    private detector!: BeatDetector;
    private ps!: ParticleSystem;
    private spawn!: RateSpawn;
    private rate!: Constant<number>;
    private cone!: ConeDirection;
    private hud!: ReturnType<typeof mountControls>;
    private tapPrompt!: Text;

    override async load(loader): Promise<void> {
        await loader.load(Music, { track: assets.demo.audio.musicLoop });
        await loader.load(Texture, { particle: assets.demo.textures.particleLight });
    }

    override init(loader): void {
        const { width, height } = this.app.canvas;

        this.music = loader.get(Music, 'track');

        // Two parallel taps of the same track: the analyser gives per-band
        // energy (drives emission), the detector gives beats (recolours).
        this.analyser = new AudioAnalyser({ fftSize: 1024, source: this.music });
        this.detector = new BeatDetector();
        this.detector.source = this.music;

        this.ps = new ParticleSystem(loader.get(Texture, 'particle'), { capacity: 6000 });
        this.ps.setPosition(width / 2, height / 2);

        // The rate (density) and the cone speed range (spread) are mutated every
        // frame from live audio energy. Starting both near zero means a silent
        // track emits (almost) nothing — the field is genuinely data-driven, not
        // a timed fountain dressed up as "reactive".
        this.rate = new Constant(0);
        this.cone = ConeDirection.omni(20, 40);
        this.spawn = new RateSpawn({
            rate: this.rate,
            lifetime: new Constant(0.9),
            position: new Constant(new Vector(0, 0)),
            velocity: this.cone,
            scale: new Constant(new Vector(0.22, 0.22)),
            tint: new Constant(colors[0]),
        });
        this.ps.addSpawnModule(this.spawn);
        this.ps.addUpdateModule(new AlphaFadeOverLifetime());

        // Beats only recolour the stream; they do not fake emission on their own.
        this.detector.onBeat.add(() => {
            this.spawn.config.tint = new Constant(colors[(Math.random() * colors.length) | 0]);
        });

        this.hud = mountControls({
            title: 'Audio Reactive Particles',
            controls: [{ keys: 'Audio', action: 'bass → density · treble → spread' }],
            status: 'Listening…',
            hint: 'Density follows low-band energy; spread follows high-band energy. Silence = still.',
        });

        // Shown while the browser still blocks audio (`app.audio.locked`); the
        // first click or keypress unlocks it and the queued music starts.
        this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
            .setAnchor(0.5, 0.5)
            .setPosition(width / 2, height - 64);

        // Core defers playback until the AudioContext unlocks on the first
        // gesture, then starts automatically — just call play().
        this.music.setLoop(true).setVolume(0.8).play();
    }

    override update(delta): void {
        // Low band (bass) drives how MANY particles spawn this second.
        const low = this.analyser.getBandEnergy(20, 180);
        // High band (treble) drives how WIDE the velocity cone fans out.
        const high = this.analyser.getBandEnergy(2000, 16000);

        // bass → density: 0 in silence, up to ~1200 particles/s on heavy bass.
        this.rate.value = low * low * 1200;

        // treble → spread: a tight slow core grows into a fast wide burst.
        this.cone.minSpeed = 40 + high * 120;
        this.cone.maxSpeed = 90 + high * 360;

        if (!this.music.paused) {
            this.hud.setStatus(`bass ${(low * 100) | 0}%  treble ${(high * 100) | 0}%`);
        }

        this.ps.update(delta);
    }

    override draw(context): void {
        context.backend.clear();
        context.render(this.ps);

        if (this.app.audio.locked) {
            context.render(this.tapPrompt);
        }
    }
}

app.start(new AudioReactiveParticlesScene());

import { Application, AudioAnalyser, Color, Music, Scene, Sprite, Text, Texture, View } from '@codexo/exojs';
import { mountControls } from '@examples/runtime';

const app = new Application({
    canvas: {
        width: 1280,
        height: 720,
        mount: document.body,
        sizingMode: 'fit',
    },
    clearColor: Color.black,
});

class LowBandCameraShakeScene extends Scene {
    private music!: Music;
    private analyser!: AudioAnalyser;
    private view!: View;
    private sprite!: Sprite;
    private hud!: ReturnType<typeof mountControls>;
    private tapPrompt!: Text;

    override async load(loader): Promise<void> {
        await loader.load(Music, { track: assets.demo.audio.musicLoop });
        await loader.load(Texture, { ship: assets.demo.textures.shipA });
    }

    override init(loader): void {
        const { width, height } = this.app.canvas;

        this.music = loader.get(Music, 'track');
        this.analyser = new AudioAnalyser({ fftSize: 1024, source: this.music });
        this.view = new View(width / 2, height / 2, width, height);
        this.sprite = new Sprite(loader.get(Texture, 'ship')).setAnchor(0.5).setScale(3).setPosition(width / 2, height / 2);

        this.hud = mountControls({
            title: 'Low Band Camera Shake',
            controls: [{ keys: 'Audio', action: 'low-band energy → shake' }],
            status: 'Listening…',
            hint: 'Shake amplitude tracks bass energy only — in silence the camera is perfectly still.',
        });

        // Shown while the browser still blocks audio (`app.audio.locked`); the
        // first click or keypress unlocks it and the queued music starts.
        this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
            .setAnchor(0.5, 0.5)
            .setPosition(width / 2, height - 64);

        // Core defers playback until the AudioContext unlocks on the first
        // gesture, then starts automatically — just call play().
        this.music.setLoop(true).setVolume(0.8).play();
    }

    override update(delta): void {
        const low = this.analyser.getBandEnergy(20, 180);

        // No constant floor: amplitude is purely low-band energy, so a quiet
        // passage produces zero shake. A small deadzone keeps faint noise still.
        const amplitude = low > 0.04 ? low * 28 : 0;
        this.view.shake(amplitude, 90, { decay: true, frequency: 22 });

        // Advance the shake oscillation (the View only animates when updated).
        this.view.update(delta.milliseconds);

        if (!this.music.paused) {
            this.hud.setStatus(`bass ${(low * 100) | 0}%`);
        }
    }

    override draw(context): void {
        context.backend.clear(new Color(22, 24, 34));
        context.backend.setView(this.view);
        context.render(this.sprite);
        context.backend.setView(null);

        if (this.app.audio.locked) {
            context.render(this.tapPrompt);
        }
    }
}

app.start(new LowBandCameraShakeScene());