Binance Order Value Barometer

body {
                 font-family: Arial, sans-serif;
                 background-color: #1a1a1a;
                 color: #ffffff;
                 margin: 0;
                 padding: 20px;
             }

.barometer .barometer-section {
                 max-width: calc(100% - 150px);
                 min-width: 150px;
                 color: #000;
             }

#trades {
                 max-height: calc(100% - 320px);
                 overflow-y: auto;
             }

.trade-container {
                 max-width: 800px;
                 margin: 0 auto;
                 border: 1px solid #333;
                 border-radius: 5px;
                 padding: 10px;
             }

.trade-row {
                 margin: 5px 0;
                 padding: 8px;
                 border-radius: 3px;
                 display: flex;
                 justify-content: space-between;
             }

.sell {
                 background-color: #ff4444;
                 color: white;
             }

.buy {
                 background-color: #44ff44;
                 color: black;
             }

.trade-data {
                 flex-grow: 1;
                 margin: 0 10px;
             }

.price {
                 font-weight: bold;
             }

.status-indicator {
                 position: fixed;
                 top: 10px;
                 right: 10px;
                 padding: 5px 10px;
                 background-color: #333;
                 border-radius: 3px;
             }

.barometer-container {
                 max-width: 800px;
                 margin: 20px auto;
                 background-color: #2a2a2a;
                 padding: 15px;
                 border-radius: 5px;
                 border: 1px solid #333;
             }

.barometer {
                 display: flex;
                 justify-content: space-between;
                 margin: 10px 0;
                 height: 30px;
                 background-color: #333;
                 border-radius: 15px;
                 overflow: hidden;
             }

.barometer-section {
                 height: 100%;
                 transition: width 0.5s ease;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-size: 14px;
             }

.buy-section {
                 background-color: #44ff44;
             }

.sell-section {
                 background-color: #ff4444;
             }

var trades_threshold = 100;

let ws = new WebSocket('wss://stream.binance.com:443/ws/btcusdt@aggTrade');
let tradesContainer = $('#trades');
let statusIndicator = $('.status-indicator');

ws.onopen = () => {
    statusIndicator.text('Status: Connected');
    statusIndicator.css('background-color', '#44ff44');
};

ws.onclose = () => {
    statusIndicator.text('Status: Disconnected');
    statusIndicator.css('background-color', '#ff4444');
};

ws.onmessage = (event) => {
    let tradeData = JSON.parse(event.data);
    let isBuy = tradeData.m === true;
    let quantity = parseFloat(tradeData.q);
    let usdvolume = parseInt(tradeData.p * quantity);

let tradeRow = $('<div>')
        .addClass(`trade-row ${isBuy ? 'buy' : 'sell'}`)
        .html(`
                            <div class="trade-data">
                                <span class="timestamp">${new Date(tradeData.T).toLocaleTimeString()}</span>
                                <span class="quantity">${tradeData.q}</span>
                                <span class="price">${(tradeData.p * 1)}</span>
                            </div>
                            <div class="price">$${usdvolume}</div>
                        `).attr({
                            'data-timestamp': tradeData.T, 
                            'data-quantity': tradeData.q
                        });

// Find the correct position to insert the row based on quantity
    if (tradesContainer.children().length === 0) {
        tradesContainer.append(tradeRow);
    } else {
        let inserted = false;
        tradesContainer.children().each(function() {
            let existingQuantity = parseFloat($(this).find('.quantity').text());
            if (quantity > existingQuantity) {
                $(this).before(tradeRow);
                inserted = true;
                return false;
            }
        });
        if (!inserted) {
            tradesContainer.append(tradeRow);
        }
    }

if (tradesContainer.children().length > trades_threshold) {
        removeOldRows();
    }

updateTotalTradesInfo();
    updateBarometer();
    tradesContainer.scrollTo(0, 0);
};

function updateTotalTradesInfo() {
    let totaltrades = $('.trade-container .trade-row').length;
    $('strong#total-trades').text(totaltrades);
}

function removeOldRows() {
var $rows = $('#trades .trade-row');
$rows = $rows.sort(function(a, b) {
    return $(b).data('timestamp') - $(a).data('timestamp');
});
var $topRecent = $rows.slice(0, trades_threshold);

$('#trades .trade-row').remove();

$topRecent = $topRecent.sort(function(a, b) {
    return $(b).data('quantity') - $(a).data('quantity');
});
$('#trades').append($topRecent);
}

function updateBarometer() {
    let buyTotal = 0;
    let sellTotal = 0;

$('.trade-row').each(function() {
        let quantity = parseFloat($(this).find('.quantity').text());
        let price = parseFloat($(this).find('.price').first().text());
        let value = quantity * price;

if ($(this).hasClass('buy')) {
            buyTotal += value;
        } else {
            sellTotal += value;
        }
    });

const total = buyTotal + sellTotal;
    const buyPercentage = total === 0 ? 0 : (buyTotal / total) * 100;
    const sellPercentage = total === 0 ? 0 : (sellTotal / total) * 100;

$('#buy-section').css('width', buyPercentage + '%');
    $('#sell-section').css('width', sellPercentage + '%');

$('#buy-section').html(`Buy: <strong>$${buyTotal.toFixed(2)}</strong>`);
    $('#sell-section').html(`Sell: <strong>$${sellTotal.toFixed(2)}</strong>`);
}

HTML

CSS

<div id="scene-container">
    <canvas id="scene" width="1707" height="430"></canvas>
  </div>
  
  <div id="ui">
    <input type="text" id="textInput" placeholder="Type something..." autocomplete="off" class="cool-highlight">
    <div class="hint">Move Mouse to scatter • Click to blast</div>
  </div>

<div id="controls" style="position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 15px; background: rgba(15, 15, 25, 0.7); padding: 15px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-family: sans-serif; user-select: none; z-index: 100; backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); min-width: 200px;">
    <div style="font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.6); margin-bottom: 5px;">Settings</div>
    
    <div style="display: flex; flex-direction: column; gap: 8px;">
      <div style="display: flex; justify-content: space-between; font-size: 13px;">
        <span>Transition Speed</span>
        <span id="speedLabel" style="color: #00ffff; font-weight: bold;">2.6x</span>
      </div>
      <input type="range" id="speedSlider" min="0.1" max="3" step="0.1" value="2.6" style="cursor: pointer; accent-color: #00ffff; width: 100%;">
    </div>

<div style="display: flex; flex-direction: column; gap: 8px;">
      <div style="display: flex; justify-content: space-between; font-size: 13px;">
        <span>Sequence Interval</span>
        <span id="intervalLabel" style="color: #00ffff; font-weight: bold;">2.1s</span>
      </div>
      <input type="range" id="intervalSlider" min="1000" max="8000" step="250" value="2100" style="cursor: pointer; accent-color: #00ffff; width: 100%;">
    </div>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

body {
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color: #01010b;
       font-family: 'Poppins', sans-serif;
       user-select: none;
   }

