RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Music PRO Binaural Modular</title>

body{
  margin:0;
  background:#050505;
  color:white;
  font-family:Arial;
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ===== LEFT ===== */

#left{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
  overflow:hidden;
}

#canvas{
  width:100%;
  height:100%;
  object-fit:contain;
  background:black;
}

/* ===== RIGHT ===== */

#right{
  width:420px;
  min-width:420px;
  background:#000;
  padding:20px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media(max-width:900px){

body{
    flex-direction:column;
    overflow:auto;
  }

#right{
    width:100%;
    min-width:100%;
  }

#left{
    height:50vh;
  }

}

button,
input[type=file]{
  width:100%;
}

button{
  padding:12px;
  font-size:16px;
  font-weight:bold;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.line input{
  flex:1;
}

.meter{
  width:100%;
  height:14px;
  background:#111;
  border-radius:6px;
  overflow:hidden;
}

.meterFill{
  height:100%;
  width:0%;
}

#eqCanvas{
  width:100%;
  height:90px;
  background:#111;
  border-radius:8px;
}

</style>
</head>

<body>

<h2>Picture Music PRO</h2>

<div class="line">
  <span>Volumen</span>
  <input type="range" id="volume" min="0" max="1" step="0.01" value="0.4">
</div>

<div class="line">
  <span>Delay</span>
  <input type="range" id="delayMix" min="0" max="1" step="0.01" value="0.35">
</div>

<div class="line">
  <span>Feedback</span>
  <input type="range" id="feedback" min="0" max="0.95" step="0.01" value="0.45">
</div>

<div class="line">
  <span>Reverb</span>
  <input type="range" id="reverbMix" min="0" max="1" step="0.01" value="0.25">
</div>

</div>

/* =========================================================
   CORE
========================================================= */

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const eqCanvas = document.getElementById("eqCanvas");
const eqCtx = eqCanvas.getContext("2d");

eqCanvas.width = 380;
eqCanvas.height = 90;

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

/* =========================================================
   MASTER
========================================================= */

const masterGain = audioCtx.createGain();
masterGain.gain.value = 0.4;

/* =========================================================
   ANALYSER
========================================================= */

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 512;

/* =========================================================
   DELAY
========================================================= */

const delay = audioCtx.createDelay(2.0);
delay.delayTime.value = 0.35;

const feedbackGain = audioCtx.createGain();
feedbackGain.gain.value = 0.45;

delay.connect(feedbackGain);
feedbackGain.connect(delay);

/* =========================================================
   REVERB
========================================================= */

const convolver = audioCtx.createConvolver();

