Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

const imageSrc = 'data:image/png;base64,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';
;

</script>
</body>
</html>

console.log("Event Fired")
//---

'use strict';

//---

console.clear();

//---

let w = 0;
let h = 0;

let animationFrame = null;
let isTouchDevice = false;

const canvas = document.createElement( 'canvas' );
const context = canvas.getContext( '2d', { willReadFrequently: false, alpha: false } );

let imageData = null;
let data = null;

const center = { x: w / 2, y: h / 2 };

let pointerPos = { x: center.x, y: center.y };
let pointerPosSave = { x: pointerPos.x, y: pointerPos.y };
let pointerDownButton = -1;

//---

const FLAME_COLORS = [

255, 255, 255,
    230, 230, 250,
    255, 255, 0,
    255, 215, 0,
    255, 105, 180,
    255, 99, 71,
    72, 61, 139,
    34, 34, 34,
    26, 26, 26,
    17, 17, 17,

];

let flameColorDepth = 39;
let flameColorTable = createGradient( FLAME_COLORS, flameColorDepth );
let flameColorTableLength = Math.round( flameColorTable.length / 3 ) - 1;

let gridWidth = 0;
let gridHeight = 0;

let windStrength = 0;
let windDirection = 0;

let pixelSize = 2;
let pixelSizeSquared = pixelSize * pixelSize;
let pixelHolderLength = 0;
let pixelHolder = null;
let pixelBufferHolder = null;
let pixelImageBufferHolder = null;
let pixelSpreadFrom = null;
let pixelSpreadFromLengthPreCalc = 0;

const RANDOM_TABLE_SIZE = 512; // Power of 2
const RANDOM_TABLE_MASK = RANDOM_TABLE_SIZE - 1;
const randomTable = new Float32Array( RANDOM_TABLE_SIZE );
let randomIndex = 0;

let gui = null;
let stats = null;

const ROCKET_PROPS = 4;
const ROCKET_COUNT_MIN = 3;
const ROCKET_COUNT_MAX = 25;
const ROCKETS_PER_PIXEL = 1 / 300;

let rocketCount = 0;
let rocketHolderLength = 0;
let rocketHolder = null;

const IMAGE_THRESHOLD = 1;
const IMAGE_MARGIN = 15;

//---

function init() {

isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

//---

if ( isTouchDevice === true ) {

canvas.addEventListener( 'touchmove', cursorMoveHandler, false );
        canvas.addEventListener( 'touchstart', cursorEnterHandler, false );
        canvas.addEventListener( 'touchend', cursorLeaveHandler, false );
        canvas.addEventListener( 'touchcancel ', cursorLeaveHandler, false );

} else {

canvas.addEventListener( 'pointermove', cursorMoveHandler, false );
        canvas.addEventListener( 'pointerdown', cursorDownHandler, false );
        canvas.addEventListener( 'pointerup', cursorUpHandler, false );
        canvas.addEventListener( 'pointerenter', cursorEnterHandler, false );
        canvas.addEventListener( 'pointerleave', cursorLeaveHandler, false );

}

//---

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

randomTable[ i ] = Math.random();

}

//---

stats = new Stats();
    stats.domElement.style.position = 'absolute';

document.body.appendChild( stats.domElement );

//---

document.body.appendChild( canvas );

window.addEventListener( 'resize', onResize, false );

restart( true );

}

function onResize( event ) {
    
    restart();

}

function restart( explosion = false ) {

const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    const innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

//---

w = innerWidth;
    h = innerHeight;

//---

canvas.width = w;
    canvas.height = h;

imageData = context.getImageData( 0, 0, w, h );
    data = imageData.data;

//---
    
    center.x = w / 2;
    center.y = h / 2;
    
    pointerPos.x = center.x;
    pointerPos.y = center.y;

pointerPosSave.x = pointerPos.x / pixelSize | 0;
    pointerPosSave.y = pointerPos.y / pixelSize | 0;

//---

gridWidth = Math.floor( w / pixelSize );
    gridHeight = Math.floor( h / pixelSize );

//---

setBackground();
    initFire( explosion );

//---

initRockets();

//---

const img = new Image();

img.src = imageSrc;
    img.onload = ( event ) => {

initImageBuffer( event.target, pixelImageBufferHolder );

}

//---
    
    if ( animationFrame != null ) {
    
        cancelAnimFrame( animationFrame );
    
    }
    
    render();

}

//---

