|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"><head><meta charset="utf-8"> |
| 3 | +<title>PLOTFLOW · Specimen direction</title> |
| 4 | +<style> |
| 5 | + :root{ |
| 6 | + --paper:#f4f1e8; --ink:#1c1d17; --dim:#7d7f74; --line:#dcd7c8; --red:#c93b22; |
| 7 | + --sans:'Archivo','Liberation Sans',Arial,sans-serif; |
| 8 | + --mono:'Liberation Mono',monospace; |
| 9 | + } |
| 10 | + *{margin:0;padding:0;box-sizing:border-box} |
| 11 | + body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400; |
| 12 | + font-size:14px;line-height:1.65} |
| 13 | + a{color:inherit} |
| 14 | + /* header — one quiet line */ |
| 15 | + header{display:flex;justify-content:space-between;align-items:baseline; |
| 16 | + padding:22px 48px;border-bottom:1px solid var(--line)} |
| 17 | + .brand{font-weight:700;font-size:14px;letter-spacing:.02em} |
| 18 | + .brand i{color:var(--red);font-style:normal} |
| 19 | + header nav{display:flex;gap:26px;font-size:12.5px;color:var(--dim)} |
| 20 | + header nav a{text-decoration:none} |
| 21 | + header nav a:hover{color:var(--ink)} |
| 22 | + /* intro — declarative, no pitch */ |
| 23 | + .intro{max-width:1200px;margin:0 auto;padding:72px 48px 56px; |
| 24 | + display:grid;grid-template-columns:minmax(320px,460px) 1fr;gap:72px} |
| 25 | + .intro h1{font-weight:400;font-size:21px;line-height:1.55;letter-spacing:0} |
| 26 | + .intro .facts{margin-top:26px;font-family:var(--mono);font-size:11px;line-height:2.1;color:var(--dim)} |
| 27 | + .intro .facts b{color:var(--ink);font-weight:400} |
| 28 | + /* measured drawing — dimension lines like an engineering sheet */ |
| 29 | + .measure{position:relative;padding:10px 64px 54px 10px} |
| 30 | + .measure svg.art path{fill:none;stroke:var(--ink);stroke-width:1.1} |
| 31 | + .dim{position:absolute;font-family:var(--mono);font-size:10px;color:var(--dim)} |
| 32 | + .dim.h{left:10px;right:74px;bottom:26px;border-bottom:1px solid var(--dim);text-align:center;padding-bottom:3px} |
| 33 | + .dim.h::before,.dim.h::after{content:'';position:absolute;bottom:-4px;width:1px;height:9px;background:var(--dim)} |
| 34 | + .dim.h::before{left:0}.dim.h::after{right:0} |
| 35 | + .dim.v{top:10px;bottom:64px;right:38px;border-right:1px solid var(--dim); |
| 36 | + writing-mode:vertical-rl;text-align:center;padding-right:4px} |
| 37 | + .dim.v::before,.dim.v::after{content:'';position:absolute;right:-5px;height:1px;width:9px;background:var(--dim)} |
| 38 | + .dim.v::before{top:0}.dim.v::after{bottom:0} |
| 39 | + /* record table */ |
| 40 | + .records{max-width:1200px;margin:0 auto;padding:0 48px 80px} |
| 41 | + .records h2{font-weight:400;font-size:13px;color:var(--dim);border-bottom:1px solid var(--ink); |
| 42 | + padding-bottom:8px;margin-bottom:0} |
| 43 | + table{width:100%;border-collapse:collapse;font-size:13px} |
| 44 | + th{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dim);text-align:left; |
| 45 | + padding:12px 14px 8px 0;border-bottom:1px solid var(--line);letter-spacing:.06em} |
| 46 | + td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);vertical-align:middle} |
| 47 | + td.num,th.num{font-family:var(--mono);font-size:11.5px;text-align:right;padding-right:22px} |
| 48 | + td .th{width:56px;height:64px} |
| 49 | + td .th path{fill:none;stroke:var(--ink);stroke-width:2.4} |
| 50 | + td .name{font-weight:700} |
| 51 | + td .jp{color:var(--dim);font-size:12px;margin-left:8px;font-weight:400} |
| 52 | + td .code{font-family:var(--mono);font-size:10.5px;color:var(--dim)} |
| 53 | + td .st{font-family:var(--mono);font-size:10px;color:var(--dim)} |
| 54 | + td .st.open{color:var(--red)} |
| 55 | + tr:hover td{background:rgba(28,29,23,.025)} |
| 56 | + .foot-note{max-width:1200px;margin:0 auto;padding:0 48px 40px; |
| 57 | + font-size:12px;color:var(--dim);line-height:1.8;max-width:1200px} |
| 58 | + .foot-note p{max-width:560px;margin-bottom:10px} |
| 59 | + .foot-note sup{color:var(--red)} |
| 60 | + footer{border-top:1px solid var(--line);padding:22px 48px;display:flex; |
| 61 | + justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim)} |
| 62 | +</style></head> |
| 63 | +<body> |
| 64 | + <header> |
| 65 | + <span class="brand">PLOTFLOW<i>*</i></span> |
| 66 | + <nav><a href="#">Editions</a><a href="#">Method</a><a href="#">Notes</a><a href="#">Cart — 0</a></nav> |
| 67 | + </header> |
| 68 | + |
| 69 | + <section class="intro"> |
| 70 | + <div> |
| 71 | + <h1>Pen-plotted drawings of Universal-Century mobile suits. Each drawing is executed |
| 72 | + by an AxiDraw plotter in pigment ink on Strathmore Bristol, then inspected, signed, |
| 73 | + and numbered. Editions are limited to 25.</h1> |
| 74 | + <div class="facts" id="facts"></div> |
| 75 | + </div> |
| 76 | + <div class="measure" id="measure"></div> |
| 77 | + </section> |
| 78 | + |
| 79 | + <section class="records"> |
| 80 | + <h2>Records — current editions</h2> |
| 81 | + <table id="tbl"> |
| 82 | + <thead><tr> |
| 83 | + <th style="width:70px"></th><th>Designation</th> |
| 84 | + <th class="num">Ink</th><th class="num">Strokes</th><th class="num">Plot time</th> |
| 85 | + <th class="num">Sheet</th><th>Status</th> |
| 86 | + </tr></thead> |
| 87 | + <tbody></tbody> |
| 88 | + </table> |
| 89 | + </section> |
| 90 | + |
| 91 | + <div class="foot-note"> |
| 92 | + <p><sup>1</sup> Plot time is measured, not estimated: pen-down travel at 1100 mm/min, |
| 93 | + pen-up travel at 6600 mm/min, and 0.10 s per pen lift.</p> |
| 94 | + <p><sup>2</sup> Ink flow varies with temperature, humidity, and feed rate. Copies within |
| 95 | + an edition differ accordingly. This is a property of the medium and is not corrected.</p> |
| 96 | + <p><sup>3</sup> To be notified when an edition is released or restocked, leave an email |
| 97 | + address on the notes page. Nothing else is sent.</p> |
| 98 | + </div> |
| 99 | + |
| 100 | + <footer> |
| 101 | + <span>PLOTFLOW · プロットフロー · est. 2026</span> |
| 102 | + <span>machine-drawn · signed & numbered · plotted in the U.S.A.</span> |
| 103 | + </footer> |
| 104 | + |
| 105 | +<script src="/data/editions.js"></script> |
| 106 | +<script> |
| 107 | + const S = window.PLOTFLOW.suits, ORDER = window.PLOTFLOW.shopOrder; |
| 108 | + function stats(s){ |
| 109 | + const re=/([ML])\s*(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g; |
| 110 | + let m,px=null,py=null,draw=0,travel=0,lifts=0,verts=0; |
| 111 | + let minx=1e9,miny=1e9,maxx=-1e9,maxy=-1e9; |
| 112 | + while((m=re.exec(s.d))!==null){ |
| 113 | + const x=+m[2],y=+m[3]; verts++; |
| 114 | + if(x<minx)minx=x; if(x>maxx)maxx=x; if(y<miny)miny=y; if(y>maxy)maxy=y; |
| 115 | + if(m[1]==='M'){ if(px!==null){travel+=Math.hypot(x-px,y-py);lifts++;} } |
| 116 | + else if(px!==null){ draw+=Math.hypot(x-px,y-py); } |
| 117 | + px=x;py=y; |
| 118 | + } |
| 119 | + const mm=420/Math.max(maxx-minx,maxy-miny); |
| 120 | + const min=(draw*mm)/1100+(travel*mm)/6600+lifts*0.10/60; |
| 121 | + return {ink:(draw*mm/1000), min, strokes:lifts+1, verts, |
| 122 | + bb:[minx,miny,maxx-minx,maxy-miny], wmm:(maxx-minx)*mm, hmm:(maxy-miny)*mm}; |
| 123 | + } |
| 124 | + function fmt(min){const s2=Math.round(min*60);return Math.floor(s2/60)+':'+String(s2%60).padStart(2,'0');} |
| 125 | + |
| 126 | + // measured hero — Zaku with dimension lines |
| 127 | + const z=S['zaku'], zs=stats(z), pad=zs.bb[2]*0.03; |
| 128 | + document.getElementById('measure').innerHTML = |
| 129 | + `<svg class="art" viewBox="${zs.bb[0]-pad} ${zs.bb[1]-pad} ${zs.bb[2]+2*pad} ${zs.bb[3]+2*pad}" |
| 130 | + preserveAspectRatio="xMidYMid meet" style="width:100%;max-height:520px"> |
| 131 | + <path d="${z.d}"/></svg> |
| 132 | + <span class="dim h">${zs.wmm.toFixed(0)} mm</span> |
| 133 | + <span class="dim v">${zs.hmm.toFixed(0)} mm</span>`; |
| 134 | + document.getElementById('facts').innerHTML = |
| 135 | + `shown <b>${z.code} ${z.name} · ${z.jp}</b><br>` + |
| 136 | + `ink <b>${zs.ink.toFixed(1)} m</b> over <b>${zs.strokes.toLocaleString()}</b> strokes<br>` + |
| 137 | + `plot <b>${fmt(zs.min)}</b> at 1100 mm/min<sup>1</sup><br>` + |
| 138 | + `pen Staedtler Triplus 0.3 mm, pigment<br>` + |
| 139 | + `paper Strathmore Bristol 300, 11×14 in`; |
| 140 | + |
| 141 | + // records table |
| 142 | + document.querySelector('#tbl tbody').innerHTML = ORDER.map(k=>{ |
| 143 | + const s=S[k], t=stats(s), p2=t.bb[2]*0.05; |
| 144 | + const ed=s.edition.split('·')[0].trim().replace('ED. ',''); |
| 145 | + return `<tr> |
| 146 | + <td><svg class="th" viewBox="${t.bb[0]-p2} ${t.bb[1]-p2} ${t.bb[2]+2*p2} ${t.bb[3]+2*p2}" |
| 147 | + preserveAspectRatio="xMidYMid meet"><path d="${s.d}"/></svg></td> |
| 148 | + <td><span class="name">${s.name}</span><span class="jp">${s.jp}</span><br> |
| 149 | + <span class="code">${s.code}</span></td> |
| 150 | + <td class="num">${t.ink.toFixed(1)} m</td> |
| 151 | + <td class="num">${t.strokes.toLocaleString()}</td> |
| 152 | + <td class="num">${fmt(t.min)}</td> |
| 153 | + <td class="num">11×14</td> |
| 154 | + <td><span class="st open">${ed} · available</span></td> |
| 155 | + </tr>`; |
| 156 | + }).join(''); |
| 157 | +</script> |
| 158 | +</body></html> |
0 commit comments