function createImpulse(){

const length = audioCtx.sampleRate * 2;
  const impulse = audioCtx.createBuffer(2,length,audioCtx.sampleRate);

for(let c=0;c<2;c++){

const data = impulse.getChannelData(c);

for(let i=0;i<length;i++){

data[i] = (Math.random()*2-1) * Math.pow(1-i/length,2);

}

return impulse;

}

convolver.buffer = createImpulse();

const reverbGain = audioCtx.createGain();
reverbGain.gain.value = 0.25;

/* =========================================================
   ROUTING
========================================================= */

masterGain.connect(delay);
delay.connect(convolver);

masterGain.connect(analyser);
convolver.connect(reverbGain);
reverbGain.connect(analyser);

analyser.connect(audioCtx.destination);

/* =========================================================
   UI
========================================================= */

volume.oninput = e=>{
  masterGain.gain.value = e.target.value;
};

delayMix.oninput = e=>{
  delay.delayTime.value = e.target.value;
};

feedback.oninput = e=>{
  feedbackGain.gain.value = e.target.value;
};

reverbMix.oninput = e=>{
  reverbGain.gain.value = e.target.value;
};

/* =========================================================
   IMAGE ENGINE
========================================================= */

let imageDataOriginal;

let sequence = [];

const BLOCK_SIZE = 18;

upload.addEventListener("change",e=>{

const file = e.target.files[0];
  if(!file) return;

const reader = new FileReader();

reader.onload = ev=>{

const img = new Image();

img.onload = ()=>{

canvas.width = img.width;
      canvas.height = img.height;

ctx.drawImage(img,0,0);

imageDataOriginal = ctx.getImageData(
        0,
        0,
        canvas.width,
        canvas.height
      );

analyzeImage();

};

img.src = ev.target.result;

};

reader.readAsDataURL(file);

});

/* =========================================================
   SCALE
========================================================= */

const SCALE = [
  110,
  123.47,
  130.81,
  146.83,
  164.81,
  174.61,
  196,
  220,
  246.94,
  261.63,
  293.66,
  329.63,
  349.23,
  392
];

/* =========================================================
   ANALYZE IMAGE
========================================================= */

function analyzeImage(){

sequence = [];

const data = imageDataOriginal.data;

for(let y=0;y<canvas.height;y+=BLOCK_SIZE){

for(let x=0;x<canvas.width;x+=BLOCK_SIZE){

const i = (y * canvas.width + x) * 4;

const r = data[i];
      const g = data[i+1];
      const b = data[i+2];

const brightness = (r+g+b)/3;

if(brightness < 20) continue;

const noteIndex = Math.floor(
        (brightness / 255) * (SCALE.length-1)
      );

const freq = SCALE[noteIndex];

const pan = (x / canvas.width) * 2 - 1;

sequence.push({
        x,
        y,
        r,
        g,
        b,
        freq,
        pan
      });

}

/* =========================================================
   SYNTH
========================================================= */

function playVoice(note){

const osc = audioCtx.createOscillator();

const gain = audioCtx.createGain();

const panner = audioCtx.createStereoPanner();

/* ===== WAVE TYPE BY COLOR ===== */

if(note.r > note.g && note.r > note.b){

osc.type = "sawtooth";

}else if(note.g > note.r && note.g > note.b){

osc.type = "triangle";

}else{

osc.type = "sine";

}

osc.frequency.value = note.freq;

panner.pan.value = note.pan;

/* ===== SOFT ENVELOPE ===== */

gain.gain.setValueAtTime(
    0,
    audioCtx.currentTime
  );

gain.gain.linearRampToValueAtTime(
    0.18,
    audioCtx.currentTime + 0.02
  );

gain.gain.exponentialRampToValueAtTime(
    0.0001,
    audioCtx.currentTime + 0.45
  );

osc.connect(gain);
  gain.connect(panner);
  panner.connect(masterGain);

osc.start();

osc.stop(
    audioCtx.currentTime + 0.5
  );

}

/* =========================================================
   VISUAL
========================================================= */

function drawVisual(note){

ctx.putImageData(imageDataOriginal,0,0);

ctx.strokeStyle = `
    rgb(${note.r},${note.g},${note.b})
  `;

ctx.lineWidth = 3;

ctx.strokeRect(
    note.x,
    note.y,
    BLOCK_SIZE,
    BLOCK_SIZE
  );

updateMeters(
    note.r,
    note.g,
    note.b
  );

}

/* =========================================================
   METERS
========================================================= */

function updateMeters(r,g,b){

rMeter.style.width = (r/255*100)+"%";
  gMeter.style.width = (g/255*100)+"%";
  bMeter.style.width = (b/255*100)+"%";

rMeter.style.background = `rgb(${r},0,0)`;
  gMeter.style.background = `rgb(0,${g},0)`;
  bMeter.style.background = `rgb(0,0,${b})`;

}

/* =========================================================
   EQ VISUALIZER
========================================================= */

function drawEQ(){

requestAnimationFrame(drawEQ);

const buffer = new Uint8Array(
    analyser.frequencyBinCount
  );

analyser.getByteFrequencyData(buffer);

eqCtx.fillStyle = "#000";
  eqCtx.fillRect(
    0,
    0,
    eqCanvas.width,
    eqCanvas.height
  );

const barWidth =
    eqCanvas.width / buffer.length * 2;

for(let i=0;i<buffer.length;i++){

const val = buffer[i]/255;

const h = val * eqCanvas.height;

eqCtx.fillStyle = "lime";

eqCtx.fillRect(
      i * barWidth,
      eqCanvas.height - h,
      barWidth - 1,
      h
    );

}

drawEQ();

/* =========================================================
   PLAYER
========================================================= */

let playing = false;
let interval;
let index = 0;

playBtn.onclick = ()=>{

if(playing) return;

if(sequence.length===0) return;

audioCtx.resume();

playing = true;

const bpmValue = parseInt(bpm.value);

const stepTime = (60 / bpmValue) * 1000;

interval = setInterval(()=>{

const note =
      sequence[index % sequence.length];

playVoice(note);

drawVisual(note);

index++;

},stepTime);

};

stopBtn.onclick = ()=>{

clearInterval(interval);

playing = false;

};

</script>

</body>
</html>