function initGUI() {

const updatePixelsize = () => {
        
        pixelSize = guiSetting[ 'Pixelsize' ];
        pixelSizeSquared = pixelSize * pixelSize;

restart( false );

};

const updateWindStrength = () => {
        
        windStrength = guiSetting[ 'Wind strength' ];

spreadFrom();

};

const updateWindDirection = () => {
        
        windDirection = guiSetting[ 'Wind direction' ];

spreadFrom();

};

const updateFlameColorDepth = () => {
        
        flameColorDepth = guiSetting[ 'Color depth' ];
        flameColorTable = createGradient( FLAME_COLORS, flameColorDepth );
        flameColorTableLength = Math.round( flameColorTable.length / 3 ) - 1;

setBackground();

};

const updateColorGradient = ( colorIndex ) => {

const newColorArray = guiSetting[ `Color ${colorIndex + 1}` ];

FLAME_COLORS[ colorIndex * 3 ]     = Math.round( newColorArray[ 0 ] );
        FLAME_COLORS[ colorIndex * 3 + 1 ] = Math.round( newColorArray[ 1 ] );
        FLAME_COLORS[ colorIndex * 3 + 2 ] = Math.round( newColorArray[ 2 ] );

flameColorTable = createGradient( FLAME_COLORS, flameColorDepth );

setBackground();

};

const linkTo = () => {

window.open( 'https://x.com/niklaswebdev', '_parent' );

};

const guiSetting = {

'Pixelsize': pixelSize,
        'Wind strength': windStrength,
        'Wind direction': windDirection,
        'Color depth': flameColorDepth,
        'Color 1':  [ FLAME_COLORS[ 0 ], FLAME_COLORS[ 1 ], FLAME_COLORS[ 2 ] ],
        'Color 2':  [ FLAME_COLORS[ 3 ], FLAME_COLORS[ 4 ], FLAME_COLORS[ 5 ] ],
        'Color 3':  [ FLAME_COLORS[ 6 ], FLAME_COLORS[ 7 ], FLAME_COLORS[ 8 ] ],
        'Color 4':  [ FLAME_COLORS[ 9 ], FLAME_COLORS[ 10 ], FLAME_COLORS[ 11 ] ],
        'Color 5':  [ FLAME_COLORS[ 12 ], FLAME_COLORS[ 13 ], FLAME_COLORS[ 14 ] ],
        'Color 6':  [ FLAME_COLORS[ 15 ], FLAME_COLORS[ 16 ], FLAME_COLORS[ 17 ] ],
        'Color 7':  [ FLAME_COLORS[ 18 ], FLAME_COLORS[ 19 ], FLAME_COLORS[ 20 ] ],
        'Color 8':  [ FLAME_COLORS[ 21 ], FLAME_COLORS[ 22 ], FLAME_COLORS[ 23 ] ],
        'Color 9':  [ FLAME_COLORS[ 24 ], FLAME_COLORS[ 25 ], FLAME_COLORS[ 26 ] ],
        'Color 10': [ FLAME_COLORS[ 27 ], FLAME_COLORS[ 28 ], FLAME_COLORS[ 29 ] ],
        '@niklaswebdev': linkTo

};

gui = new dat.GUI();
    gui.add( guiSetting, 'Pixelsize' ).min( 1 ).max( 10 ).step( 1 ).onChange( updatePixelsize );
    gui.add( guiSetting, 'Wind strength' ).min( 0 ).max( 50 ).step( 1 ).onChange( updateWindStrength );
    gui.add( guiSetting, 'Wind direction' ).min( -1 ).max( 1 ).step( 1 ).onChange( updateWindDirection );
    gui.add( guiSetting, 'Color depth' ).min( FLAME_COLORS.length ).max( FLAME_COLORS.length / 3 * 10 ).step( 1 ).onChange( updateFlameColorDepth );
    
    const folderColorGradient = gui.addFolder( 'Color gradient' );

folderColorGradient.addColor( guiSetting, 'Color 1' ).onChange( updateColorGradient.bind( this, 0 ) );
    folderColorGradient.addColor( guiSetting, 'Color 2' ).onChange( updateColorGradient.bind( this, 1 ) );
    folderColorGradient.addColor( guiSetting, 'Color 3' ).onChange( updateColorGradient.bind( this, 2 ) );
    folderColorGradient.addColor( guiSetting, 'Color 4' ).onChange( updateColorGradient.bind( this, 3 ) );
    folderColorGradient.addColor( guiSetting, 'Color 5' ).onChange( updateColorGradient.bind( this, 4 ) );
    folderColorGradient.addColor( guiSetting, 'Color 6' ).onChange( updateColorGradient.bind( this, 5 ) );
    folderColorGradient.addColor( guiSetting, 'Color 7' ).onChange( updateColorGradient.bind( this, 6 ) );
    folderColorGradient.addColor( guiSetting, 'Color 8' ).onChange( updateColorGradient.bind( this, 7 ) );
    folderColorGradient.addColor( guiSetting, 'Color 9' ).onChange( updateColorGradient.bind( this, 8 ) );
    folderColorGradient.addColor( guiSetting, 'Color 10' ).onChange( updateColorGradient.bind( this, 9 ) );

gui.add( guiSetting, '@niklaswebdev' );
    gui.close();

}

