<!DOCTYPE html>

<html>

<head>

<style>

html, body {

margin: 0 !important;

padding: 0 !important;

background: #0a0a1b !important;

color: white;

font-family: Arial, sans-serif;

height: 100vh !important;

width: 100vw !important;

overflow: hidden;

position: fixed;

top: 0;

left: 0;

}

* {

margin: 0 !important;

padding: 0 !important;

box-sizing: border-box;

}

canvas {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

height: 100vh !important;

z-index: 1;

background: #0a0a1b !important;

}

/* Base64 images positioned inside the square */

.big-square-container {

position: fixed;

z-index: 10;

pointer-events: none;

/* Temporarily hide to test if this is causing white border */

display: none;

}

.artwork-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.artwork-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

cursor: pointer;

pointer-events: all;

transition: opacity 0.0003s;

}

.artwork-image.hidden {

opacity: 0;

pointer-events: none;

}

.artwork-image.visible {

opacity: 1;

pointer-events: all;

}

.artwork-image.visible:hover {

opacity: 1;

}

.artwork-image img {

width: 100%;

height: 100%;

object-fit: contain;

}

.controls {

display: none !important;

}

.btn {

display: none !important;

}

.status {

display: none !important;

}

.loading {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 200;

background: rgba(0,0,0,0.9);

padding: 30px;

border-radius: 10px;

text-align: center;

}

</style>

</head>

<body>

<h2>Loading Acid Track</h2>

<p>Loading samples and bassline...</p>

</div>

</div>

</div>

// Load Tone.js (your ordinals script)

function loadToneJS() {

return new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = '/content/04813d7748d918bd8a3069cb1823ebc9586f0ce16cd6a97a784581ec38d13062i0';

script.onload = () => {

resolve();

};

script.onerror = (error) => {

reject(error);

};

document.head.appendChild(script);

});

}

// Variables

let canvas, ctx;

let acidSynth, bassFilter;

let isPlaying = false;

let currentStep = 0;

let samplesLoaded = false;

// Visual variables

let kickHitIntensity = 0;

let orangeOverlayAlpha = 10;

let flowOffset = 0;

let squareSize = 0;

let squareX = 0, squareY = 0;

// Line color flashing

let lineColorState = false;

let lastColorFlip = 0;

let colorFlipInterval = 200; // Flash every 200ms

const darkBlue = '#0066ff';

const lightBlue = '#66ccff';

// Auto-toggle variables

let autoToggleInterval;

let frameCounter = 0;

let currentImage = 2; // Start with image 2

let framesPerToggle = 1.1;

let image2Cycles = 1; // Show image 2 for 1 cycle

let image1Cycles = 1; // Show image 1 for 1 cycle

let currentCycle = 0;

// Sample players

let kickPlayer, clapPlayer, hatPlayer, finalPlayer;

// Your ordinal sample URLs

const sampleUrls = {

kick: '/content/73f8110caa1f84e0ea79fc654d43cdc7f6f2be88110938997f0d1351146a1f52i0',

clap: '/content/edb9b5d508556b2b104d390c9c712a712d4643156c669ba73393597ce2e76ae2i0',

hat: '/content/83407a1c9637e53e76e3d4de711b971f557e7876ad96b9b520a8202109521ba1i0',

final: '/content/cfe7e84e28512591c0057ccc41ee2269a8cce4b3561e4d7e1b884b31daadf9c2i0'

};

// YOUR EXACT STRUDEL BASSLINE PATTERN

let strudelPattern = [

{ note: 'C2', play: true },

{ note: 'A1', play: true },

{ note: 'B1', play: true },

{ note: null, play: false },

{ note: 'C2', play: true },

{ note: null, play: false },

{ note: 'B1', play: true },

{ note: 'C2', play: true },

{ note: 'Eb2', play: true },

{ note: null, play: false },

{ note: 'A1', play: true },

{ note: null, play: false },

{ note: 'B1', play: true },

{ note: null, play: false },

{ note: 'C2', play: true },

{ note: null, play: false }

];

// Function to handle base64 click - starts/stops track and auto-toggle

