From e3fba398521979d14421a58830ac0bd77d269bc9 Mon Sep 17 00:00:00 2001
From: Ken Kahn <toontalk@gmail.com>
Date: Sat, 22 Jun 2024 17:29:46 +0200
Subject: [PATCH] Dynamic noise animation app

---
 ...xel animation by coder v2 by deepseek.html | 200 ++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 apps/dynanic pixel animation by coder v2 by deepseek.html
diff --git a/apps/dynanic pixel animation by coder v2 by deepseek.html b/apps/dynanic pixel animation by coder v2 by deepseek.html
new file mode 100644
index 0000000..f99d04e
--- /dev/null
+++ b/apps/dynanic pixel animation by coder v2 by deepseek.html	
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Color Ball and Square</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+        canvas {
+            display: block;
+        }
+        .controls {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 10;
+        }
+    </style>
+</head>
+<body>
+    <div class="controls">
+        <label for="speedSlider">Speed:</label>
+        <input type="range" id="speedSlider" min="0" max="10" value="5" step="0.1">
+    </div>
+    <canvas id="canvas"></canvas>
+    <script>
+        // Get the canvas element and its 2D drawing context
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        // Define the ball object with initial properties
+        const ball = {
+            x: Math.random() * canvas.width, // Initial x position
+            y: Math.random() * canvas.height, // Initial y position
+            radius: 100, // Radius of the ball
+            dx: (Math.random() - 0.5) * 2, // Initial x velocity
+            dy: (Math.random() - 0.5) * 2 // Initial y velocity
+        };
+
+        // Define the square object with initial properties
+        const square = {
+            x: Math.random() * canvas.width, // Initial x position
+            y: Math.random() * canvas.height, // Initial y position
+            size: 200, // Size of the square
+            dx: (Math.random() - 0.5) * 2, // Initial x velocity
+            dy: (Math.random() - 0.5) * 2 // Initial y velocity
+        };
+
+        // Function to generate a random color
+        function getRandomColor() {
+            const letters = '0123456789ABCDEF';
+            let color = '#';
+            for (let i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+        }
+
+        // Function to draw the static background with random pixels
+        function drawBackground() {
+            const imageData = ctx.createImageData(canvas.width, canvas.height);
+            const data = imageData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const color = getRandomColor();
+                const rgb = color.match(/\w\w/g).map(byte => parseInt(byte, 16));
+                data[i] = rgb[0];
+                data[i + 1] = rgb[1];
+                data[i + 2] = rgb[2];
+                data[i + 3] = 255;
+            }
+            ctx.putImageData(imageData, 0, 0);
+        }
+
+        // Function to draw the ball with random color pixels
+        function drawBall() {
+            const imageData = ctx.getImageData(ball.x - ball.radius, ball.y - ball.radius, ball.radius * 2, ball.radius * 2);
+            const data = imageData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const distance = Math.sqrt((i / 4 % (ball.radius * 2) - ball.radius) ** 2 + (Math.floor(i / 4 / (ball.radius * 2)) - ball.radius) ** 2);
+                if (distance <= ball.radius) {
+                    const color = getRandomColor();
+                    const rgb = color.match(/\w\w/g).map(byte => parseInt(byte, 16));
+                    data[i] = rgb[0];
+                    data[i + 1] = rgb[1];
+                    data[i + 2] = rgb[2];
+                    data[i + 3] = 255;
+                }
+            }
+            ctx.putImageData(imageData, ball.x - ball.radius, ball.y - ball.radius);
+        }
+
+        // Function to draw the square with random color pixels
+        function drawSquare() {
+            const imageData = ctx.getImageData(square.x, square.y, square.size, square.size);
+            const data = imageData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const color = getRandomColor();
+                const rgb = color.match(/\w\w/g).map(byte => parseInt(byte, 16));
+                data[i] = rgb[0];
+                data[i + 1] = rgb[1];
+                data[i + 2] = rgb[2];
+                data[i + 3] = 255;
+            }
+            ctx.putImageData(imageData, square.x, square.y);
+        }
+
+        // Function to update the ball's position and handle wall collisions
+        function updateBall() {
+            const speed = document.getElementById('speedSlider').value;
+            if (speed > 0) {
+                ball.x += ball.dx * speed;
+                ball.y += ball.dy * speed;
+
+                if (ball.x + ball.radius > canvas.width) {
+                    ball.x = canvas.width - ball.radius;
+                    ball.dx = -ball.dx;
+                } else if (ball.x - ball.radius < 0) {
+                    ball.x = ball.radius;
+                    ball.dx = -ball.dx;
+                }
+
+                if (ball.y + ball.radius > canvas.height) {
+                    ball.y = canvas.height - ball.radius;
+                    ball.dy = -ball.dy;
+                } else if (ball.y - ball.radius < 0) {
+                    ball.y = ball.radius;
+                    ball.dy = -ball.dy;
+                }
+
+                const distance = Math.sqrt((ball.x - square.x) ** 2 + (ball.y - square.y) ** 2);
+                if (distance < ball.radius + square.size) {
+                    if (ball.x < square.x) {
+                        ball.dx -= 0.1;
+                    } else {
+                        ball.dx += 0.1;
+                    }
+                    if (ball.y < square.y) {
+                        ball.dy -= 0.1;
+                    } else {
+                        ball.dy += 0.1;
+                    }
+                }
+            }
+        }
+
+        // Function to update the square's position and handle wall collisions
+        function updateSquare() {
+            const speed = document.getElementById('speedSlider').value;
+            if (speed > 0) {
+                const angle = Math.atan2(ball.y - square.y, ball.x - square.x);
+                square.dx = Math.cos(angle) * 2;
+                square.dy = Math.sin(angle) * 2;
+
+                square.x += square.dx * speed;
+                square.y += square.dy * speed;
+
+                if (square.x + square.size > canvas.width) {
+                    square.x = canvas.width - square.size;
+                    square.dx = -square.dx;
+                } else if (square.x < 0) {
+                    square.x = 0;
+                    square.dx = -square.dx;
+                }
+
+                if (square.y + square.size > canvas.height) {
+                    square.y = canvas.height - square.size;
+                    square.dy = -square.dy;
+                } else if (square.y < 0) {
+                    square.y = 0;
+                    square.dy = -square.dy;
+                }
+            }
+        }
+
+        // Main animation loop
+        function animate() {
+            const speed = document.getElementById('speedSlider').value;
+            if (speed > 0) {
+                drawBall();
+                drawSquare();
+            }
+            updateBall();
+            updateSquare();
+            requestAnimationFrame(animate);
+        }
+
+        // Draw the static background once
+        drawBackground();
+        // Start the animation loop
+        animate();
+    </script>
+</body>
+</html>
\ No newline at end of file
