wambamjam.js

// live here: https://schollz.com/wambamjam/

var mouseX = 0;
var mouseY = 0;
var started = 0;
var playNext = false;
var doFly = false;
var doStop = false;
const comp = new Tone.Compressor(-30, 3).toDestination();
// const comp = new Tone.PanVol(0,-12).toDestination();
var drumSequence = [];
var drumSequenceLength = 0;
var vocalSequence = [];
var vocalSequenceLength = 0;
var seedTime = Date.now();

function cyrb128(str) {
    let h1 = 1779033703,
        h2 = 3144134277,
        h3 = 1013904242,
        h4 = 2773480762;
    for (let i = 0, k; i < str.length; i++) {
        k = str.charCodeAt(i);
        h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
        h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
        h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
        h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
    }
    h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
    h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
    h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
    h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
    h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
    return [h1 >>> 0, h2 >>> 0, h3 >>> 0, h4 >>> 0];
}

function sfc32(a, b, c, d) {
    return function() {
        a |= 0;
        b |= 0;
        c |= 0;
        d |= 0;
        let t = (a + b | 0) + d | 0;
        d = d + 1 | 0;
        a = b ^ b >>> 9;
        b = c + (c << 3) | 0;
        c = (c << 21 | c >>> 11);
        c = c + t | 0;
        return (t >>> 0) / 4294967296;
    }
}

function moveBlock(x, y) {
    if (x && y) {
        document.getElementById('block').style.display = 'block';
        document.getElementById('block').style.left =
            (x * document.getElementById('content').clientWidth - 50) + 'px';
        document.getElementById('block').style.top =
            (y * document.getElementById('content').clientHeight - 50) + 'px';
        let randomSeed = x * 1000 + y;
        // Create cyrb128 state:
        var seed = cyrb128(seedTime + '' + randomSeed);
        // Four 32-bit component hashes provide the seed for sfc32.
        var rand = sfc32(seed[0], seed[1], seed[2], seed[3]);

        drumSequenceLength = 4;
        drumSequence = [];
        for (let i = 0; i < drumSequenceLength; i++) {
            drumSequence.push(Math.floor(rand() * 16));
        }
        vocalSequenceLength = 4;
        vocalSequence = [];
        for (let i = 0; i < vocalSequenceLength; i++) {
            vocalSequence.push(Math.floor(rand() * 16));
        }

    } else {
        document.getElementById('block').style.display = 'none';
        vocalSequenceLength = 0;
        drumSequenceLength = 0;
    }
}

function getInspirationalQuote() {
    const quotes = [
        'The only way to do great work is to love what you do.',
        'It is never too late to be what you might have been.',
        'You must be the change you wish to see in the world.',
        'What you get by achieving your goals is not as important as what you become by achieving your goals.',
        'Believe you can and you\'re halfway there.',
        'I have not failed. I\'ve just found 10,000 ways that won\'t work.',
        'To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.',
        'Success is not how high you have climbed, but how you make a positive difference to the world.',
        'Happiness is not something ready made. It comes from your own actions.',
        'Whatever the mind of man can conceive and believe, it can achieve.',
        'Strive not to be a success, but rather to be of value.',
        'Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.',
        'I attribute my success to this: I never gave or took any excuse.',
        'You miss 100% of the shots you don’t take.',
        'I\'ve missed more than 9000 shots in my career. I\'ve lost almost 300 games. 26 times, I\'ve been trusted to take the game winning shot and missed. I\'ve failed over and over and over again in my life. And that is why I succeed.',
        'The most difficult thing is the decision to act, the rest is merely tenacity.',
        'Every strike brings me closer to the next home run.',
        'Definiteness of purpose is the starting point of all achievement.',
        'Life isn\'t about getting and having, it\'s about giving and being.',
        'Life is what happens to you while you’re busy making other plans.',
        'We become what we think about.',
        'Life is 10% what happens to us and 90% how we react to it.',
        'The most common way people give up their power is by thinking they don’t have any.',
        'The mind is everything. What you think you become.',
        'The best time to plant a tree was 20 years ago. The second best time is now.',
        'An unexamined life is not worth living.',
        'Eighty percent of success is showing up.',
        'Your time is limited, don’t waste it living someone else’s life.',
        'Winning isn’t everything, but wanting to win is.',
        'I am not a product of my circumstances. I am a product of my decisions.',
        'The future belongs to those who believe in the beauty of their dreams.',
        'What lies behind us and what lies before us are tiny matters compared to what lies within us.',
        'The best revenge is massive success.',
        'Believe you can and you’re halfway there.',
        'Do one thing every day that scares you.',
        'What we think, we become.',
        'The only limit to our realization of tomorrow will be our doubts of today.',
        'It wasn’t raining when Noah built the ark.',
        'The only way to achieve the impossible is to believe it is possible.',
        'The best way to predict the future is to invent it.',
        'The best way out is always through.',
        'Don’t watch the clock; do what it does. Keep going.',
        'The only thing we have to fear is fear itself.',
        'The only person you are destined to become is the person you decide to be.',
        'You must be the change you wish to see in the world.',
        'What you get by achieving your goals is not as important as what you become by achieving your goals.',
        'Believe you can and you\'re halfway there.',
        'I have not failed. I\'ve just found 10,000 ways that won\'t work.',
    ];


    return quotes[Math.floor(Math.random() * quotes.length)];
}