#scene-container {
       width: 100%;
       height: 430px;
       position: absolute;
   }

canvas {
       display: block;
   }

#ui {
       position: absolute;
       bottom: 40px;
       left: 50%;
       transform: translateX(-50%);
       text-align: center;
       z-index: 10;
       width: 100%;
   }

input {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 30px;
       padding: 12px 24px;
       font-size: 16px;
       color: white;
       font-family: 'Arial', sans-serif;
       text-align: center;
       outline: none;
       width: 300px;
       backdrop-filter: blur(5px);
       transition: 0.2s;
       box-shadow: 0 0 8px rgba(0, 229, 255, 0.3), 0 0 15px rgba(255, 0, 128, 0.3);
   }

input:focus {}

input::placeholder {
       color: rgba(255, 255, 255, 0.3);
   }

.hint {
       font-family: 'Arial', sans-serif;
       color: rgba(255, 255, 255, 0.3);
       font-size: 12px;
       margin-top: 25px;
       letter-spacing: 2px;
       text-transform: uppercase;
   }

@keyframes coolGlowPulse {
       0% {
           box-shadow: 0 0 8px rgba(0, 229, 255, 0.3), 0 0 15px rgba(255, 0, 128, 0.3);
           border-color: rgba(255, 255, 255, 0.2);
           transform: scale(1);
       }

50% {
           box-shadow: 0 0 16px rgba(0, 229, 255, 0.8), 0 0 20px rgba(255, 0, 128, 0.8);
           border-color: #00e5ff;
           transform: scale(1);
       }

100% {
           box-shadow: 0 0 8px rgba(0, 229, 255, 0.3), 0 0 15px rgba(255, 0, 128, 0.3);
           border-color: rgba(255, 255, 255, 0.2);
           transform: scale(1);
       }
   }

/* This is the class our script will apply to the input */
   .cool-highlight {
       animation: coolGlowPulse 1.8s ease-in-out infinite;
       outline: none;
       transition: border-color 0.3s, transform 0.3s;
   }

const canvas = document.getElementById('scene');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    let particles = [];
    let dyingParticles = []; 
    let width, height;
    
    const mouse = { x: -1000, y: -1000, radius: 100 };
    
    const welcomeSequence = ["WELCOME", "TO", "SITEFACTORY", "HTML", "PLAYGROUND", "ENJOY!"];
    let sequenceIndex = 0;
    let sequenceInterval;
    let highlightTimeout; 
    let isTyping = false;

// Transition Effect System
    let currentEffect = 0;
    const NUM_EFFECTS = 6;

// --- Global settings for controls ---
    let effectSpeedMultiplier = 2.6; // Updated default
    let sequenceIntervalTime = 2100; // Updated default (2 seconds)