function toggleArtwork() {

if (!samplesLoaded) return;

if (isPlaying) {

// Stop everything

stopFullTrack();

stopAutoToggle();

} else {

// Start everything

startFullTrack();

startAutoToggle();

}

function startAutoToggle() {

frameCounter = 0;

currentImage = 2; // Start with image 2

currentCycle = 0;

// Set initial state to image 2

const artwork1 = document.getElementById('artwork1');

const artwork2 = document.getElementById('artwork2');

artwork1.classList.add('hidden');

artwork1.classList.remove('visible');

artwork2.classList.remove('hidden');

artwork2.classList.add('visible');

autoToggleInterval = setInterval(() => {

frameCounter++;

if (frameCounter >= framesPerToggle) {

frameCounter = 0;

currentCycle++;

if (currentImage === 2) {

// We're showing image 2, check if we've completed its cycles

if (currentCycle >= image2Cycles) {

// Switch to image 1

currentImage = 1;

currentCycle = 0;

artwork2.classList.add('hidden');

artwork2.classList.remove('visible');

artwork1.classList.remove('hidden');

artwork1.classList.add('visible');

}

} else {

// We're showing image 1, check if we've completed its cycles

if (currentCycle >= image1Cycles) {

// Switch back to image 2

currentImage = 2;

currentCycle = 0;

artwork1.classList.add('hidden');

artwork1.classList.remove('visible');

artwork2.classList.remove('hidden');

artwork2.classList.add('visible');

}

}, 100); // Adjust timing as needed (100ms = 10fps)

}

function stopAutoToggle() {

if (autoToggleInterval) {

clearInterval(autoToggleInterval);

autoToggleInterval = null;

}

// Function to toggle orange overlay (called by clicking canvas)

function toggleOrangeOverlay() {

orangeOverlayAlpha = orangeOverlayAlpha === 0 ? 10 : 0;

}

function positionArtworkImages() {

const container = document.querySelector('.big-square-container');

if (container) {

// Position inside the square and make it visible

container.style.left = squareX + 'px';

container.style.top = squareY + 'px';

container.style.width = squareSize + 'px';

container.style.height = squareSize + 'px';

container.style.display = 'block'; // Ensure it's visible

}

async function init() {

// Setup canvas

canvas = document.getElementById('visualCanvas');

if (!canvas) return;

ctx = canvas.getContext('2d');

resizeCanvas();

// Start visual loop

animate();

// Position artwork images initially

positionArtworkImages();

// Add canvas click listener for overlay toggle

canvas.addEventListener('click', toggleOrangeOverlay);

// Load Tone.js

await loadToneJS();

// Load samples

await loadSamples();

// Initialize audio

setupAudio();

}

async function loadSamples() {

try {

document.getElementById('loadProgress').textContent = '20%';

kickPlayer = new Tone.Player(sampleUrls.kick).toDestination();

kickPlayer.volume.value = -5;

document.getElementById('loadProgress').textContent = '40%';

clapPlayer = new Tone.Player(sampleUrls.clap).toDestination();

clapPlayer.volume.value = -8;

document.getElementById('loadProgress').textContent = '60%';

hatPlayer = new Tone.Player(sampleUrls.hat).toDestination();

hatPlayer.volume.value = -12;

document.getElementById('loadProgress').textContent = '80%';

finalPlayer = new Tone.Player(sampleUrls.final).toDestination();

finalPlayer.volume.value = 10; // Another 200% louder (was 0, now +6dB)

finalPlayer.playbackRate = 0.95; // Slow down by 5%

await Tone.loaded();

document.getElementById('loadProgress').textContent = '100%';

samplesLoaded = true;

// Hide loading screen when everything is ready

document.getElementById('loadingDiv').style.display = 'none';

} catch (error) {

document.getElementById('loadingDiv').style.display = 'none';

}

function resizeCanvas() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

// Make square fit full height while maintaining square proportions

squareSize = Math.min(canvas.width, canvas.height);

squareX = (canvas.width - squareSize) / 2;

squareY = 0; // Top of screen

// Update artwork position

positionArtworkImages();

}

function setupAudio() {

try {

acidSynth = new Tone.MonoSynth({

oscillator: { type: "sawtooth" },

envelope: { attack: 0.01, decay: 0.4, sustain: 0.3, release: 0.4 }

});

bassFilter = new Tone.Filter({ type: "lowpass", frequency: 250, Q: 22 });

const distortion = new Tone.Distortion(0.3);

acidSynth.chain(bassFilter, distortion, Tone.Destination);

acidSynth.volume.value = -10;

} catch (error) {

// Silent fail

}

function animate() {

ctx.fillStyle = '#0a0a1b';

ctx.fillRect(0, 0, canvas.width, canvas.height);

flowOffset += 0.5;

if (flowOffset > 20) flowOffset = 0;

drawFlowingLines();

// Orange overlay

ctx.globalCompositeOperation = 'overlay';

ctx.fillStyle = `rgba(255, 150, 0, ${orangeOverlayAlpha / 255})`;

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = 'source-over';

requestAnimationFrame(animate);

}

function drawFlowingLines() {

ctx.save();

ctx.beginPath();

ctx.rect(squareX, squareY, squareSize, squareSize);

ctx.clip();

// Flash between colors when playing

let currentLineColor = darkBlue;

if (isPlaying) {

if (Date.now() - lastColorFlip > colorFlipInterval) {

lineColorState = !lineColorState;

lastColorFlip = Date.now();

}

currentLineColor = lineColorState ? lightBlue : darkBlue;

} else {

currentLineColor = '#004499'; // Default static color when stopped

}

for (let y = -20; y < squareSize + 40; y += 20) {

let actualY = squareY + y + flowOffset;

let baseOffset = isPlaying ? Math.sin((y + flowOffset) * 0.1 + Date.now() * 0.002) * 10 : 0;

let reactionOffset = 0;

if (kickHitIntensity > 0 && isPlaying) {

let rippleTime = Date.now() * 0.015;

let rippleFreq = (y + flowOffset) * 0.08;

// Made reaction 3x more violent (was * 25, now * 75)

let ripple = Math.sin(rippleFreq + rippleTime) * kickHitIntensity * 150;

reactionOffset = ripple;

}

let totalOffset = baseOffset + reactionOffset;

ctx.fillStyle = currentLineColor;

ctx.fillRect(squareX + totalOffset, actualY, squareSize, 3);

}

ctx.restore();

// Remove the border - comment out the stroke rectangle

// ctx.strokeStyle = '#333';

// ctx.lineWidth = 2;

// ctx.strokeRect(squareX, squareY, squareSize, squareSize);

if (isPlaying) {

// Bar count text removed

}

kickHitIntensity *= 0.92;

}

async function startFullTrack() {

try {

await Tone.start();

if (!samplesLoaded) return;

isPlaying = true;

currentStep = 0;

Tone.Transport.bpm.value = 123;

Tone.Transport.scheduleRepeat((time) => {

let step = strudelPattern[currentStep % strudelPattern.length];

let stepIn16 = currentStep % 16;

let barCount = Math.floor(currentStep / 16) % 16;

// BASSLINE

if (step.play && step.note) {

if (!(barCount === 15 && stepIn16 >= 9)) {

acidSynth.triggerAttackRelease(step.note, "16n", time, 0.8);

let progress = barCount / 15;

let cutoffFreq = 200 + (progress * 400);

let resonanceValue = 2 + (progress * 2.25);

let baseMovement = Math.sin(time * 0.5) * 50;

let finalCutoff = cutoffFreq + baseMovement;

bassFilter.frequency.setValueAtTime(finalCutoff, time);

bassFilter.Q.setValueAtTime(resonanceValue, time);

kickHitIntensity = 1.0;

}

// DRUMS

let isFirstHalf = barCount < 8;

if (isFirstHalf) {

if (stepIn16 % 4 === 0) {

kickPlayer.start(time);

}

} else {

if (barCount === 8 && stepIn16 === 0) {

kickPlayer.start(time);

}

if (barCount === 0 && stepIn16 === 2) {

kickPlayer.start(time);

}

if (barCount === 15 && (stepIn16 >= 12)) {

clapPlayer.start(time);

}

if (stepIn16 % 8 === 4 && !(barCount === 15 && stepIn16 >= 12)) {

clapPlayer.start(time);

}

if (stepIn16 % 4 === 2) {

hatPlayer.start(time);

}

// Final sound on 16th bar 13th step only

if (barCount === 15 && stepIn16 === 12) {

finalPlayer.start(time);

}

currentStep++;

}, "16n");

Tone.Transport.start();

} catch (error) {

document.getElementById('statusText').textContent = 'Failed to start';

}

function stopFullTrack() {

isPlaying = false;

Tone.Transport.stop();

Tone.Transport.cancel();

}

window.addEventListener('resize', resizeCanvas);

if (document.readyState === 'loading') {

document.addEventListener('DOMContentLoaded', init);

} else {

init();

}

</script>

</body>

</html>