var isBouncing = false;

function makeElementsBounce(stop) {
    if (isBouncing || stop) {
        // unbounce

        // Select all <p> and <span> elements
        const elements = document.querySelectorAll('p, span');
        elements.forEach(element => {
            // Remove the bounce class to stop the animation
            element.classList.remove('element-bounce');
        });


        isBouncing = false;
    } else {
        // Select all <p> and <span> elements
        const elements = document.querySelectorAll('p, span');

        // Iterate over each element and apply the bouncing animation
        elements.forEach(element => {
            // Ensure the element has a position that allows movement
            if (!['absolute', 'fixed', 'relative'].includes(
                    window.getComputedStyle(element).position)) {
                element.style.position = 'relative';
            }

            // Add the bounce class to initiate the animation
            element.classList.add('element-bounce');
        });
        isBouncing = true;
    }
}

function makeElementsFly() {
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

    // Select all <p> and <span> elements
    const elements = document.querySelectorAll('p, span');

    elements.forEach(element => {
        // Ensure the element can move freely
        if (window.getComputedStyle(element).position !== 'absolute') {
            element.style.position = 'absolute';
        }

        // Randomize initial position
        element.style.left = `${Math.random() * screenWidth}px`;
        element.style.top = `${Math.random() * screenHeight}px`;

        // Function to move each element randomly
        setInterval(() => {
            const dx = (Math.random() - 0.5) * 20; // Change in position (x-axis)
            const dy = (Math.random() - 0.5) * 20; // Change in position (y-axis)

            // Compute new position
            let newX = parseFloat(element.style.left) + dx;
            let newY = parseFloat(element.style.top) + dy;

            // Ensure elements stay within screen bounds
            newX = Math.min(Math.max(newX, 0), screenWidth - element.offsetWidth);
            newY = Math.min(Math.max(newY, 0), screenHeight - element.offsetHeight);

            element.style.left = `${newX}px`;
            element.style.top = `${newY}px`;
        }, 50); // Update position every 50 milliseconds
    });
}

class AudioPlayer {
    constructor(
        contentId, audioFile = 'loop_beats32.wav', playerCount = 10, id = 1,
        distortion = false) {
        this.contentElement = document.getElementById(contentId);
        this.audioFile = audioFile;
        this.playerCount = playerCount;
        this.players = [];
        this.crossfade = 5; // milliseconds
        this.playerIndex = 0;
        this.playPosition = 0;
        this.started = false;
        this.id = id;
        this.pan = new Tone.PanVol(0, -6);
        this.do_distortion = distortion;
        this.gogogo = false;

        for (let i = 0; i < this.playerCount; i++) {
            const player = new Tone.Player({
                url: this.audioFile,
                loop: true,
                fadeIn: this.crossfade / 1000,
                fadeOut: this.crossfade / 1000,
                volume: 0,
            })
            if (this.do_distortion) {
                const dist = new Tone.Distortion(1.0);
                dist.connect(comp);
                this.pan.connect(dist);
                if (i == 0) {
                    let bitrcush = new Tone.BitCrusher(8);
                    player.connect(bitrcush);
                    bitrcush.connect(this.pan);
                } else if (i == 1) {
                    let chorus = new Tone.Chorus(4, 2.5, 0.5);
                    player.connect(chorus);
                    chorus.connect(this.pan);
                } else if (i == 2) {
                    let autofilter = new Tone.AutoFilter('4n').start();
                    player.connect(autofilter);
                    autofilter.connect(this.pan);
                } else {
                    player.connect(this.pan);
                }
            } else {
                if (i == 0) {
                    let bitrcush = new Tone.BitCrusher(8);
                    player.connect(bitrcush);
                    bitrcush.connect(comp);
                } else if (i == 1) {
                    let chorus = new Tone.Chorus(4, 2.5, 0.5);
                    player.connect(chorus);
                    chorus.connect(comp);
                } else if (i == 2) {
                    let autofilter = new Tone.AutoFilter('4n').start();
                    player.connect(autofilter);
                    autofilter.connect(comp);
                } else if (i == 3) {
                    let phaser = new Tone.Phaser()
                    player.connect(phaser);
                    phaser.connect(comp);
                } else if (i == 4) {
                    let chev = new Tone.Chebyshev(2);
                    player.connect(chev);
                    chev.connect(comp);
                } else if (i == 5) {
                    let autopan = new Tone.AutoPanner('4n').start();
                    player.connect(autopan);
                    autopan.connect(comp);
                } else if (i == 6) {
                    let autowah = new Tone.AutoWah(50, 6, -30);
                    player.connect(autowah);
                    autowah.connect(comp);
                } else {
                    player.connect(comp);
                }
            }
            this.players.push(player);
        }
    }