// --- Particle Class ---
    class Particle {
      constructor(x, y, hue) {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.targetX = x;
        this.targetY = y;
        this.vx = 0;
        this.vy = 0;
        this.size = Math.random() * 1.5 + 1;
        
        this.friction = 0.85; 
        this.baseSpring = 0.05; // Store base spring to apply multiplier later
        this.spring = this.baseSpring * effectSpeedMultiplier;
        this.hue = hue;
        this.alpha = 1;        
        this.isDying = false;  
      }

update() {
        if (this.isDying) {
          this.alpha -= 0.04; 
          this.size -= 0.05;  
          if (this.size < 0) this.size = 0;
          this.spring = 0.01 * effectSpeedMultiplier; // Scale dying speed
          this.friction = 0.9; 
        }

let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let dist = Math.sqrt(dx * dx + dy * dy);
        
        if (dist < mouse.radius) {
          let force = (mouse.radius - dist) / mouse.radius;
          this.vx -= (dx / dist) * force * 4;
          this.vy -= (dy / dist) * force * 4;
        }

this.vx += (this.targetX - this.x) * this.spring;
        this.vy += (this.targetY - this.y) * this.spring;

this.vx *= this.friction;
        this.vy *= this.friction;

this.vx += (Math.random() - 0.5) * 0.2;
        this.vy += (Math.random() - 0.5) * 0.2;

this.x += this.vx;
        this.y += this.vy;
      }

draw(ctx) {
        if (this.alpha <= 0 || this.size <= 0) return;
        
        ctx.fillStyle = `hsla(${this.hue}, 100%, 65%, ${this.alpha})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
      }
    }

// --- Core Logic ---
    function initCanvas() {
      const container = document.getElementById('scene-container');
      if (container) {
        width = container.clientWidth;
        height = container.clientHeight; 
      } else {
        width = window.innerWidth;
        height = window.innerHeight;
      }
      canvas.width = width;
      canvas.height = height;
    }

function getTextPoints(text) {
      const offCanvas = document.createElement('canvas');
      const offCtx = offCanvas.getContext('2d', { willReadFrequently: true });
      offCanvas.width = width;
      offCanvas.height = height;

const fontSize = Math.min(width / (text.length * 0.6), height / 3);
      
      offCtx.font = `900 ${fontSize}px Poppins`;
      offCtx.textAlign = 'center';
      offCtx.textBaseline = 'middle';
      offCtx.fillStyle = 'white';
      offCtx.fillText(text, width / 2, height / 2);

const data = offCtx.getImageData(0, 0, width, height).data;
      const points = [];
      const step = 6;

for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
          const alpha = data[(y * width + x) * 4 + 3];
          if (alpha > 128) {
            points.push({ x, y });
          }
        }
      }
      return points;
    }

function morphText(text) {
      if (!text) text = " ";
      
      const points = getTextPoints(text);
      
      if (isTyping) {
        currentEffect = 0; 
      } else {
        currentEffect = (currentEffect + 1) % NUM_EFFECTS;
      }

if (currentEffect === 1) {
        points.sort((a, b) => a.x - b.x);
        particles.sort((a, b) => a.x - b.x);
      } else if (currentEffect === 2) {
        points.sort((a, b) => a.y - b.y);
        particles.sort((a, b) => a.y - b.y);
      } else {
        points.sort(() => Math.random() - 0.5);
      }

if (particles.length > points.length) {
        const excess = particles.splice(points.length);
        excess.forEach(p => {
          p.isDying = true;
          p.targetX = p.x + (Math.random() - 0.5) * 150;
          p.targetY = p.y + (Math.random() - 0.5) * 150;
          p.vx *= 0.3; 
          p.vy *= 0.3;
        });
        dyingParticles.push(...excess);
      }

for (let i = 0; i < points.length; i++) {
        const hue = (points[i].x / width) * 250 + 150;

if (i < particles.length) {
          let p = particles[i];
          p.targetX = points[i].x;
          p.targetY = points[i].y;
          p.hue = hue;

if (currentEffect === 3) {
            p.vx += (Math.random() - 0.5) * 80 * effectSpeedMultiplier;
            p.vy += (Math.random() - 0.5) * 80 * effectSpeedMultiplier;
          } else if (currentEffect === 4) {
            p.vx += (width / 2 - p.x) * 0.4 * effectSpeedMultiplier;
            p.vy += (height / 2 - p.y) * 0.4 * effectSpeedMultiplier;
          } else if (currentEffect === 5) {
            p.y -= (Math.random() * height * 0.5 + 200);
            p.vy += 10 * effectSpeedMultiplier;
          }
        } else {
          let p = new Particle(points[i].x, points[i].y, hue);

if (currentEffect === 3) {
            p.x = width / 2; p.y = height / 2;
            p.vx = (Math.random() - 0.5) * 80 * effectSpeedMultiplier; 
            p.vy = (Math.random() - 0.5) * 80 * effectSpeedMultiplier;
          } else if (currentEffect === 4) {
            p.x = width / 2; p.y = height / 2;
          } else if (currentEffect === 5) {
            p.y -= height;
          }

particles.push(p);
        }
      }
    }

// --- Animation Loop ---
    function animate() {
      ctx.fillStyle = 'rgba(5, 5, 16, 0.2)'; 
      ctx.fillRect(0, 0, width, height);

particles.forEach(p => {
        p.update();
        p.draw(ctx);
      });

dyingParticles = dyingParticles.filter(p => {
        p.update();
        p.draw(ctx);
        return p.alpha > 0 && p.size > 0;
      });

requestAnimationFrame(animate);
    }

// --- Highlight Actions ---
    function highlightInput() {
      const inputEl = document.getElementById('textInput');
      if (!inputEl) return;
      inputEl.focus(); 
      inputEl.classList.add('cool-highlight'); 
    }

function clearHighlight() {
      clearTimeout(highlightTimeout);
      const inputEl = document.getElementById('textInput');
      if (inputEl) {
        inputEl.classList.remove('cool-highlight');
      }
    }

// --- Controls Event Listeners ---
    document.getElementById('speedSlider').addEventListener('input', (e) => {
      effectSpeedMultiplier = parseFloat(e.target.value);
      document.getElementById('speedLabel').textContent = effectSpeedMultiplier.toFixed(1) + 'x';
      
      // Live update existing particles' spring force
      particles.forEach(p => {
        if (!p.isDying) p.spring = p.baseSpring * effectSpeedMultiplier;
      });
    });

document.getElementById('intervalSlider').addEventListener('input', (e) => {
      sequenceIntervalTime = parseInt(e.target.value, 10);
      document.getElementById('intervalLabel').textContent = (sequenceIntervalTime / 1000).toFixed(1) + 's';
      
      // If sequence is running, update the timer live
      if (!isTyping && sequenceIndex < welcomeSequence.length - 1) {
        clearInterval(sequenceInterval);
        sequenceInterval = setInterval(sequenceTick, sequenceIntervalTime);
      }
    });

// --- Event Listeners ---
    window.addEventListener('resize', () => {
      initCanvas();
      const inputVal = document.getElementById('textInput');
      morphText(inputVal && inputVal.value ? inputVal.value : welcomeSequence[sequenceIndex]);
    });

window.addEventListener('mousemove', (e) => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    });

window.addEventListener('touchmove', (e) => {
      mouse.x = e.touches[0].clientX;
      mouse.y = e.touches[0].clientY;
    });

window.addEventListener('mouseleave', () => {
      mouse.x = -1000;
      mouse.y = -1000;
    });

window.addEventListener('mousedown', (e) => {
      // Don't trigger the blast effect if we are interacting with controls
      if (e.target.closest('#controls')) return;

clearHighlight();

const allParticles = particles.concat(dyingParticles);
      allParticles.forEach(p => {
        let dx = e.clientX - p.x;
        let dy = e.clientY - p.y;
        let dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 250) { 
          p.vx -= (dx / dist) * 25;
          p.vy -= (dy / dist) * 25;
        }
      });
    });

const input = document.getElementById('textInput');
    if (input) {
      input.addEventListener('input', (e) => {
        isTyping = true;
        clearInterval(sequenceInterval);
        clearHighlight(); 
        let val = e.target.value.toUpperCase();
        morphText(val);
      });

input.addEventListener('focus', () => {
        clearHighlight();
      });

input.addEventListener('blur', (e) => {
        if (e.target.value === '') {
          isTyping = false;
          startSequence();
        }
      });
    }

// --- Initialization ---
    function sequenceTick() {
      if (sequenceIndex < welcomeSequence.length - 1) {
        sequenceIndex++;
        morphText(welcomeSequence[sequenceIndex]);
        
        if (sequenceIndex === welcomeSequence.length - 1) {
          clearInterval(sequenceInterval);
          highlightTimeout = setTimeout(highlightInput, 1800);
        }
      }
    }

function startSequence() {
      clearInterval(sequenceInterval);
      clearHighlight();

sequenceIndex = 0;
      morphText(welcomeSequence[sequenceIndex]);
      
      sequenceInterval = setInterval(sequenceTick, sequenceIntervalTime);
    }

initCanvas();
    startSequence();
    animate();

Sitefactory HTML Playground

body,
             html {
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                 background-color: #1a1a24;
             }

#application {
                 width: 100%;
                 height: 100%;
                 display: block;
             }

#hud {
                 position: absolute;
                 top: 20px;
                 left: 20px;
                 color: #ffffff;
                 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                 pointer-events: none;
                 background: rgba(0, 0, 0, 0.5);
                 padding: 15px 20px;
                 border-radius: 8px;
                 border-left: 4px solid #ffd700;
             }

h1 {
                 margin: 0 0 5px 0;
                 font-size: 1.3rem;
                 color: #ffd700;
             }

p {
                 margin: 5px 0;
                 font-size: 0.9rem;
             }

#win-msg {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 color: #ffd700;
                 font-size: 2.5rem;
                 font-weight: bold;
                 text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
                 display: none;
                 background: rgba(0, 0, 0, 0.85);
                 padding: 20px 40px;
                 border-radius: 12px;
                 text-align: center;
                 border: 2px solid #ffd700;
             }

#win-msg span {
                 font-size: 1.1rem;
                 color: #ffffff;
                 display: block;
                 margin-top: 10px;
             }

// 1. Initialize Application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas, {
            keyboard: new pc.Keyboard(window),
            mouse: new pc.Mouse(canvas)
        });

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
        window.addEventListener('resize', () => app.resizeCanvas());

// Dark stormy ambient light
        app.scene.ambientColor = new pc.Color(0.08, 0.1, 0.15);

const platforms = [];

// 2. Define Custom PlayCanvas Scripts

// --- STORM WEATHER, SPLASH, & LIGHTNING SYSTEM SCRIPT ---
        const WeatherSystem = pc.createScript('weatherSystem');

WeatherSystem.prototype.initialize = function() {
            // A. Rain setup
            this.rainCount = 100;
            this.rainParticles = [];
            this.windSpeed = -2.5;

const rainMat = new pc.StandardMaterial();
            rainMat.diffuse = new pc.Color(0, 0.8, 1);
            rainMat.emissive = new pc.Color(0, 0.4, 0.8);
            rainMat.blendType = pc.BLEND_NORMAL;
            rainMat.opacity = 0.5;
            rainMat.update();

for (let i = 0; i < this.rainCount; i++) {
                const rainStreak = new pc.Entity();
                rainStreak.addComponent('render', {
                    type: 'box',
                    material: rainMat,
                    castShadows: false,
                    receiveShadows: false
                });

rainStreak.setLocalScale(0.04, 0.6 + Math.random() * 0.4, 0.04);
                this.resetRaindrop(rainStreak, true);
                
                this.app.root.addChild(rainStreak);
                this.rainParticles.push(rainStreak);
            }

// B. Splash ripples setup
            this.maxSplashes = 40;
            this.splashes = [];

for (let i = 0; i < this.maxSplashes; i++) {
                const splashMat = new pc.StandardMaterial();
                splashMat.diffuse = new pc.Color(0, 0.8, 1);
                splashMat.emissive = new pc.Color(0, 0.5, 0.9);
                splashMat.blendType = pc.BLEND_NORMAL;
                splashMat.opacity = 0.0;
                splashMat.update();

const splashEntity = new pc.Entity();
                splashEntity.addComponent('render', {
                    type: 'cylinder',
                    material: splashMat,
                    castShadows: false,
                    receiveShadows: false
                });
                
                splashEntity.setLocalScale(0.1, 0.01, 0.1);
                splashEntity.enabled = false;
                this.app.root.addChild(splashEntity);

this.splashes.push({
                    entity: splashEntity,
                    material: splashMat,
                    active: false,
                    age: 0,
                    maxAge: 0.22
                });
            }

// C. Procedural Lightning Bolt Setup
            this.boltSegments = [];
            this.boltSegmentCount = 6; // Number of zig-zag segments per bolt

const boltMat = new pc.StandardMaterial();
            boltMat.diffuse = new pc.Color(1, 0.9, 0.2); // Golden yellow
            boltMat.emissive = new pc.Color(1, 0.8, 0.1); // Warm internal glow
            boltMat.update();

for (let i = 0; i < this.boltSegmentCount; i++) {
                const segment = new pc.Entity();
                segment.addComponent('render', {
                    type: 'cylinder',
                    material: boltMat,
                    castShadows: false,
                    receiveShadows: false
                });
                segment.enabled = false;
                this.app.root.addChild(segment);
                this.boltSegments.push(segment);
            }

// D. Scene lighting references
            this.cameraEntity = this.app.root.findByName('Camera');
            this.sunEntity = this.app.root.findByName('Sun');

this.origAmbient = this.app.scene.ambientColor.clone();
            this.origClearColor = this.cameraEntity.camera.clearColor.clone();
            this.origSunColor = this.sunEntity.light.color.clone();
            this.origSunIntensity = this.sunEntity.light.intensity;

// Cooldown timers
            this.lightningTimer = 0;
            this.lightningMaxDuration = 0.65;
            this.lightningCooldown = 3 + Math.random() * 3; // First flash within 3-6 seconds
            this.lightningColor = new pc.Color(0.65, 0.75, 0.95);
            this.wasFlashActive = false;
        };

WeatherSystem.prototype.resetRaindrop = function(drop, initialSpawn = false) {
            const rx = (Math.random() - 0.5) * 35;
            const rz = (Math.random() - 0.5) * 25 - 8;
            const ry = initialSpawn ? (Math.random() * 15) : (10 + Math.random() * 4);
            
            drop.setPosition(rx, ry, rz);
            drop.fallSpeed = 13 + Math.random() * 5;
        };

WeatherSystem.prototype.spawnSplash = function(x, y, z) {
            for (let i = 0; i < this.maxSplashes; i++) {
                const splash = this.splashes[i];
                if (!splash.active) {
                    splash.active = true;
                    splash.age = 0;
                    splash.entity.enabled = true;
                    
                    splash.entity.setPosition(x, y + 0.02, z);
                    splash.entity.setLocalScale(0.1, 0.01, 0.1);
                    splash.material.opacity = 0.5;
                    splash.material.update();
                    break;
                }
            }
        };

// Aligns a cylinder segment perfectly between two 3D vector coordinates
        WeatherSystem.prototype.alignSegment = function(entity, p1, p2) {
            // Find vector midpoint
            const mid = new pc.Vec3().add2(p1, p2).scale(0.5);
            entity.setPosition(mid);

// Set height to distance, and X/Z to thin width
            const dist = p1.distance(p2);
            entity.setLocalScale(0.12, dist, 0.12);

// Orient the cylinder to point toward the target node
            entity.lookAt(p2);
            entity.rotateLocal(90, 0, 0); // Correct cylinder's default vertical alignment
        };

// Generates a random zig-zag path of 3D points and stretches our pooled cylinders to fit them
        WeatherSystem.prototype.triggerBolt = function() {
            const startX = (Math.random() - 0.5) * 26; // Spawn wide
            const startZ = (Math.random() - 0.5) * 16 - 7; // Align to platform path

const points = [];
            let currentX = startX;
            let currentZ = startZ;
            let currentY = 16; // Start high in the clouds

points.push(new pc.Vec3(currentX, currentY, currentZ));

for (let j = 1; j <= this.boltSegmentCount; j++) {
                currentY -= 16 / this.boltSegmentCount;

// Stagger coordinates horizontally to make the lightning jagged
                currentX += (Math.random() - 0.5) * 3.5;
                currentZ += (Math.random() - 0.5) * 3.5;

points.push(new pc.Vec3(currentX, currentY, currentZ));
            }

// Bind each physical cylinder segment to connect the generated nodes
            for (let j = 0; j < this.boltSegmentCount; j++) {
                const seg = this.boltSegments[j];
                this.alignSegment(seg, points[j], points[j+1]);
                seg.enabled = true;
            }
        };

WeatherSystem.prototype.hideBolt = function() {
            for (let i = 0; i < this.boltSegmentCount; i++) {
                this.boltSegments[i].enabled = false;
            }
        };

WeatherSystem.prototype.update = function(dt) {
            // A. Update Raindrops & Detect Collisions
            for (let i = 0; i < this.rainParticles.length; i++) {
                const drop = this.rainParticles[i];
                const pos = drop.getPosition();

const nextY = pos.y - (drop.fallSpeed * dt);
                const nextX = pos.x + (this.windSpeed * dt);

let hit = false;
                let hitY = 0;

for (let platform of platforms) {
                    const pPos = platform.getPosition();
                    const pScale = platform.getLocalScale();

const halfX = pScale.x / 2;
                    const halfZ = pScale.z / 2;
                    const topY = pPos.y + pScale.y / 2;

if (pos.x >= pPos.x - halfX && pos.x <= pPos.x + halfX &&
                        pos.z >= pPos.z - halfZ && pos.z <= pPos.z + halfZ) {
                        
                        if (pos.y >= topY && nextY <= topY) {
                            hit = true;
                            hitY = topY;
                            break;
                        }
                    }
                }

if (hit) {
                    this.spawnSplash(pos.x, hitY, pos.z);
                    this.resetRaindrop(drop, false);
                } else if (nextY < -4) {
                    this.resetRaindrop(drop, false);
                } else {
                    drop.setPosition(nextX, nextY, pos.z);
                }
            }

// B. Update Active Splash Ripples
            for (let i = 0; i < this.maxSplashes; i++) {
                const splash = this.splashes[i];
                if (splash.active) {
                    splash.age += dt;
                    const progress = splash.age / splash.maxAge;

if (progress >= 1) {
                        splash.active = false;
                        splash.entity.enabled = false;
                    } else {
                        const currentScale = 0.1 + (progress * 0.9);
                        splash.entity.setLocalScale(currentScale, 0.01, currentScale);
                        
                        splash.material.opacity = 0.5 * (1 - progress);
                        splash.material.update();
                    }
                }
            }

// C. Update Storm Lightning Flash
            if (this.lightningTimer > 0) {
                this.lightningTimer -= dt;
                this.wasFlashActive = true;

const t = 1.0 - (this.lightningTimer / this.lightningMaxDuration);
                let intensity = 0;

// Double-peak lightning waveform
                if (t < 0.15) {
                    intensity = t / 0.15;                 // 1. Pre-flicker spike
                } else if (t < 0.25) {
                    intensity = 1.0 - ((t - 0.15) / 0.10); // 2. Brief fade down
                } else if (t < 0.35) {
                    intensity = 0;                        // 3. Pause
                } else if (t < 0.50) {
                    intensity = (t - 0.35) / 0.15;        // 4. Main massive flash
                } else {
                    intensity = 1.0 - ((t - 0.50) / 0.50); // 5. Slow decay to dark
                }

// Hide the yellow bolt when entering the slow decay phase (t >= 0.50)
                if (t >= 0.50) {
                    this.hideBolt();
                }

// Interpolate colors of sky and ambient shadows
                this.app.scene.ambientColor.lerp(this.origAmbient, this.lightningColor, intensity);
                this.cameraEntity.camera.clearColor.lerp(this.origClearColor, this.lightningColor, intensity);
                
                // Boost main directional light and colors
                this.sunEntity.light.intensity = this.origSunIntensity + (intensity * 4.5); 
                this.sunEntity.light.color.lerp(this.origSunColor, this.lightningColor, intensity);

} else {
                // Return lighting precisely back to dark to avoid precision drift
                if (this.wasFlashActive) {
                    this.hideBolt(); // Safety hide
                    this.app.scene.ambientColor.copy(this.origAmbient);
                    this.cameraEntity.camera.clearColor.copy(this.origClearColor);
                    this.sunEntity.light.intensity = this.origSunIntensity;
                    this.sunEntity.light.color.copy(this.origSunColor);
                    this.wasFlashActive = false;
                }

// Count down to next lightning flash
                this.lightningCooldown -= dt;
                if (this.lightningCooldown <= 0) {
                    this.lightningTimer = this.lightningMaxDuration;
                    this.lightningCooldown = 5 + Math.random() * 8;
                    this.triggerBolt(); // Spawn the physical bolt
                }
            }
        };

// --- MOVEMENT & COLLISION SCRIPT ---
        const Movement = pc.createScript('movement');

Movement.prototype.initialize = function() {
            this.velocity = new pc.Vec3();
            this.gravity = -24;
            this.jumpForce = 11.5;
            this.speed = 6.2;
            this.isGrounded = false;
            this.won = false;
            
            this.winMsg = document.getElementById('win-msg');
        };

Movement.prototype.update = function(dt) {
            if (this.won) {
                if (this.app.keyboard.wasPressed(pc.KEY_R)) {
                    this.resetGame();
                }
                return;
            }

const keyboard = this.app.keyboard;
            let moveX = 0;
            let moveZ = 0;

if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) moveX = -1;
            if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) moveX = 1;
            if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) moveZ = -1;
            if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) moveZ = 1;

this.velocity.x = moveX * this.speed;
            this.velocity.z = moveZ * this.speed;
            this.velocity.y += this.gravity * dt;

if (keyboard.wasPressed(pc.KEY_SPACE) && this.isGrounded) {
                this.velocity.y = this.jumpForce;
                this.isGrounded = false;
            }

const currentPos = this.entity.getPosition();
            const nextPos = currentPos.clone();
            nextPos.x += this.velocity.x * dt;
            nextPos.y += this.velocity.y * dt;
            nextPos.z += this.velocity.z * dt;

this.isGrounded = false;
            const radius = 0.5;

for (let platform of platforms) {
                const col = checkAABBCollision(nextPos, radius, platform);
                if (col.collided) {
                    const diffY = nextPos.y - col.nearestPoint.y;

if (this.velocity.y <= 0 && diffY > 0) {
                        nextPos.y = col.nearestPoint.y + radius;
                        this.velocity.y = 0;
                        this.isGrounded = true;
                    } else if (this.velocity.y > 0 && diffY < 0) {
                        nextPos.y = col.nearestPoint.y - radius;
                        this.velocity.y = 0;
                    } else {
                        const platPos = platform.getPosition();
                        if (Math.abs(nextPos.x - platPos.x) > Math.abs(nextPos.z - platPos.z)) {
                            nextPos.x = col.nearestPoint.x + (nextPos.x > col.nearestPoint.x ? radius : -radius);
                        } else {
                            nextPos.z = col.nearestPoint.z + (nextPos.z > col.nearestPoint.z ? radius : -radius);
                        }
                    }
                }
            }

if (nextPos.y < -12) {
                this.resetPlayer();
                return;
            }

this.entity.setPosition(nextPos);

const goalPos = goal.getPosition();
            if (nextPos.distance(goalPos) < 1.1) {
                this.won = true;
                this.winMsg.style.display = 'block';
            }
        };

Movement.prototype.resetPlayer = function() {
            this.entity.setPosition(0, 1.5, 0);
            this.velocity.set(0, 0, 0);
            this.isGrounded = false;
        };

Movement.prototype.resetGame = function() {
            this.won = false;
            this.winMsg.style.display = 'none';
            this.resetPlayer();
        };

// --- CAMERA FOLLOW SCRIPT ---
        const CameraFollow = pc.createScript('cameraFollow');

CameraFollow.prototype.initialize = function() {
            this.target = app.root.findByName('Player');
            this.offset = new pc.Vec3(0, 5, 10.5);
        };

CameraFollow.prototype.update = function(dt) {
            if (!this.target) return;

const targetPos = this.target.getPosition();
            const currentPos = this.entity.getPosition();

const desiredPos = targetPos.clone().add(this.offset);
            currentPos.lerp(currentPos, desiredPos, 6 * dt);
            this.entity.setPosition(currentPos);

this.entity.lookAt(targetPos.x, targetPos.y + 0.5, targetPos.z);
        };

// --- SPINNER SCRIPT ---
        const Spinner = pc.createScript('spinner');
        Spinner.prototype.update = function(dt) {
            this.entity.rotate(0, 95 * dt, 45 * dt);
        };

// 3. Collision Helper
        function checkAABBCollision(spherePos, sphereRadius, boxEntity) {
            const boxPos = boxEntity.getPosition();
            const boxScale = boxEntity.getLocalScale();

const minX = boxPos.x - boxScale.x / 2;
            const maxX = boxPos.x + boxScale.x / 2;
            const minY = boxPos.y - boxScale.y / 2;
            const maxY = boxPos.y + boxScale.y / 2;
            const minZ = boxPos.z - boxScale.z / 2;
            const maxZ = boxPos.z + boxScale.z / 2;

const x = Math.max(minX, Math.min(spherePos.x, maxX));
            const y = Math.max(minY, Math.min(spherePos.y, maxY));
            const z = Math.max(minZ, Math.min(spherePos.z, maxZ));

const distance = Math.sqrt(
                (x - spherePos.x) * (x - spherePos.x) +
                (y - spherePos.y) * (y - spherePos.y) +
                (z - spherePos.z) * (z - spherePos.z)
            );

if (distance < sphereRadius) {
                return {
                    collided: true,
                    nearestPoint: new pc.Vec3(x, y, z)
                };
            }
            return { collided: false };
        }

// 4. Construct Scene Elements

function createPlatform(x, y, z, sx, sy, sz, colorHex) {
            const platform = new pc.Entity();
            const material = new pc.StandardMaterial();
            material.diffuse = new pc.Color().fromString(colorHex);
            material.shininess = 32; 
            material.update();

platform.addComponent('render', {
                type: 'box',
                material: material,
                castShadows: true,
                receiveShadows: true
            });
            platform.setPosition(x, y, z);
            platform.setLocalScale(sx, sy, sz);
            app.root.addChild(platform);

platforms.push(platform);
            return platform;
        }

// Wet, neon-contrast colored platforms
        createPlatform(0, -0.25, 0, 8, 0.5, 8, '#1e2d24');      // Dark Forest Ground
        createPlatform(0, 1.25, -7, 3.5, 0.3, 3.5, '#cf5c36');   // Burnt Orange
        createPlatform(-4, 2.75, -11, 3, 0.3, 3, '#00b4d8');    // Electric Blue
        createPlatform(1, 4.25, -14, 2.5, 0.3, 2.5, '#ffd166');  // Amber Yellow
        createPlatform(5, 5.75, -10, 2.5, 0.3, 2.5, '#7209b7');  // Royal Purple
        createPlatform(2, 7.25, -5, 2.5, 0.3, 2.5, '#06d6a0');   // Bright Mint Goal Platform

// Goal Star/Gem
        const goal = new pc.Entity('Goal');
        const goldMat = new pc.StandardMaterial();
        goldMat.diffuse = new pc.Color().fromString('#ffd700');
        goldMat.emissive = new pc.Color().fromString('#ff9f00'); 
        goldMat.update();

goal.addComponent('render', {
            type: 'cone',
            material: goldMat,
            castShadows: true,
            receiveShadows: true
        });
        goal.setPosition(2, 8.5, -5);
        goal.setLocalScale(0.8, 1.2, 0.8);
        app.root.addChild(goal);

goal.addComponent('script');
        goal.script.create('spinner');

// Player Entity
        const player = new pc.Entity('Player');
        const playerMat = new pc.StandardMaterial();
        playerMat.diffuse = new pc.Color().fromString('#ef476f'); // High-vis pink/red
        playerMat.emissive = new pc.Color().fromString('#4a0d1d'); // Slight glow in the dark
        playerMat.shininess = 80;
        playerMat.update();

player.addComponent('render', {
            type: 'sphere',
            material: playerMat,
            castShadows: true,
            receiveShadows: true
        });
        player.setPosition(0, 1.5, 0);
        player.setLocalScale(1, 1, 1);
        app.root.addChild(player);

player.addComponent('script');
        player.script.create('movement');

// Setup Follow Camera
        const camera = new pc.Entity('Camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.08, 0.1, 0.15) // Rainy night sky color
        });
        camera.setPosition(0, 6, 11);
        app.root.addChild(camera);

camera.addComponent('script');
        camera.script.create('cameraFollow');

// Cool, blueish Moon/Storm light
        const sun = new pc.Entity('Sun');
        sun.addComponent('light', {
            type: 'directional',
            color: new pc.Color(0.6, 0.7, 0.85),
            castShadows: true,
            shadowBias: 0.05,
            shadowDistance: 32,
            shadowResolution: 1024
        });
        app.root.addChild(sun);
        sun.setEulerAngles(-55, 45, 0);

// Warm streetlight accent (adds cinematic lighting contrast)
        const streetAccent = new pc.Entity('StreetAccent');
        streetAccent.addComponent('light', {
            type: 'directional',
            color: new pc.Color(0.25, 0.2, 0.12),
            castShadows: false
        });
        app.root.addChild(streetAccent);
        streetAccent.setEulerAngles(40, -135, 0);

// Add the Weather Entity (Created last, so it can reference Camera and Sun)
        const weather = new pc.Entity('Weather');
        app.root.addChild(weather);
        weather.addComponent('script');
        weather.script.create('weatherSystem');

// 5. Run Game Loop
        app.start();

3D PlayCanvas Platformer

(() => {
    // Scene setup
    const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
    );
    camera.position.set(0, 0, 150);

const renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Light (subtle)
    const ambient = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambient);

const point = new THREE.PointLight(0x88aaff, 1, 1000);
    point.position.set(0, 0, 200);
    scene.add(point);

// Parameters for the quantum stream
    const PARTICLE_COUNT = 6000;
    const STREAM_RADIUS = 40;
    const STREAM_LENGTH = 800;
    const SPEED = 0.8;

// Geometry + material for particles
    const geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(PARTICLE_COUNT * 3);
    const colors = new Float32Array(PARTICLE_COUNT * 3);
    const sizes = new Float32Array(PARTICLE_COUNT);

const color = new THREE.Color();

for (let i = 0; i < PARTICLE_COUNT; i++) {
        // Random position inside a cylindrical tunnel
        const angle = Math.random() * Math.PI * 2;
        const radius = Math.random() * STREAM_RADIUS;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;
        const z = Math.random() * STREAM_LENGTH - STREAM_LENGTH / 2;

positions[i * 3] = x;
        positions[i * 3 + 1] = y;
        positions[i * 3 + 2] = z;

// Initial color (cool blue)
        color.setHSL(0.6, 1.0, 0.7);
        colors[i * 3] = color.r;
        colors[i * 3 + 1] = color.g;
        colors[i * 3 + 2] = color.b;

sizes[i] = 2 + Math.random() * 2;
    }

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('customColor', new THREE.BufferAttribute(colors, 3));
    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));

// Custom shader material for glowing quantum effect
    const material = new THREE.ShaderMaterial({
        uniforms: {
            time: {
                value: 0
            },
            color: {
                value: new THREE.Color(0x88aaff)
            },
        },
        vertexShader: `
                                attribute float size;
                                attribute vec3 customColor;
                                varying vec3 vColor;
                                uniform float time;
                                void main() {
                                    vColor = customColor;
                                    vec3 pos = position;
                                    // Create a subtle wave along the stream
                                    pos.x += sin(pos.z * 0.02 + time) * 5.0;
                                    pos.y += cos(pos.z * 0.02 + time) * 5.0;
                                    vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 );
                                    gl_PointSize = size * ( 300.0 / -mvPosition.z );
                                    gl_Position = projectionMatrix * mvPosition;
                                }
                            `,
        fragmentShader: `
                                varying vec3 vColor;
                                void main() {
                                    float strength = distance( gl_PointCoord, vec2(0.5) );
                                    strength = 1.0 - strength;
                                    strength = pow(strength, 2.5);
                                    gl_FragColor = vec4( vColor, strength );
                                }
                            `,
        transparent: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
    });

const particles = new THREE.Points(geometry, material);
    scene.add(particles);

// Mouse interaction – gentle rotation based on pointer movement
    const mouse = new THREE.Vector2();

function onPointerMove(event) {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    }
    window.addEventListener('pointermove', onPointerMove, false);

// Resize handling
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

// Animation loop
    const clock = new THREE.Clock();

function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        material.uniforms.time.value += delta * 2.0;

// Move particles forward along Z axis to simulate stream flow
        const pos = geometry.attributes.position.array;
        for (let i = 0; i < PARTICLE_COUNT; i++) {
            let z = pos[i * 3 + 2] + SPEED;
            if (z > STREAM_LENGTH / 2) z -= STREAM_LENGTH;
            pos[i * 3 + 2] = z;
        }
        geometry.attributes.position.needsUpdate = true;

// Update particle colors over time
        const colorArray = geometry.attributes.customColor.array;
        for (let i = 0; i < PARTICLE_COUNT; i++) {
            // Modified the color change to occur more slowly
            color.setHSL((material.uniforms.time.value * 0.1 + i) % 1, 1.0, 0.7);
            colorArray[i * 3] = color.r;
            colorArray[i * 3 + 1] = color.g;
            colorArray[i * 3 + 2] = color.b;
        }
        geometry.attributes.customColor.needsUpdate = true;

// Apply subtle rotation from mouse
        particles.rotation.x = -mouse.y * 0.2; // Invert the y-axis rotation
        particles.rotation.y = mouse.x * 0.2;

renderer.render(scene, camera);
    }
    animate();
})();

three.js demo

function initBuffers(gl) {
  const positionBuffer = initPositionBuffer(gl);

const textureCoordBuffer = initTextureBuffer(gl);

const indexBuffer = initIndexBuffer(gl);

const normalBuffer = initNormalBuffer(gl);

return {
    position: positionBuffer,
    normal: normalBuffer,
    textureCoord: textureCoordBuffer,
    indices: indexBuffer,
  };
}

function initPositionBuffer(gl) {
  // Create a buffer for the square's positions.
  const positionBuffer = gl.createBuffer();

// Select the positionBuffer as the one to apply buffer
  // operations to from here out.
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
    // Front face
    -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,

// Back face
    -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,

// Top face
    -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,

// Bottom face
    -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,

// Right face
    1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,

// Left face
    -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
  ];

// Now pass the list of positions into WebGL to build the
  // shape. We do this by creating a Float32Array from the
  // JavaScript array, then use it to fill the current buffer.
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

return positionBuffer;
}

function initColorBuffer(gl) {
  const faceColors = [
    [1.0, 1.0, 1.0, 1.0], // Front face: white
    [1.0, 0.0, 0.0, 1.0], // Back face: red
    [0.0, 1.0, 0.0, 1.0], // Top face: green
    [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
    [1.0, 1.0, 0.0, 1.0], // Right face: yellow
    [1.0, 0.0, 1.0, 1.0], // Left face: purple
  ];

// Convert the array of colors into a table for all the vertices.

var colors = [];

for (var j = 0; j < faceColors.length; ++j) {
    const c = faceColors[j];
    // Repeat each color four times for the four vertices of the face
    colors = colors.concat(c, c, c, c);
  }

const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

return colorBuffer;
}

function initIndexBuffer(gl) {
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// This array defines each face as two triangles, using the
  // indices into the vertex array to specify each triangle's
  // position.

const indices = [
    0,
    1,
    2,
    0,
    2,
    3, // front
    4,
    5,
    6,
    4,
    6,
    7, // back
    8,
    9,
    10,
    8,
    10,
    11, // top
    12,
    13,
    14,
    12,
    14,
    15, // bottom
    16,
    17,
    18,
    16,
    18,
    19, // right
    20,
    21,
    22,
    20,
    22,
    23, // left
  ];

// Now send the element array to GL

gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array(indices),
    gl.STATIC_DRAW
  );

return indexBuffer;
}

function initTextureBuffer(gl) {
  const textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

const textureCoordinates = [
    // Front
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Back
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Top
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Bottom
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Right
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Left
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
  ];

gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(textureCoordinates),
    gl.STATIC_DRAW
  );

return textureCoordBuffer;
}

function initNormalBuffer(gl) {
  const normalBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);

const vertexNormals = [
    // Front
    0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,

// Back
    0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,

// Top
    0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,

// Bottom
    0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,

// Right
    1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,

// Left
    -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
  ];

gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(vertexNormals),
    gl.STATIC_DRAW
  );

return normalBuffer;
}

function drawScene(gl, programInfo, buffers, texture, cubeRotation) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
  gl.clearDepth(1.0); // Clear everything
  gl.enable(gl.DEPTH_TEST); // Enable depth testing
  gl.depthFunc(gl.LEQUAL); // Near things obscure far things

// Clear the canvas before we start drawing on it.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Create a perspective matrix, a special matrix that is
  // used to simulate the distortion of perspective in a camera.
  // Our field of view is 45 degrees, with a width/height
  // ratio that matches the display size of the canvas
  // and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

const fieldOfView = (45 * Math.PI) / 180; // in radians
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.1;
  const zFar = 100.0;
  const projectionMatrix = mat4.create();

// note: glmatrix.js always has the first argument
  // as the destination to receive the result.
  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);

// Set the drawing position to the "identity" point, which is
  // the center of the scene.
  const modelViewMatrix = mat4.create();

// Now move the drawing position a bit to where we want to
  // start drawing the square.
  mat4.translate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to translate
    [-0.0, 0.0, -6.0]
  ); // amount to translate

mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation, // amount to rotate in radians
    [0, 0, 1]
  ); // axis to rotate around (Z)
  mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation * 0.7, // amount to rotate in radians
    [0, 1, 0]
  ); // axis to rotate around (Y)
  mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation * 0.3, // amount to rotate in radians
    [1, 0, 0]
  ); // axis to rotate around (X)

const normalMatrix = mat4.create();
  mat4.invert(normalMatrix, modelViewMatrix);
  mat4.transpose(normalMatrix, normalMatrix);

// Tell WebGL how to pull out the positions from the position
  // buffer into the vertexPosition attribute.
  setPositionAttribute(gl, buffers, programInfo);

setTextureAttribute(gl, buffers, programInfo);

// Tell WebGL which indices to use to index the vertices
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

setNormalAttribute(gl, buffers, programInfo);

// Tell WebGL to use our program when drawing
  gl.useProgram(programInfo.program);

// Set the shader uniforms
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.projectionMatrix,
    false,
    projectionMatrix
  );
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.modelViewMatrix,
    false,
    modelViewMatrix
  );
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.normalMatrix,
    false,
    normalMatrix
  );

// Tell WebGL we want to affect texture unit 0
  gl.activeTexture(gl.TEXTURE0);

// Bind the texture to texture unit 0
  gl.bindTexture(gl.TEXTURE_2D, texture);

// Tell the shader we bound the texture to texture unit 0
  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

{
    const vertexCount = 36;
    const type = gl.UNSIGNED_SHORT;
    const offset = 0;
    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
  }
}

// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute.
function setPositionAttribute(gl, buffers, programInfo) {
  const numComponents = 3;
  const type = gl.FLOAT; // the data in the buffer is 32bit floats
  const normalize = false; // don't normalize
  const stride = 0; // how many bytes to get from one set of values to the next
  // 0 = use type and numComponents above
  const offset = 0; // how many bytes inside the buffer to start from
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexPosition,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}

// Tell WebGL how to pull out the colors from the color buffer
// into the vertexColor attribute.
function setColorAttribute(gl, buffers, programInfo) {
  const numComponents = 4;
  const type = gl.FLOAT;
  const normalize = false;
  const stride = 0;
  const offset = 0;
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexColor,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
}

// tell webgl how to pull out the texture coordinates from buffer
function setTextureAttribute(gl, buffers, programInfo) {
  const num = 2; // every coordinate composed of 2 values
  const type = gl.FLOAT; // the data in the buffer is 32-bit float
  const normalize = false; // don't normalize
  const stride = 0; // how many bytes to get from one set to the next
  const offset = 0; // how many bytes inside the buffer to start from
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
  gl.vertexAttribPointer(
    programInfo.attribLocations.textureCoord,
    num,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
}

// Tell WebGL how to pull out the normals from
// the normal buffer into the vertexNormal attribute.
function setNormalAttribute(gl, buffers, programInfo) {
  const numComponents = 3;
  const type = gl.FLOAT;
  const normalize = false;
  const stride = 0;
  const offset = 0;
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexNormal,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexNormal);
}

let cubeRotation = 0.0;
let deltaTime = 0;
// will set to true when video can be copied to texture
let copyVideo = false;

main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

// Only continue if WebGL is available and working
  if (gl === null) {
    alert(
      "Unable to initialize WebGL. Your browser or machine may not support it."
    );
    return;
  }

// Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);

// Vertex shader program

const vsSource = `
  attribute vec4 aVertexPosition;
  attribute vec3 aVertexNormal;
  attribute vec2 aTextureCoord;

uniform mat4 uNormalMatrix;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;

varying highp vec2 vTextureCoord;
  varying highp vec3 vLighting;

void main(void) {
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    vTextureCoord = aTextureCoord;

// Apply lighting effect

highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
    highp vec3 directionalLightColor = vec3(1, 1, 1);
    highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));

highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);

highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
    vLighting = ambientLight + (directionalLightColor * directional);
  }
`;

// Fragment shader program

const fsSource = `
  varying highp vec2 vTextureCoord;
  varying highp vec3 vLighting;

uniform sampler2D uSampler;

void main(void) {
    highp vec4 texelColor = texture2D(uSampler, vTextureCoord);

gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
  }
`;

// Initialize a shader program; this is where all the lighting
  // for the vertices and so forth is established.
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

// Collect all the info needed to use the shader program.
  // Look up which attributes our shader program is using
  // for aVertexPosition, aVertexColor and also
  // look up uniform locations.
  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
      vertexNormal: gl.getAttribLocation(shaderProgram, "aVertexNormal"),
      textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(
        shaderProgram,
        "uProjectionMatrix"
      ),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
      normalMatrix: gl.getUniformLocation(shaderProgram, "uNormalMatrix"),
      uSampler: gl.getUniformLocation(shaderProgram, "uSampler"),
    },
  };

// Here's where we call the routine that builds all the
  // objects we'll be drawing.
  const buffers = initBuffers(gl);

const texture = initTexture(gl);
  const video = setupVideo("https://www.sitefactory.dk/images/videos/Firefox.mp4");

// Flip image pixels into the bottom-to-top order that WebGL expects.
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

let then = 0;

// Draw the scene repeatedly
  function render(now) {
    now *= 0.001; // convert to seconds
    deltaTime = now - then;
    then = now;

if (copyVideo) {
      updateTexture(gl, texture, video);
    }

drawScene(gl, programInfo, buffers, texture, cubeRotation);
    cubeRotation += deltaTime;

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) {
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

// Create the shader program

const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

// If creating the shader program failed, alert

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert(
      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
        shaderProgram
      )}`
    );
    return null;
  }

