Spaces:

p3nGu1nZz
/

plasma-arc

Running

App Files Files Community

p3nGu1nZz commited on 17 days ago

Commit

7a6ace8

•

1 Parent(s): d4a90dc

add center white circle to the canvas

Browse files

Files changed (3) hide show

index.html +33 -78
plasma-arc-01.jpg +0 -0
style.css +21 -14

index.html CHANGED Viewed

@@ -3,98 +3,53 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Plasma Arc Project</title>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
-        body { margin: 0; padding: 0; overflow: hidden; background-color: black; }
-    </style>
-    <script type="module">
-        const config = {
-            backgroundColor: 'black', font: 'Orbitron, monospace', fontSize: '16px', fontColor: 'white', name: 'Plasma Arc Project', version: 'v1.0.0',
-            fpsFontSize: '14px', versionFontSize: '10px', canvasId: 'plasma-arc-canvas', padding: 10
-        };
-        const state = {
-            fpsX: config.padding * 7, fpsY: config.padding, nameX: null, nameY: null, versionY: null, lastFrameTime: 0, fps: 0, smoothFPS: 0
-        };
-        function lerp(start, end, amount) {
-            return start + (end - start) * amount;
-        }
-        function createCanvas() {
-            const canvas = document.createElement('canvas');
-            canvas.id = config.canvasId;
-            document.body.appendChild(canvas);
-            return canvas;
-        }
-        function initializeCanvas(canvas, context) {
-            resizeCanvas(canvas);
-            fillCanvasWithColor(canvas, context);
-            updateTextPositions(canvas);
-        }
-        function resizeCanvas(canvas) {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
-        }
-        function fillCanvasWithColor(canvas, context) {
-            context.fillStyle = config.backgroundColor;
             context.fillRect(0, 0, canvas.width, canvas.height);
         }
-        function updateTextPositions(canvas) {
-            state.nameX = canvas.width - config.padding;
-            state.nameY = canvas.height - config.padding * 2;
-            state.versionY = canvas.height - config.padding;
-        }
-        function drawText(context, text, x, y, fontSize, textAlign, textBaseline) {
-            context.font = `${fontSize} ${config.font}`;
-            context.fillStyle = config.fontColor;
-            context.textAlign = textAlign;
-            context.textBaseline = textBaseline;
-            context.fillText(text, x, y);
         }
-        function formatFPS(fps) {
-            return Math.round(fps);
         }
-        function main() {
-            document.body.style.margin = 0;
-            document.body.style.padding = 0;
-            const canvas = createCanvas();
-            const context = canvas.getContext('2d');
-            initializeCanvas(canvas, context);
-            function tick(currentTime) {
-                const deltaTime = (currentTime - state.lastFrameTime) / 1000;
-                state.lastFrameTime = currentTime;
-                const currentFPS = 1 / deltaTime;
-                state.smoothFPS = lerp(state.smoothFPS, currentFPS, 0.1);
-                context.clearRect(0, 0, canvas.width, canvas.height);
-                fillCanvasWithColor(canvas, context);
-                drawText(context, `${formatFPS(state.smoothFPS)} fps`, state.fpsX, state.fpsY, config.fpsFontSize, 'right', 'top');
-                drawText(context, config.name, state.nameX, state.nameY, config.fontSize, 'right', 'bottom');
-                drawText(context, config.version, state.nameX, state.versionY, config.versionFontSize, 'right', 'bottom');
-                requestAnimationFrame(tick);
-            }
-            window.addEventListener('resize', () => initializeCanvas(canvas, context));
-            requestAnimationFrame(tick);
         }
-        window.addEventListener('DOMContentLoaded', main);
     </script>
-</head>
-<body>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minimalist White Circle</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const context = canvas.getContext('2d');
+        const versionText = 'v1.0.0';
+        function initializeCanvas() {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
+            context.fillStyle = 'black';
             context.fillRect(0, 0, canvas.width, canvas.height);
         }
+        function drawWhiteCircle() {
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = Math.min(canvas.width, canvas.height) * 0.0125; // 1.25% of the smaller dimension
+            context.beginPath();
+            context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+            context.strokeStyle = 'white';
+            context.lineWidth = 0.25 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.25em stroke
+            context.stroke();
         }
+        function drawVersionText() {
+            context.font = '1em Arial';
+            context.fillStyle = 'white';
+            context.textAlign = 'right';
+            context.textBaseline = 'bottom';
+            context.fillText(versionText, canvas.width - 10, canvas.height - 10);
         }
+        function draw() {
+            initializeCanvas();
+            drawWhiteCircle();
+            drawVersionText();
         }
+        draw();
+        window.addEventListener('resize', draw);
     </script>
 </body>
 </html>

plasma-arc-01.jpg ADDED Viewed

style.css CHANGED Viewed

@@ -1,28 +1,35 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
 .card p:last-child {
-	margin-bottom: 0;
 }

 body {
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
+    font-size: 10em;
+    margin-top: 0;
 }
 p {
+    color: rgb(107, 114, 128);
+    font-size: 1em;
+    margin-bottom: 10px;
+    margin-top: 5px;
 }
 .card {
+    max-width: 620px;
+    margin: 0 auto;
+    padding: 16px;
+    border: 1px solid lightgray;
+    border-radius: 16px;
 }
 .card p:last-child {
+    margin-bottom: 0;
+}
+canvas {
+    display: block;
+    margin: 0 auto;
+    background-color: black;
 }