awacke1/OnShotTest-AnimatedGraphics-Deepseek-R1

1import streamlit as st2 3def create_animation_app():4    st.title("Bouncing Balls & Jellyfish in a Sphere")5 6    html_content = """7    <style>8        .container {9            position: relative;10            width: 800px;11            height: 600px;12            margin: auto;13        }14        #animationCanvas, #p5Canvas {15            position: absolute;16            top: 0;17            left: 0;18        }19        canvas {20            background-color: transparent;21        }22    </style>23 24    <div class="container">25        <canvas id="animationCanvas"></canvas>26        <div id="p5Container"></div>27    </div>28 29    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>30 31    <script>32    // Jellyfish Animation33    const jellyfishCanvas = document.getElementById('animationCanvas');34    const ctx = jellyfishCanvas.getContext('2d');35    jellyfishCanvas.width = 800;36    jellyfishCanvas.height = 600;37 38    let t = 0;39 40    function mag(x, y) {41        return Math.sqrt(x * x + y * y);42    }43 44    function a(x, y) {45        const k = x/8 - 25;46        const e = y/8 - 25;47        const d = mag(k, e)**2 / 99;48        49        const q = x/3 + k * 0.5 / Math.cos(y*5) * Math.sin(d*d - t);50        const c = d/2 - t/8;51        52        const xPos = q * Math.sin(c) + e * Math.sin(d + k - t) + 400;53        const yPos = (q + y/8 + d*9) * Math.cos(c) + 300;54        55        return [xPos, yPos];56    }57 58    function getColor(x, y, t) {59        const hue = (Math.sin(t/2) * 360 + x/3 + y/3) % 360;60        const saturation = 70 + Math.sin(t) * 30;61        const lightness = 50 + Math.cos(t/2) * 20;62        return `hsla(${hue}, ${saturation}%, ${lightness}%, 0.5)`;63    }64 65    function drawJellyfish() {66        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';67        ctx.fillRect(0, 0, jellyfishCanvas.width, jellyfishCanvas.height);68        69        ctx.lineWidth = 1.5;70        71        for(let y = 99; y < 300; y += 4) {72            for(let x = 99; x < 300; x += 2) {73                const [px, py] = a(x, y);74                const color = getColor(x, y, t);75                76                ctx.strokeStyle = color;77                ctx.beginPath();78                ctx.moveTo(px, py);79                ctx.lineTo(px + 1, py + 1);80                ctx.stroke();81            }82        }83        84        t += Math.PI / 120;85        requestAnimationFrame(drawJellyfish);86    }87 88    // Initialize jellyfish animation89    drawJellyfish();90 91    // Bouncing Balls Animation with p5.js92    new p5((sketch) => {93        let balls = [];94        const numBalls = 100;95        const sphereRadius = 200;96        let rotation = {x: 0, y: 0};97 98        class Ball {99            constructor() {100                this.pos = p5.Vector.random3D().mult(sphereRadius * 0.8);101                this.vel = p5.Vector.random3D().mult(sketch.random(1, 3));102                this.radius = 3;103            }104 105            update() {106                // Update position107                this.pos.add(this.vel);108 109                // Sphere collision110                let distance = this.pos.mag();111                if (distance > sphereRadius - this.radius) {112                    let normal = this.pos.copy().normalize();113                    let reflection = this.vel.copy().reflect(normal);114                    this.vel.set(reflection);115                    this.pos = normal.mult(sphereRadius - this.radius);116                }117            }118 119            display() {120                sketch.push();121                sketch.translate(this.pos.x, this.pos.y, this.pos.z);122                sketch.fill(255, 255, 0);123                sketch.noStroke();124                sketch.sphere(this.radius);125                sketch.pop();126            }127        }128 129        function checkCollisions() {130            for(let i = 0; i < balls.length; i++) {131                for(let j = i+1; j < balls.length; j++) {132                    let b1 = balls[i];133                    let b2 = balls[j];134                    let d = b1.pos.dist(b2.pos);135                    let minDist = b1.radius + b2.radius;136 137                    if (d < minDist) {138                        let normal = p5.Vector.sub(b1.pos, b2.pos).normalize();139                        let overlap = (minDist - d) / 2;140                        141                        // Position correction142                        b1.pos.add(p5.Vector.mult(normal, overlap));143                        b2.pos.sub(p5.Vector.mult(normal, overlap));144 145                        // Velocity adjustment146                        let velDiff = p5.Vector.sub(b1.vel, b2.vel);147                        let impulse = velDiff.dot(normal) / (1 + 1);148                        b1.vel.sub(p5.Vector.mult(normal, impulse));149                        b2.vel.add(p5.Vector.mult(normal, impulse));150                    }151                }152            }153        }154 155        sketch.setup = () => {156            const p5Canvas = sketch.createCanvas(800, 600, sketch.WEBGL);157            p5Canvas.parent('p5Container');158            sketch.frameRate(30);159            160            // Create balls161            for(let i = 0; i < numBalls; i++) {162                balls.push(new Ball());163            }164        };165 166        sketch.draw = () => {167            sketch.background(0, 0);168            sketch.rotateX(rotation.x);169            sketch.rotateY(rotation.y);170            171            // Slowly rotate the sphere172            rotation.x += 0.002;173            rotation.y += 0.003;174 175            // Draw wireframe sphere176            sketch.push();177            sketch.noFill();178            sketch.stroke(255, 50);179            sketch.sphere(sphereRadius);180            sketch.pop();181 182            // Update and display balls183            balls.forEach(ball => {184                ball.update();185                ball.display();186            });187            188            checkCollisions();189        };190    }, 'p5Container');191    </script>192    """193    194    st.components.v1.html(html_content, height=600)195 196if __name__ == "__main__":197    create_animation_app()