    setAudioFile(audioFile) {
        this.audioFile = audioFile;
        for (let i = 0; i < this.playerCount; i++) {
            this.players[i].load(this.audioFile);
        }
    }

    setPan(pan) {
        this.pan.pan.value = pan;
    }

    setVolume(volume) {
        for (let i = 0; i < this.playerCount; i++) {
            this.players[i].volume.value = volume;
        }
    }

    startPlayer() {
        let y = 1 - mouseY;
        let timeStretch = y < 0.4 ? y : 1;
        let beatsDivided = y < 0.08 ? 128 :
            y < 0.125 ? 64 :
            y < 0.25 ? 32 :
            y < 0.33 ? 24 :
            16;

        if (this.id != 2) {
            timeStretch = 1;
            beatsDivided = 16;
        } else {
            if (doFly) {
                makeElementsFly();
            }
        }
        if (timeStretch < 0.125) {
            makeElementsBounce();
        } else {
            makeElementsBounce(true);
        }
        let playerPosition = (this.playPosition % 16) / 16 *
            this.players[this.playerIndex].buffer.duration;
        this.playPosition += timeStretch;
        if (drumSequenceLength > 0 && this.id == 2 && timeStretch == 1) {
            playerPosition =
                drumSequence[Math.floor(this.playPosition) % drumSequenceLength] /
                16 * this.players[this.playerIndex].buffer.duration;
        }
        if (vocalSequenceLength > 0 && this.id == 3 && timeStretch == 1) {
            playerPosition =
                vocalSequence[Math.floor(this.playPosition) % vocalSequenceLength] /
                16 * this.players[this.playerIndex].buffer.duration;
        }

        let playerDuration =
            this.players[this.playerIndex].buffer.duration / beatsDivided;
        playerPosition = Math.max(
            0,
            Math.min(
                playerPosition, this.players[this.playerIndex].buffer.duration));

        let loopEnd = playerPosition + playerDuration;
        loopEnd = Math.max(
            0, Math.min(loopEnd, this.players[this.playerIndex].buffer.duration));

        this.players[this.playerIndex].reverse = mouseX < 0.25;
        console.log(
            'start', this.playerIndex, playerPosition, playerDuration,
            this.players[this.playerIndex].reverse);
        if (this.gogogo) {
            document.getElementById('content').innerHTML +=
                `<span >${getInspirationalQuote()} </span>`;
        }
        this.players[this.playerIndex].start(Tone.now(), playerPosition);

        const stopIndex = this.playerIndex;
        setTimeout(() => {
            this.players[stopIndex].stop();
            console.log('stopped', stopIndex);
            if (!doStop) {
                this.startPlayer();
            }
        }, playerDuration * 1000 - this.crossfade);

        let randomIndex;
        let maxPlayer = this.players.length;
        if (mouseY > 0.7) {
            maxPlayer = 5;
        }
        do {
            randomIndex = Math.floor(Math.random() * this.players.length);
        } while (randomIndex === this.playerIndex);
        this.playerIndex = randomIndex;
    }
}

// Usage:this.startPlayer();
const audioPlayer1 = new AudioPlayer('content', '1.mp3', 10, 0);

const audioPlayer2 = new AudioPlayer('content', '2.mp3', 15, 3);

const audioPlayer3 = new AudioPlayer('content', '3.mp3', 15, 2, true);

const audioPlayer4 = new AudioPlayer('content', '4.mp3', 15, 1);
const audioPlayer5 = new AudioPlayer('content', '5.mp3', 5, 2);

