b5088b599d401b076df6dcf2d5e1a9dff30b9031747a54959d77ab1ad697f19b_0

Details

Value

0.00000001 BSV

Script

1Sat Ordinal

Block

845,918

Status

Unknown to the indexer

Inscriptiontext/html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ord Fields : Impulse</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            height: 100vh;
            display: flex;
            justify-content: center; 
            align-items: center;     
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const numPixels = 25;
    let pixels = [];
    const width = canvas.width;
    const height = canvas.height;
    const edgePadding = 20;

    class Vector {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        add(v) {
            this.x += v.x;
            this.y += v.y;
        }

        sub(v) {
            return new Vector(this.x - v.x, this.y - v.y);
        }

        mult(n) {
            this.x *= n;
            this.y *= n;
        }

        mag() {
            return Math.sqrt(this.x * this.x + this.y * this.y);
        }

        setMag(n) {
            const m = this.mag();
            if (m !== 0) {
                this.mult(n / m);
            }
        }

        limit(n) {
            if (this.mag() > n) {
                this.setMag(n);
            }
        }
    }

    class Pixel {
        constructor(x, y) {
            this.pos = new Vector(x, y);
            this.vel = new Vector(0, 0); 
            this.acc = new Vector(0, 0);
            this.maxForce = 0.1;
        }

        applyForce(force) {
            this.acc.add(force);
        }

        repulseForce(other) {
            let force = this.pos.sub(other.pos);
            let distance = force.mag();
            if (distance < 60 && distance > 0) {
                force.setMag(this.maxForce / distance);
                this.applyForce(force);
            }
        }

        edgeRepulsion() {
            let repelStrength = 0.5;

            if (this.pos.x < edgePadding) {
                this.applyForce(new Vector(repelStrength, 0));
            } else if (this.pos.x > width - edgePadding) {
                this.applyForce(new Vector(-repelStrength, 0));
            }

            if (this.pos.y < edgePadding) {
                this.applyForce(new Vector(0, repelStrength));
            } else if (this.pos.y > height - edgePadding) {
                this.applyForce(new Vector(0, -repelStrength));
            }
        }

        move() {
            this.vel.add(this.acc);
            this.vel.limit(2);
            this.pos.add(this.vel);
            this.acc.mult(0);
            this.pos.x = Math.max(0, Math.min(this.pos.x, width));
            this.pos.y = Math.max(0, Math.min(this.pos.y, height));
        }

        display() {
            for (let other of pixels) {
                let d = this.dist(other.pos);
                let alpha = Math.max(0, 255 - (d / 150) * 255); 
                if (alpha > 0) {
                    ctx.shadowBlur = 10;  
                    ctx.shadowColor = `rgba(255, 255, 255, ${alpha / 255})`;
                    ctx.strokeStyle = `rgba(255, 255, 255, ${alpha / 255})`;
                    ctx.beginPath();
                    ctx.moveTo(this.pos.x, this.pos.y);
                    ctx.lineTo(other.pos.x, other.pos.y);
                    ctx.stroke();
                }
            }
            
            ctx.shadowBlur = 0;
            ctx.shadowColor = 'transparent';
        }

        dist(otherPos) {
            return Math.sqrt(Math.pow(this.pos.x - otherPos.x, 2) + Math.pow(this.pos.y - otherPos.y, 2));
        }
    }

    function setup() {
        for (let i = 0; i < numPixels; i++) {
            const x = Math.random() * (width - 2 * edgePadding) + edgePadding;
            const y = Math.random() * (height - 2 * edgePadding) + edgePadding;
            pixels.push(new Pixel(x, y));
        }
        requestAnimationFrame(draw);
    }

    function draw() {
        ctx.clearRect(0, 0, width, height);
        for (let pixel of pixels) {
            for (let other of pixels) {
                if (pixel !== other) {
                    pixel.repulseForce(other);
                }
            }
            pixel.edgeRepulsion();
            pixel.move();
            pixel.display();
        }
        requestAnimationFrame(draw);
    }

    setup();
</script>
</body>
</html>