plotflow.github.io/index.html at main · plotflow/plotflow.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Google tag (gtag.js) -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    ad_storage: 'denied', ad_user_data: 'denied',
    ad_personalization: 'denied', analytics_storage: 'denied'
  });
  gtag('js', new Date());
  gtag('config', 'G-1HJ4VQ4K1B');
</script>
<script src="scripts/consent.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PLOTFLOW* · Pen-plotter editions</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/console.css">
<meta name="description" content="PLOTFLOW is an independent pen-plotter studio. Machine-drawn studies and original commissioned pieces, in pigment ink on Bristol.">
<link rel="canonical" href="https://plotflow.io/">
<meta name="theme-color" content="#33362b">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="PLOTFLOW">
<meta property="og:title" content="PLOTFLOW* · Pen-plotter editions">
<meta property="og:description" content="PLOTFLOW is an independent pen-plotter studio. Machine-drawn studies and original commissioned pieces, in pigment ink on Bristol.">
<meta property="og:url" content="https://plotflow.io/">
<meta property="og:image" content="https://plotflow.io/assets/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="PLOTFLOW* · Pen-plotter editions">
<meta name="twitter:description" content="PLOTFLOW is an independent pen-plotter studio. Machine-drawn studies and original commissioned pieces, in pigment ink on Bristol.">
<meta name="twitter:image" content="https://plotflow.io/assets/og.png">
</head>
<body>

<!-- TOP BAR -->
<nav><div class="nav-in">
  <a href="/" class="brand">PLOTFLOW<i>*</i></a>
  <div class="nav-links"><a href="#shop">Studies</a><a href="#process">Process</a><a href="about.html">Studio</a></div>
  <a class="cart" href="commissions.html">Commission →</a>
</div></nav>

<!-- MASTHEAD -->
<header class="mast">
  <div class="wrap mast-in">
    <div>
      <div class="mast-label">STUDY ARCHIVE ｜<span class="jp">習作</span> · LIVE SIMULATION</div>
      <h1>Computational art,<br>drawn line by line</h1>
      <p class="mast-lede">A pen-plotter studio. Universal-Century studies are catalogued below and
      displayed, not sold. Original linework is taken on through commissions.</p>
    </div>
    <div class="mast-side">
      <img src="assets/logo-seal.svg" alt="" width="92" height="92">
      <span class="jp">ペンプロッター</span>
    </div>
  </div>
</header>

<!-- LIVE PLOT: the sheet, with its control strip beneath -->
<section class="plot" id="feature">
  <div class="plot-stage">
    <div class="bed-pick">
      <label for="suit">BED 01</label>
      <div class="selwrap"><select id="suit" aria-label="Design on the bed"></select></div>
    </div>
    <span class="pf-view">PROGRAM VIEW · DRAWN IN EXECUTION ORDER · INK 0.30 MM</span>
    <div class="bed" id="bed">
      <canvas id="pcanvas"></canvas>
      <svg id="stage" viewBox="0 0 1493 801" preserveAspectRatio="xMidYMid meet">
        <path id="ppath" d=""></path>
        <g id="pen" opacity="0">
          <circle id="pen-c" r="14" fill="none" stroke="#15140f" stroke-width="1.6" vector-effect="non-scaling-stroke"></circle>
          <path id="pen-x" d="" stroke="#15140f" stroke-width="1.6" vector-effect="non-scaling-stroke"></path>
        </g>
      </svg>
    </div>
    <img class="pf-seal" src="assets/logo-seal.svg" alt="" width="48" height="48">
  </div>

  <div class="plot-strip">
    <div class="pbar"><b id="pbar"></b></div>
    <button class="strip-btn" id="play">Pause</button>
    <button class="strip-btn" id="restart">Restart</button>
    <button class="strip-btn" id="skip">Skip ▸︎▸︎</button>
    <div class="seg" id="speed"><button data-s="0.5">0.5×</button><button data-s="1" class="on">1×</button><button data-s="2">2×</button><button data-s="4">4×</button></div>
    <span class="strip-note" id="simx"></span>
    <span class="strip-sp"></span>
    <span class="strip-live">● PLOTTING</span>
    <span class="strip-cap" id="capName">READY</span>
    <span class="strip-stat"><b><span id="pct">0</span>%</b></span>
    <span class="strip-stat">INK <b><span id="ink">0.00</span></b> / <span id="inktot">0.00</span> m</span>
    <span class="strip-stat tm"><b><span id="elapsed">00:00</span></b> / <span id="total">00:00</span></span>
    <span class="strip-stat pos">X <b id="cx">000</b> · Y <b id="cy">000</b> mm</span>
  </div>
</section>

<!-- MANIFESTO -->
<section class="mani">
  <div class="grain"></div>
  <div class="wrap mani-in">
    <div>
      <img class="mani-crest" src="assets/logo-crest.svg" alt="" width="96" height="96">
      <h2>The<br>machine<span class="star">.</span></h2><div class="jp">ペンプロッター</div>
    </div>
    <p>Each mobile suit is rebuilt as vector line work and drawn by an AxiDraw plotter in pigment ink on Strathmore Bristol. Ink flow varies with temperature, humidity, and feed rate, so no two copies are identical. Each sheet is inspected, signed, and numbered.</p>
  </div>