//---

function setBackground() {

const fCTL = flameColorTable.length;

for ( let i = 0, l = data.length; i < l; i += 4 ) {

data[ i ]     = flameColorTable[ fCTL - 3 ];
        data[ i + 1 ] = flameColorTable[ fCTL - 2 ];
        data[ i + 2 ] = flameColorTable[ fCTL - 1 ];

}

function initFire( explosion = false ) {

pixelHolderLength = gridWidth * gridHeight;
    pixelHolder = new Uint8Array( pixelHolderLength );
    pixelBufferHolder = new Uint8Array( pixelHolderLength );
    pixelImageBufferHolder = new Uint8Array( pixelHolderLength );

spreadFrom();

for ( let y = 0; y < h; y++ ) {

for ( let x = 0; x < w; x++ ) {

const index = y * gridWidth + x;

if ( y === gridHeight - 1 && explosion ) {

pixelHolder[ index ] = 0;

} else {

pixelHolder[ index ] = flameColorTableLength;

}

pixelImageBufferHolder[ index ] = flameColorTableLength;

}

function initRockets() {

rocketCount = Math.floor( w * ROCKETS_PER_PIXEL );
    rocketCount = Math.max( ROCKET_COUNT_MIN, Math.min( rocketCount, ROCKET_COUNT_MAX ) );
    rocketHolderLength = rocketCount * ROCKET_PROPS;
    rocketHolder = new Float32Array( rocketHolderLength );

for ( let i = 0; i < rocketHolderLength; i += ROCKET_PROPS ) {

const x = Math.random() * w / pixelSize;
        const y = ( h + Math.random() * h ) / pixelSize;
        const vx = getRandomNumber( -1, 1 );
        const vy = getRandomNumber( -6, -3 );

rocketHolder[ i ]     = x;
        rocketHolder[ i + 1 ] = y;
        rocketHolder[ i + 2 ] = vx;
        rocketHolder[ i + 3 ] = vy;

}

function initImageBuffer( image, imageBuffer ) {

const availableWidth = gridWidth - IMAGE_MARGIN * 2;
    const availableHeight = gridHeight - IMAGE_MARGIN * 2;

let scaledWidth = Math.floor( image.width / pixelSize );
    let scaledHeight = Math.floor( image.height / pixelSize );

const widthRatio = availableWidth / scaledWidth;
    const heightRatio = availableHeight / scaledHeight;
    const scale = Math.min( widthRatio, heightRatio, 1 );

scaledWidth = Math.floor( scaledWidth * scale );
    scaledHeight = Math.floor( scaledHeight * scale );

//---

const startX = Math.floor( ( gridWidth - scaledWidth ) / 2 );
    const startY = Math.floor( ( gridHeight - scaledHeight ) / 2 );

const offscreenCanvas = document.createElement( 'canvas' );
    const offscreenContext = offscreenCanvas.getContext( '2d' );

offscreenCanvas.width = scaledWidth;
    offscreenCanvas.height = scaledHeight;
    offscreenContext.drawImage( image, 0, 0, scaledWidth, scaledHeight );

const imageData = offscreenContext.getImageData( 0, 0, scaledWidth, scaledHeight );
    const data = imageData.data;

for ( let y = 0; y < scaledHeight; y++ ) {

for ( let x = 0; x < scaledWidth; x++ ) {

const pixelIndex = ( y * scaledWidth + x ) * 4;

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

if ( r > IMAGE_THRESHOLD && g > IMAGE_THRESHOLD && b > IMAGE_THRESHOLD ) {

const pixelIndex = ( startY + y ) * gridWidth + ( startX + x );

// imageBuffer[ pixelIndex ] = 0;
                imageBuffer[ pixelIndex ] = Math.floor( Math.random() * ( flameColorTableLength * 0.25 ) );

}

function spreadFrom() {

const right = windDirection > 0 ? [ 1, 1, ...Array( Math.max( windStrength - 2, 0 ) ).fill( 1 ) ] : [ 1, 1 ];
    const left = windDirection < 0 ? [ -1, -1, ...Array( Math.max( windStrength - 2, 0 ) ).fill( -1 ) ] : [ -1, -1 ];

pixelSpreadFrom = new Int16Array( [

gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, gridWidth, // bottom
        ...right, // right
        ...left, // left
        -gridWidth, // top

] );

pixelSpreadFromLengthPreCalc = pixelSpreadFrom.length - 1;

}

//---

function getRandomNumber( min, max ) {

return Math.random() * ( max - min ) + min;

}

function getRandomInt( min, max ) {

randomIndex = ( randomIndex + 1 ) & RANDOM_TABLE_MASK;

return ( ( randomTable[ randomIndex ] * ( max - min + 1 ) ) | 0 ) + min;

}

function interpolate( start, end, t ) {
        
    return Math.round( start + ( end - start ) * t );

}

function createGradient( colors, flameColorDepth ) {

const colorArray = new Uint8Array( flameColorDepth * 3 );

const segments = colors.length / 3 - 1;
    const colorsPerSegment = Math.floor( flameColorDepth / segments );

let index = 0;

for ( let s = 0; s < segments; s++ ) {

const startColor = colors.slice( s * 3, s * 3 + 3 );
        const endColor = colors.slice( ( s + 1 ) * 3, ( s + 1 ) * 3 + 3 );

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

const t = i / colorsPerSegment;

colorArray[ index ]    = interpolate( startColor[ 0 ], endColor[ 0 ], t ); // R
            colorArray[ index + 1] = interpolate( startColor[ 1 ], endColor[ 1 ], t ); // G
            colorArray[ index + 2] = interpolate( startColor[ 2 ], endColor[ 2 ], t ); // B

index += 3;

}

const lastColor = colors.slice( -3 );

while ( index < colorArray.length ) {

colorArray[ index ]     = lastColor[ 0 ];
        colorArray[ index + 1 ] = lastColor[ 1 ];
        colorArray[ index + 2 ] = lastColor[ 2 ];

index += 3;

}

return colorArray;

}

//---

function cursorDownHandler( event ) {

pointerDownButton = event.button;

}

function cursorUpHandler( event ) {

pointerDownButton = -1;

}

function cursorEnterHandler( event ) {

const rect = canvas.getBoundingClientRect();
    const position = { x: 0, y: 0 };

if ( event.type === 'mouseenter' || event.type === 'pointerenter' ) {

position.x = event.pageX - rect.left; //event.clientX
        position.y = event.pageY - rect.top; //event.clientY

} else if ( event.type === 'touchstart' ) {

position.x = event.touches[ 0 ].pageX - rect.left;
        position.y = event.touches[ 0 ].pageY - rect.top;

}

pointerPosSave.x = position.x / pixelSize | 0;
    pointerPosSave.y = position.y / pixelSize | 0;

}

function cursorLeaveHandler( event ) {

pointerPos.x = center.x;
    pointerPos.y = center.y;
    pointerPosSave.x = pointerPos.x / pixelSize | 0;
    pointerPosSave.y = pointerPos.y / pixelSize | 0;
    pointerDownButton = -1;

}

function cursorMoveHandler( event ) {

pointerPos = getCursorPosition( canvas, event );

}

function getCursorPosition( element, event ) {

const rect = element.getBoundingClientRect();
    const position = { x: 0, y: 0 };

if ( event.type === 'mousemove' || event.type === 'pointermove' ) {

position.x = event.pageX - rect.left; //event.clientX
        position.y = event.pageY - rect.top; //event.clientY

} else if ( event.type === 'touchmove' ) {

position.x = event.touches[ 0 ].pageX - rect.left;
        position.y = event.touches[ 0 ].pageY - rect.top;

}

return position;

}

//---

function trace() {

const px = pointerPos.x / pixelSize | 0;
    const py = pointerPos.y / pixelSize | 0;

const dx = px - pointerPosSave.x;
    const dy = py - pointerPosSave.y;

if ( dx === 0 && dy === 0 ) {

const index = py * gridWidth + px;

pixelHolder[ index ] = 0;

} else {

const distanceSquared = dx * dx + dy * dy;
        const stepCount = Math.ceil( distanceSquared / pixelSizeSquared );

for ( let step = 0; step <= stepCount; step++ ) {

const t = step / stepCount;

const interpolatedX = ( px + t * dx ) | 0;
            const interpolatedY = ( py + t * dy ) | 0;

const index = interpolatedY * gridWidth + interpolatedX;

pixelHolder[ index ] = 0;

}

pointerPosSave.x = px;
    pointerPosSave.y = py;

}

function draw() {

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

let colorIndex = pixelHolder[ i ];

const direction = pixelSpreadFrom[ getRandomInt( 0, pixelSpreadFromLengthPreCalc ) ];

const neighborIndex = i + direction;

const neighborColorIndex = pixelHolder[ neighborIndex ];

if ( neighborColorIndex < colorIndex ) {

if ( pointerDownButton === -1 ) {

colorIndex = neighborColorIndex + getRandomInt( -1, 4 );

} else {

colorIndex = neighborColorIndex + getRandomInt( -1, 3 );

}

} else {

colorIndex++;

}

if ( colorIndex > flameColorTableLength ) {

colorIndex = flameColorTableLength;

}

if ( colorIndex < 0 ) {

colorIndex = 0;

}

const colorImageBufferIndex = pixelImageBufferHolder[ i ];

if ( colorImageBufferIndex < colorIndex ) {

pixelBufferHolder[ i ] = colorImageBufferIndex;

} else {

pixelBufferHolder[ i ] = colorIndex;

}

//---

for ( let i = 0; i < rocketHolderLength; i += ROCKET_PROPS ) {

let rocketX = rocketHolder[ i ];
        let rocketY = rocketHolder[ i + 1 ];

const rocketVX =    rocketHolder[ i + 2 ];
        const rocketVY =    rocketHolder[ i + 3 ];

//---

rocketX += rocketVX;
        rocketY += rocketVY;

if ( rocketY <= 0 ) {

rocketX = Math.random() * w / pixelSize;
            rocketY = h / pixelSize;

}

//---

if ( rocketX > 0 && rocketX < gridWidth && rocketY < gridHeight ) {

const pixelIndex = ( rocketY | 0 ) * gridWidth + ( rocketX | 0 );

pixelBufferHolder[ pixelIndex ] = 0;

}

//---

rocketHolder[ i ]     = rocketX;
        rocketHolder[ i + 1 ] = rocketY;

}

//----

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

const colorIndex = pixelHolder[ i ];

if ( colorIndex < flameColorTableLength ) {

if ( pixelSize > 0 ) {

const gridY = ( i / gridWidth ) | 0;
                const gridX = i % gridWidth;

for ( let offsetY = 0; offsetY < pixelSize; offsetY++ ) {

for ( let offsetX = 0; offsetX < pixelSize; offsetX++ ) {
                        
                        const pixelIndex = ( ( gridY * pixelSize + offsetY ) * w + ( gridX * pixelSize + offsetX ) ) * 4;

data[ pixelIndex ]     = flameColorTable[ colorIndex * 3 ];     // R
                        data[ pixelIndex + 1 ] = flameColorTable[ colorIndex * 3 + 1 ]; // G
                        data[ pixelIndex + 2 ] = flameColorTable[ colorIndex * 3 + 2 ]; // B

}

} else {

const pixelIndex = i * 4; // 4 für RGBA

data[ pixelIndex ]     = flameColorTable[ colorIndex * 3 ];     // R
                data[ pixelIndex + 1 ] = flameColorTable[ colorIndex * 3 + 1 ]; // G
                data[ pixelIndex + 2 ] = flameColorTable[ colorIndex * 3 + 2 ]; // B

}

pixelHolder[ i ] = pixelBufferHolder[ i ];

}

//---

function render( timestamp ) {

trace();
    draw();

//---

context.putImageData( imageData, 0, 0 );

//---

stats.update();

//---

animationFrame = requestAnimFrame( render );

}

window.requestAnimFrame = ( () => {

return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.msRequestAnimationFrame;

} )();

window.cancelAnimFrame = ( () => {

return  window.cancelAnimationFrame       ||
            window.mozCancelAnimationFrame;

} )();

//---

document.addEventListener( 'DOMContentLoaded', () => {

init();
    initGUI();

} );

Frontend Forever App