return shaderProgram;
}

//
// creates a shader of the given type, uploads the source and
// compiles it.
//
function loadShader(gl, type, source) {
  const shader = gl.createShader(type);

// Send the source to the shader object

gl.shaderSource(shader, source);

// Compile the shader program

gl.compileShader(shader);

// See if it compiled successfully

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(
      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`
    );
    gl.deleteShader(shader);
    return null;
  }

return shader;
}

function initTexture(gl) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

// Because video has to be download over the internet
  // they might take a moment until it's ready so
  // put a single pixel in the texture so we can
  // use it immediately.
  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    width,
    height,
    border,
    srcFormat,
    srcType,
    pixel
  );

// Turn off mips and set wrapping to clamp to edge so it
  // will work regardless of the dimensions of the video.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

return texture;
}

function updateTexture(gl, texture, video) {
  const level = 0;
  const internalFormat = gl.RGBA;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    srcFormat,
    srcType,
    video
  );
}

function setupVideo(url) {
  const video = document.createElement("video");

let playing = false;
  let timeupdate = false;

video.playsInline = true;
  video.muted = true;
  video.loop = true;

// Waiting for these 2 events ensures
  // there is data in the video

video.addEventListener(
    "playing",
    () => {
      playing = true;
      checkReady();
    },
    true
  );

video.addEventListener(
    "timeupdate",
    () => {
      timeupdate = true;
      checkReady();
    },
    true
  );

video.src = url;
  video.play();

function checkReady() {
    if (playing && timeupdate) {
      copyVideo = true;
    }
  }

return video;
}

WebGL Demo