Create SubPixelArt.html

kai9987kai · Nov 23, 2024 · 166727b · 166727b
1 parent 7bae7f2
commit 166727b
Showing 1 changed file with 130 additions and 0 deletions.
diff --git a/SubPixelArt.html b/SubPixelArt.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced Sub-Pixel Rendering Animation</title>
+    <style>
+        body {
+            margin: 0;
+            background-color: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            border: 2px solid white;
+            image-rendering: pixelated;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="subPixelCanvas" width="800" height="400"></canvas>
+    <script>
+        const canvas = document.getElementById('subPixelCanvas');
+        const ctx = canvas.getContext('2d');
+
+        const canvasWidth = canvas.width;
+        const canvasHeight = canvas.height;
+        const pixelSize = 20; // Virtual pixel size
+
+        let frame = 0;
+
+        function drawSubPixel(x, y, colorR, colorG, colorB) {
+            const subPixelWidth = pixelSize / 3;
+            ctx.fillStyle = colorR;
+            ctx.fillRect(x, y, subPixelWidth, pixelSize);
+            ctx.fillStyle = colorG;
+            ctx.fillRect(x + subPixelWidth, y, subPixelWidth, pixelSize);
+            ctx.fillStyle = colorB;
+            ctx.fillRect(x + 2 * subPixelWidth, y, subPixelWidth, pixelSize);
+        }
+
+        function drawScene() {
+            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+            // Draw gradient sky
+            for (let y = 0; y < canvasHeight / 2; y += pixelSize) {
+                for (let x = 0; x < canvasWidth; x += pixelSize) {
+                    const colorR = `rgb(${50 + y / 2}, ${100 + y / 4}, 255)`;
+                    const colorG = `rgb(${50 + y / 3}, ${150 + y / 3}, 255)`;
+                    const colorB = `rgb(${50 + y / 5}, ${200 + y / 6}, 255)`;
+                    drawSubPixel(x, y, colorR, colorG, colorB);
+                }
+            }
+
+            // Draw grassy field with a waving effect
+            for (let y = canvasHeight / 2; y < canvasHeight; y += pixelSize) {
+                for (let x = 0; x < canvasWidth; x += pixelSize) {
+                    const waveOffset = Math.sin((x + frame) / 10) * 5;
+                    const grassColorR = `rgb(0, ${100 + y / 8}, 0)`;
+                    const grassColorG = `rgb(0, ${150 + y / 6}, 0)`;
+                    const grassColorB = `rgb(0, ${200 + y / 4}, 0)`;
+                    drawSubPixel(x, y + waveOffset, grassColorR, grassColorG, grassColorB);
+                }
+            }
+
+            // Draw a simple tree with swaying leaves
+            const treeX = canvasWidth / 2;
+            const treeY = canvasHeight / 2;
+            for (let y = 0; y < 100; y += pixelSize) {
+                drawSubPixel(treeX, treeY + y, 'rgb(139,69,19)', 'rgb(160,82,45)', 'rgb(210,105,30)');
+            }
+            for (let y = -100; y < 0; y += pixelSize) {
+                for (let x = -60; x < 60; x += pixelSize) {
+                    const sway = Math.sin((y + frame) / 10) * 10;
+                    drawSubPixel(treeX + x + sway, treeY + y, 'rgb(34,139,34)', 'rgb(0,128,0)', 'rgb(50,205,50)');
+                }
+            }
+        }
+
+        function drawMan(x, y, frame) {
+            drawSubPixel(x, y, 'rgb(255,228,196)', 'rgb(255,222,173)', 'rgb(255,218,185)');
+            for (let i = 1; i <= 2; i++) {
+                drawSubPixel(x, y + i * pixelSize, 'rgb(0,0,255)', 'rgb(0,0,205)', 'rgb(0,0,139)');
+            }
+            if (frame % 4 < 2) {
+                drawSubPixel(x - pixelSize, y + 3 * pixelSize, 'rgb(0,0,0)', 'rgb(0,0,0)', 'rgb(0,0,0)');
+                drawSubPixel(x + pixelSize, y + 3 * pixelSize, 'rgb(0,0,0)', 'rgb(0,0,0)', 'rgb(0,0,0)');
+            } else {
+                drawSubPixel(x, y + 3 * pixelSize, 'rgb(0,0,0)', 'rgb(0,0,0)', 'rgb(0,0,0)');
+            }
+        }
+
+        function drawBird(x, y) {
+            drawSubPixel(x, y, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+            drawSubPixel(x - pixelSize, y + pixelSize, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+            drawSubPixel(x + pixelSize, y + pixelSize, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+        }
+
+        function drawCloud(x, y) {
+            drawSubPixel(x, y, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+            drawSubPixel(x - pixelSize, y, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+            drawSubPixel(x + pixelSize, y, 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)');
+        }
+
+        function animate() {
+            drawScene();
+
+            const birdX = (frame * 2) % canvasWidth;
+            drawBird(birdX, 80);
+
+            const cloudX = (frame * 0.5) % canvasWidth;
+            drawCloud(cloudX, 50);
+            drawCloud(cloudX + 300, 100);
+
+            const manX = (100 + frame) % canvasWidth;
+            drawMan(manX, canvasHeight / 2 + 50, frame);
+
+            frame++;
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>