[object Object]

← back to Graphics Agentabrams

graphics.aa: unwrap Qwen3 canvas to standalone (strip Model Arena header for uniform gallery look)

35c603576501e10d6b7655647284b2b0a6d85a3b · 2026-07-24 23:44:06 -0700 · Steve Abrams

Files touched

Diff

commit 35c603576501e10d6b7655647284b2b0a6d85a3b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Jul 24 23:44:06 2026 -0700

    graphics.aa: unwrap Qwen3 canvas to standalone (strip Model Arena header for uniform gallery look)
---
 .../GenerativeArtCanvasQwen.aa                     | 65 ++++++++++------------
 graphics/generative-art-canvas-qwen/index.html     | 65 ++++++++++------------
 2 files changed, 56 insertions(+), 74 deletions(-)

diff --git a/graphics/generative-art-canvas-qwen/GenerativeArtCanvasQwen.aa b/graphics/generative-art-canvas-qwen/GenerativeArtCanvasQwen.aa
index 73e5581..01c121a 100644
--- a/graphics/generative-art-canvas-qwen/GenerativeArtCanvasQwen.aa
+++ b/graphics/generative-art-canvas-qwen/GenerativeArtCanvasQwen.aa
@@ -1,17 +1,9 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Generative Art Canvas — built by Qwen3 14B · Model Arena</title>
-<style>*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6ecf2;font:14px/1.5 ui-monospace,Menlo,monospace}
-header{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #1c2430;background:#0e1116}
-header .k{color:#7cf;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;white-space:nowrap}
-header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-size:12px;margin-left:auto;white-space:nowrap}
-.wrap{height:calc(100% - 51px)}iframe{width:100%;height:100%;border:0;background:#000;display:block}</style></head><body>
-<header><span class="k">⚔ Model Arena</span><h1>Generative Art Canvas</h1><span class="by">built by <b>Qwen3 14B</b></span></header>
-<div class="wrap"><iframe sandbox="allow-scripts allow-pointer-lock" srcdoc="&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset=&quot;UTF-8&quot;&gt;
-  &lt;title&gt;Flow Field Art&lt;/title&gt;
-  &lt;style&gt;
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Flow Field Art</title>
+  <style>
     html, body {
       margin: 0;
       padding: 0;
@@ -44,15 +36,15 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     button:hover {
       background: #666;
     }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div id=&quot;controls&quot;&gt;
-    &lt;button onclick=&quot;resetField()&quot;&gt;New Field&lt;/button&gt;
-    &lt;button onclick=&quot;saveCanvas()&quot;&gt;Save as PNG&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
-  &lt;script&gt;
+  </style>
+</head>
+<body>
+  <div id="controls">
+    <button onclick="resetField()">New Field</button>
+    <button onclick="saveCanvas()">Save as PNG</button>
+  </div>
+  <canvas id="canvas"></canvas>
+  <script>
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
     let width, height;
@@ -69,14 +61,14 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     function resetField() {
       palette = generatePalette();
       particles = [];
-      for (let i = 0; i &lt; 1000; i++) {
+      for (let i = 0; i < 1000; i++) {
         particles.push(new Particle());
       }
     }
 
     function generatePalette() {
       const hues = [];
-      for (let i = 0; i &lt; 10; i++) {
+      for (let i = 0; i < 10; i++) {
         hues.push(Math.random() * 360);
       }
       return hues;
@@ -133,7 +125,7 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
       this.x += this.vx;
       this.y += this.vy;
       this.alpha -= 0.005;
-      if (this.alpha &lt;= 0) {
+      if (this.alpha <= 0) {
         this.x = Math.random() * width;
         this.y = Math.random() * height;
         this.alpha = 1;
@@ -154,14 +146,14 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
         r = g = b = l;
       } else {
         const hue2rgb = function (p, q, t) {
-          if (t &lt; 0) t += 1;
-          if (t &gt; 1) t -= 1;
-          if (t &lt; 1/6) return p + (q - p) * 6 * t;
-          if (t &lt; 1/2) return q;
-          if (t &lt; 2/3) return p + (q - p) * (2/3 - t) * 6;
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
           return p;
         };
-        const q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
         const p = 2 * l - q;
         r = hue2rgb(p, q, h + 1/3);
         g = hue2rgb(p, q, h);
@@ -173,7 +165,7 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     function draw() {
       ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
       ctx.fillRect(0, 0, width, height);
-      for (let i = 0; i &lt; particles.length; i++) {
+      for (let i = 0; i < particles.length; i++) {
         particles[i].update();
         particles[i].draw(ctx);
       }
@@ -189,7 +181,6 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
       link.href = canvas.toDataURL();
       link.click();
     }
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;" title="Generative Art Canvas"></iframe></div>
-</body></html>
\ No newline at end of file
+  </script>
+</body>
+</html>
diff --git a/graphics/generative-art-canvas-qwen/index.html b/graphics/generative-art-canvas-qwen/index.html
index 73e5581..01c121a 100644
--- a/graphics/generative-art-canvas-qwen/index.html
+++ b/graphics/generative-art-canvas-qwen/index.html
@@ -1,17 +1,9 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Generative Art Canvas — built by Qwen3 14B · Model Arena</title>
-<style>*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6ecf2;font:14px/1.5 ui-monospace,Menlo,monospace}
-header{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #1c2430;background:#0e1116}
-header .k{color:#7cf;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;white-space:nowrap}
-header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-size:12px;margin-left:auto;white-space:nowrap}
-.wrap{height:calc(100% - 51px)}iframe{width:100%;height:100%;border:0;background:#000;display:block}</style></head><body>
-<header><span class="k">⚔ Model Arena</span><h1>Generative Art Canvas</h1><span class="by">built by <b>Qwen3 14B</b></span></header>
-<div class="wrap"><iframe sandbox="allow-scripts allow-pointer-lock" srcdoc="&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset=&quot;UTF-8&quot;&gt;
-  &lt;title&gt;Flow Field Art&lt;/title&gt;
-  &lt;style&gt;
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Flow Field Art</title>
+  <style>
     html, body {
       margin: 0;
       padding: 0;
@@ -44,15 +36,15 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     button:hover {
       background: #666;
     }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div id=&quot;controls&quot;&gt;
-    &lt;button onclick=&quot;resetField()&quot;&gt;New Field&lt;/button&gt;
-    &lt;button onclick=&quot;saveCanvas()&quot;&gt;Save as PNG&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
-  &lt;script&gt;
+  </style>
+</head>
+<body>
+  <div id="controls">
+    <button onclick="resetField()">New Field</button>
+    <button onclick="saveCanvas()">Save as PNG</button>
+  </div>
+  <canvas id="canvas"></canvas>
+  <script>
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
     let width, height;
@@ -69,14 +61,14 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     function resetField() {
       palette = generatePalette();
       particles = [];
-      for (let i = 0; i &lt; 1000; i++) {
+      for (let i = 0; i < 1000; i++) {
         particles.push(new Particle());
       }
     }
 
     function generatePalette() {
       const hues = [];
-      for (let i = 0; i &lt; 10; i++) {
+      for (let i = 0; i < 10; i++) {
         hues.push(Math.random() * 360);
       }
       return hues;
@@ -133,7 +125,7 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
       this.x += this.vx;
       this.y += this.vy;
       this.alpha -= 0.005;
-      if (this.alpha &lt;= 0) {
+      if (this.alpha <= 0) {
         this.x = Math.random() * width;
         this.y = Math.random() * height;
         this.alpha = 1;
@@ -154,14 +146,14 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
         r = g = b = l;
       } else {
         const hue2rgb = function (p, q, t) {
-          if (t &lt; 0) t += 1;
-          if (t &gt; 1) t -= 1;
-          if (t &lt; 1/6) return p + (q - p) * 6 * t;
-          if (t &lt; 1/2) return q;
-          if (t &lt; 2/3) return p + (q - p) * (2/3 - t) * 6;
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
           return p;
         };
-        const q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
         const p = 2 * l - q;
         r = hue2rgb(p, q, h + 1/3);
         g = hue2rgb(p, q, h);
@@ -173,7 +165,7 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
     function draw() {
       ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
       ctx.fillRect(0, 0, width, height);
-      for (let i = 0; i &lt; particles.length; i++) {
+      for (let i = 0; i < particles.length; i++) {
         particles[i].update();
         particles[i].draw(ctx);
       }
@@ -189,7 +181,6 @@ header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-
       link.href = canvas.toDataURL();
       link.click();
     }
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;" title="Generative Art Canvas"></iframe></div>
-</body></html>
\ No newline at end of file
+  </script>
+</body>
+</html>

← fe6f36c graphics.aa: add Qwen3-14B Generative Art Canvas (Model Aren  ·  back to Graphics Agentabrams  ·  (newest)