</section>

<!-- SHOP -->
<section class="shop" id="shop">
  <div class="grain"></div>
  <div class="wrap">
    <div class="shop-head">
      <h2>Studies<span class="star">*</span></h2><span class="jp">習作</span>
      <div class="meta tiny">Drawing studies of Universal-Century machines: fan works, displayed and not sold. Values are computed from each stroke program. Original work is drawn through commissions.</div>
    </div>
    <div class="plates" id="grid"></div>
  </div>
</section>

<!-- COMMISSIONS -->
<section id="commissions">
  <div class="wrap">
    <div class="comm-box">
      <img class="seal" src="assets/logo-seal.svg" alt="" width="52" height="52">
      <div>
        <div class="comm-label">COMMISSIONS ｜<span class="jp">特注制作</span></div>
        <h2>Original linework to your spec.</h2>
        <p>The studies above are fan works and are not sold. Commissioned work is original:
        a machine designed for the sheet, rebuilt as vector line work, and drawn by the
        plotter. One drawing, one owner. From $350 · 11×14″ · 0.3&nbsp;mm pigment on Strathmore Bristol.</p>
      </div>
      <a class="comm-cta" href="commissions.html">Request a slot</a>
    </div>
  </div>
</section>

<!-- PROCESS -->
<section class="proc" id="process">
  <div class="wrap">
    <div class="proc-grid">
      <div class="ps"><div class="n">01</div><div class="jp">ベクター化</div><h4>Vectorize</h4><p>The suit is rebuilt as a precise vector drawing. Every line mapped as a coordinate path for the plotter.</p></div>
      <div class="ps"><div class="n">02</div><div class="jp">作画</div><h4>Plot</h4><p>An AxiDraw traces the paths in Staedtler Triplus 0.3mm fineliner on Strathmore 300 Bristol, 11×14″.</p></div>
      <div class="ps"><div class="n">03</div><div class="jp">仕上げ</div><h4>Finish</h4><p>Each sheet is inspected, signed, and numbered by hand. No two sheets in an edition are identical.</p></div>
    </div>
  </div>
</section>

<!-- NEWSLETTER / DROP LIST -->
<section class="news" id="droplist">
  <div class="grain"></div>
  <div class="wrap news-in">
    <div class="news-copy">
      <h2>Join the droplist<span class="star">*</span></h2>
      <div class="jp">入荷通知</div>
      <p>New work is released irregularly. Leave an email address and you'll hear first when a sheet or a commission slot opens.</p>
    </div>
    <form class="news-form" id="newsForm" novalidate>
      <div class="news-row">
        <input type="email" id="newsEmail" placeholder="you@example.com" autocomplete="email" required aria-label="Email address">
        <button type="submit">Join</button>
      </div>
      <p class="news-msg tiny" id="newsMsg" role="status"></p>
    </form>
  </div>
</section>

<footer>
  <div class="grain"></div>
  <div class="wrap">
    <img class="foot-crest" src="assets/logo-crest.svg" alt="" width="56" height="56">
    <div class="foot-cols">
      <div class="fc"><h5>Shop*</h5><a href="#shop">All editions</a><a href="commissions.html">Commissions</a></div>
      <div class="fc"><h5>Studio*</h5><a href="#process">Process</a><a href="about.html">About</a><a href="contact.html">Contact</a></div>
      <div class="fc"><h5>Info*</h5><a href="shipping.html">Shipping</a><a href="returns.html">Returns</a><a href="faq.html">FAQ</a></div>
      <div class="fc"><h5>Elsewhere*</h5><a href="https://instagram.com/plotflow" target="_blank" rel="noopener">@plotflow</a><a href="#droplist">Droplist</a><span class="est">est. 2026</span></div>
    </div>
    <div class="foot-bot tiny"><span>© 2026 PLOTFLOW* · PLOTTED IN THE U.S.A.</span><span>AXIDRAW · PIGMENT INK · BRISTOL</span></div>
  </div>
</footer>

<!-- data first, then components -->
<script src="data/editions.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/shop.js"></script>
<script src="scripts/plotter.js"></script>
<script>
  // Rail caption: mirrors whichever study the plotter is drawing.
  (function () {
    var sel = document.getElementById('suit'), cap = document.getElementById('capName');
    if (!sel || !cap || !window.PLOTFLOW) return;
    var S = PLOTFLOW.suits;
    function draw() { var s = S[sel.value]; if (s) cap.textContent = s.code + ' · ' + s.name; }
    sel.addEventListener('change', draw);
    if (window.PlotflowPlotter) {
      var orig = PlotflowPlotter.load;
      PlotflowPlotter.load = function (k) { orig(k); draw(); };
    }
    draw();
  })();
</script>
<script src="scripts/newsletter.js"></script>
</body>
</html>