document.addEventListener('mousemove', (event) => {
    if (started > 50) {
        return;
    }
    mouseX = event.clientX / document.getElementById('content').clientWidth;
    mouseY = event.clientY / document.getElementById('content').clientHeight;
    if (mouseX > 0.333 && mouseX < 0.666 && mouseY > 0.333 && mouseY < 0.666) {
        console.log('MOVING BLOCK');
        moveBlock(Math.round(mouseX * 16) / 16, Math.round(mouseY * 16) / 16);
    } else {
        moveBlock();
    }
    if (mouseX < 0.25) {
        document.getElementById('content').style.filter = 'invert(1)';
        document.getElementById('content').style.backgroundColor = 'green';
        document.getElementById('content').style.color = 'yellow';
        // set opacity of backgorund oclor
        document.getElementById('content').style.opacity = 0.3;
    } else {
        document.getElementById('content').style.filter = 'invert(0)';
        document.getElementById('content').style.backgroundColor = 'white';
        document.getElementById('content').style.color = 'black';
        document.getElementById('content').style.opacity = 1;
    }

    if (mouseY < 0.5) {
        // decrease character spacing
        document.getElementById('content').style.letterSpacing = '2px';
    } else {
        // increase character spacing
        document.getElementById('content').style.letterSpacing =
            `${- mouseY * 4}px`;
    }
});

async function registerClick() {
    if (started == 0) {
        started = 1;
        await Tone.start();
        console.log('audio is ready');
        audioPlayer1.startPlayer();
        started = 1;
        // append text to content
        document.getElementById('content').innerHTML += '<p>😾👮  𝐥𝔦𝐒Ｔ乇ภ.  💜♘</p>';
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>.•♫•♬• ϻόVє ᵐ๏𝔲ᔕ€. •♬•♫•.</p>';
        }, 4800);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>🐍🐙  ςĻ𝕚𝒸к 𝓶ᵒᵘŞ𝑒.  🐝♙</p>';
        }, 9000);
    } else if (started == 1) {
        started = started + 1;
        audioPlayer2.startPlayer();
        document.getElementById('content').innerHTML += '<p>l̲e̲t̲</p>';
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>𝓜𝓔</p>';
        }, 1200);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>ⓈĦ𝕠Ⓦ</p>';
        }, 2400);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>Ⓨ𝕦ᵘ𝕌ù𝓾𝔲𝓾𝓾𝓤</p>';
        }, 3600);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>ᑕᒪIᑕK ᗩGᗩIᑎ.</p>';
        }, 9000);
    } else if (started == 2) {
        started = started + 1;
        audioPlayer3.startPlayer();
        audioPlayer3.setVolume(-24)
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>↫↫↫↫↫ мØV𝒆 丅𝐡𝐞 мⓞ𝐔ᔕＥ Ⓓσ𝔴Ｎ Ď𝑜ωή 𝓭ᗝ𝓌ℕ ↬↬↬↬↬.</p>';
        }, 1200);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>click just one more time.</p>';
        }, 9000);
    } else if (started == 3) {
        started = started + 1;
        // change audio file
        audioPlayer4.startPlayer();
        audioPlayer4.setVolume(8);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>lol just</p>';
        }, 8000);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>𝓴𝓲𝓭𝓭𝓲𝓷𝓰.</p>';
        }, 8600);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>click 𝗼𝗻𝗲 𝘭𝘢𝘴𝘵 T҉I҉M҉E҉</p>';
        }, 9000);
    } else if (started == 4) {
        started = started + 1;
        audioPlayer5.startPlayer();
        audioPlayer5.setVolume(6);
        audioPlayer3.setVolume(-16);
        // change audio file
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>click 𝕸𝕺𝕽𝕰!</p>';
        }, 1200);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>at the (っ◔◡◔)っ ♥ BOTTOM RIGHT ♥!!</p>';
        }, 2000);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>c♥l♥i♥c♥k♥ ♥m♥o♥r♥e♥!</p>';
        }, 2600);
        setTimeout(() => {
            document.getElementById('content').innerHTML += '<p>𝓷𝓸𝔀!</p>';
        }, 2800);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>​🇳​​🇴​​🇼​❗</p>';
        }, 3100);
        setTimeout(() => {
            document.getElementById('content').innerHTML +=
                '<p>n⃞    o⃞    w⃞    !⃞!!!!【!】【!】【!】【!】【!】!!!</p>';
        }, 3200);
    } else {
        started = started + 1;
        if (started > 50) {
            doStop = true;
            // stop all
            // audioPlayer1.players.forEach(player => player.stop());
            // audioPlayer2.players.forEach(player => player.stop());
            // audioPlayer3.players.forEach(player => player.stop());
            // audioPlayer4.players.forEach(player => player.stop());
            // audioPlayer5.players.forEach(player => player.stop());
        } else {
            doFly = true;
            let pos = Math.floor(mouseX * 16);
            audioPlayer3.playPosition = pos;
            audioPlayer3.gogogo = true;
            audioPlayer5
            let arrayOfClicks = [
                '匚ㄥ丨匚Ҝ',
                '',
                'ᄃﾚﾉᄃズ',
                '',
                '【c】【l】【i】【c】【k】',
                '',
                '『c』『l』『i』『c』『k』',
                '',
                '≋c≋l≋i≋c≋k≋',
                '',
                '░c░l░i░c░k░',
                '',
                '(っ◔◡◔)っ ♥ click ♥',
                '',
                'ｃｌｉｃｋ　鬱河゛',
                '',
                'ｃｌｉｃｋ　（鬱河゛）',
                '',
                '【ｃｌｉｃｋ】',
                '',
                '˜”*°•.˜”*°• click •°*”˜.•°*”˜',
                '',
                '[̲̅c][̲̅l][̲̅i][̲̅c][̲̅k]',
                '',
                'c҉l҉i҉c҉k҉',
                '',
                'çӀìçҟ',
                '',
                'ᑕᒪIᑕK',
                '',
                'ᑢᒪᓰᑢᖽᐸ',
                '',
                'c̶l̶i̶c̶k̶',
                '',
                'c̴l̴i̴c̴k̴',
                '',
                'c̷l̷i̷c̷k̷',
                '',
                'c̲l̲i̲c̲k̲',
                '',
                'c̳l̳i̳c̳k̳',
                '',
                'c̾l̾i̾c̾k̾',
                '',
                'c♥l♥i♥c♥k',
                '',
                'c͎l͎i͎c͎k͎',
                '',
                'c͓̽l͓̽i͓̽c͓̽k͓̽',
                '',
                'Wingdings: ♍︎●︎♓︎♍︎🙵',
                '',
                '🍉 ⋆ 🍦  🎀  𝒸𝓁𝒾𝒸𝓀  🎀  🍦 ⋆ 🍉',
                '',
                '🍩 ⋆ 🍓  🎀  𝒸𝓁𝒾𝒸𝓀  🎀  🍓 ⋆ 🍩',
                '',
                '(¯`·.¸¸.-> °º   🎀  𝒸𝓁𝒾𝒸𝓀  🎀   º° >-.¸¸.·`¯(',
                '',
                '🍎  🎀  𝒸𝓁𝒾𝒸𝓀  🎀  🍎',
                '',
                '✷.  🎀  𝒸𝓁𝒾𝒸𝓀  🎀  .✷',
                '',
                '🐜☠  𝕔ｌｉcк  🔥🐉',
                '',
                '👻🌷  匚ˡⒾČ𝕂  💙🍧',
                '',
                '🎉✊  ςㄥＩｃ𝐤  🐚👻',
                '',
                '💙🏆  ς𝐥ιⓒᵏ  ♘☞',
                '',
                '✊👮  ℂ𝕝Ⓘ𝕔Ҝ  ൠ💚',
                '',
                '🐻💝  𝓬𝕃Ⓘｃк  💎✎',
                '',
                '😂☠  ᑕㄥĮⒸк  🐤🍟',
                '',
                '🐯🐊  Ć𝓵𝐢Ć𝔨  🐍👽',
                '',
                '🐚☠  𝐜𝓛𝕀𝕔Ҝ  🐠ൠ',
                '',
                '↤↤↤↤↤ ℃𝓁𝐢𝐜Ҝ ↦↦↦↦↦'
            ];
            // remove empty strings from array
            arrayOfClicks = arrayOfClicks.filter(function(el) {
                return el != "";
            });

            setTimeout(() => {
                let clickString = "";
                // get a random string from the array
                clickString =
                    arrayOfClicks[Math.floor(Math.random() * arrayOfClicks.length)];
                document.getElementById("content").innerHTML +=
                    "<span>" + clickString + " </span>";
            }, Math.random() * 1200);
        }
    }
}
document.getElementById("content").addEventListener('click', async () => {
    await registerClick();
});
document.getElementById("block").addEventListener('click', async () => {
    await registerClick();
});