A real QR code, drawn as a living maze.

People wander the corridors, a monster hunts them, a forest grows round it by day and a city by night, and it is built to stay readable while it moves. Type anything and scan.

Docs

One script, one function. No server, no dependencies, no build step.

1. Add one scriptmazeqr.min.js from jsDelivr (below), npm (npm i @phoseinq/mazeqr) or the latest release.
2. Stay on 1.x@1 always gets the latest 1.x; a breaking 2.0 never arrives on its own.
3. DrawrenderArtisticQr(text, size) returns a live canvas.

On a web page

<div id="qr"></div>
<script src="https://cdn.jsdelivr.net/npm/@phoseinq/mazeqr@1/dist/mazeqr.min.js"></script>
<script>
  var canvas = renderArtisticQr("https://example.com/", 1000);
  canvas.style.width = "100%";
  document.getElementById("qr").appendChild(canvas);
</script>

With npm (Vite, webpack…)

TypeScript types are included.

npm install @phoseinq/mazeqr

import { renderArtisticQr, mazeCheer } from "@phoseinq/mazeqr";

const canvas = renderArtisticQr("https://example.com/", 1000);
document.getElementById("qr").appendChild(canvas);

Day and night

Leave night out and the maze follows <html data-theme="dark">, cross-fading when it changes:

document.documentElement.setAttribute("data-theme", "dark");   // the maze turns to night by itself

A still image (PNG)

var still = renderArtisticQr("https://example.com/", 1200, {still: true, night: false});
var png = still.toDataURL("image/png");

The "copied" reaction

navigator.clipboard.writeText(url).then(function () { mazeCheer(url); });

۱. یک اسکریپت اضافه کنیدmazeqr.min.js را از jsDelivr (پایین)، npm (npm i @phoseinq/mazeqr) یا آخرین Release بردارید.
۲. روی 1.x بمانید@1 همیشه آخرین نسخه‌ی 1.x را می‌گیرد؛ نسخه‌ی 2 که ممکن است ناسازگار باشد هیچ‌وقت خودکار نمی‌آید.
۳. بکشیدrenderArtisticQr(text, size) یک canvas زنده برمی‌گرداند.

روی یک صفحه‌ی وب

<div id="qr"></div>
<script src="https://cdn.jsdelivr.net/npm/@phoseinq/mazeqr@1/dist/mazeqr.min.js"></script>
<script>
  var canvas = renderArtisticQr("https://example.com/", 1000);
  canvas.style.width = "100%";
  document.getElementById("qr").appendChild(canvas);
</script>

با npm (مثل Vite یا webpack)

تایپ‌های TypeScript هم همراهش هست.

npm install @phoseinq/mazeqr

import { renderArtisticQr, mazeCheer } from "@phoseinq/mazeqr";

const canvas = renderArtisticQr("https://example.com/", 1000);
document.getElementById("qr").appendChild(canvas);

روز و شب

اگر night را ندهید، هزارتو از <html data-theme="dark"> پیروی می‌کند و وقتی عوض شود، آرام به شب می‌رود:

document.documentElement.setAttribute("data-theme", "dark");   // the maze turns to night by itself

یک تصویر ثابت (PNG)

var still = renderArtisticQr("https://example.com/", 1200, {still: true, night: false});
var png = still.toDataURL("image/png");

واکنش «کپی شد»

navigator.clipboard.writeText(url).then(function () { mazeCheer(url); });

`renderArtisticQr(text, size, options)`

Returns a <canvas> of size × size pixels, or null if the text is too long for a QR code.

Option	Default	What it does
`night`	follows the page	`true` / `false` fixes the theme; leave it out to follow `data-theme`.
`still`	`false`	Draw one frame and stop.
`motion`	`false`	Animate even when the system asks for reduced motion.
`fps`	`30`	Frame rate of the animation.
`time`	—	Start the simulation this many seconds in (repeatable stills).
`characters` / `props`	`true`	`false` removes the people / the trees and benches.
`thumb` + `lens`	—	A small live view that follows the monster: `{thumb: true, lens: {mods: 13, size: 132}}`.
`debug`	—	`{showReservedModules, showSafeCores, showConnectivity, showModuleGrid, hideArtwork}`

Other functions

`mazeCheer(text)`	Plays the reaction: people jump, cars crash or pirates fight.
`canvas.__stop()` / `__start()`	Pause and resume the animation.
`verifyCores(canvas)`	Checks that every module's centre is within its bit's tone: `{bad, worst}`.
`MAZE`	All tunables: error correction, quiet zone, colours, people count, speeds…

`renderArtisticQr(text, size, options)`

یک <canvas> به اندازه‌ی size × size پیکسل برمی‌گرداند، یا اگر متن برای یک کد QR خیلی طولانی باشد null.

گزینه	پیش‌فرض	کارکرد
`night`	از صفحه پیروی می‌کند	`true` / `false` تم را ثابت می‌کند؛ اگر ندهید از `data-theme` پیروی می‌کند.
`still`	`false`	یک فریم می‌کشد و متوقف می‌شود.
`motion`	`false`	حتی وقتی سیستم «کاهش حرکت» خواسته، انیمیشن را اجرا می‌کند.
`fps`	`30`	نرخ فریم انیمیشن.
`time`	—	شبیه‌سازی را از این ثانیه شروع می‌کند (برای تصویر ثابتِ تکرارپذیر).
`characters` / `props`	`true`	با `false` آدم‌ها / درخت‌ها و نیمکت‌ها حذف می‌شوند.
`thumb` + `lens`	—	یک نمای کوچک زنده که دنبال هیولا می‌رود: `{thumb: true, lens: {mods: 13, size: 132}}`.
`debug`	—	`{showReservedModules, showSafeCores, showConnectivity, showModuleGrid, hideArtwork}`

توابع دیگر

`mazeCheer(text)`	واکنش را اجرا می‌کند: آدم‌ها می‌پرند، ماشین‌ها تصادف می‌کنند یا دزدان دریایی می‌جنگند.
`canvas.__stop()` / `__start()`	توقف و ادامه‌ی انیمیشن.
`verifyCores(canvas)`	بررسی می‌کند مرکز هر ماژول در محدوده‌ی رنگ بیتش باشد: `{bad, worst}`.
`MAZE`	همه‌ی تنظیمات: تصحیح خطا، حاشیه‌ی خالی، رنگ‌ها، تعداد آدم‌ها، سرعت‌ها…

The bits come from qrcode-generator; the drawing never decides them. The art is a skin over a valid code:

Dark modules become hedges, light ones become paths, so the maze is the code.
Finder, timing, alignment, format and version modules are drawn whole and high-contrast; nothing walks over them.
Safe cores: after every frame, the centre of each module the animation touched is clamped back to its bit's tone (dark ≤ 0.16, light ≥ 0.91 luminance). A figure crossing a module shows as a tint, never a flipped bit.
The quiet zone stays clear; the scenery begins beyond it.

Every push is tested with three decoders (ZXing, ZBar, quirc) on plain, degraded and camera-like images, and the crowd's behaviour is simulated for regressions.

بیت‌ها از qrcode-generator می‌آیند و نقاشی هیچ‌وقت آن‌ها را تعیین نمی‌کند. نقاشی پوسته‌ای روی یک کد معتبر است:

ماژول‌های تیره پرچین و روشن‌ها مسیر می‌شوند؛ پس هزارتو خودِ کد است.
مربع‌های بزرگ، خطوط زمان‌بندی، بیت‌های فرمت و نسخه کامل و پرکنتراست کشیده می‌شوند و هیچ‌چیز از رویشان رد نمی‌شود.
هسته‌ی امن: بعد از هر فریم، مرکز هر ماژولی که انیمیشن به آن دست زده به رنگ بیتش برمی‌گردد (روشنایی تیره حداکثر 0.16 و روشن دست‌کم 0.91). آدمکی که از روی ماژول رد می‌شود فقط رنگش را کمی عوض می‌کند، نه مقدارش را.
حاشیه‌ی خالی دور کد دست‌نخورده می‌ماند و منظره بعد از آن شروع می‌شود.

هر push با سه دیکودر (ZXing، ZBar و quirc) روی تصاویر عادی، خراب‌شده و شبیه دوربین تست می‌شود و رفتار جمعیت هم شبیه‌سازی و بررسی می‌شود.

Size. The art needs about 12 screen pixels per module. Smaller, it simplifies; below 5 it falls back to a plain code. Longer text makes a bigger code, which needs a bigger canvas.
Screens first. For print, export a still PNG at high resolution and test it with a phone before printing.
Always dark on light. Even at night the code keeps dark modules on light paths: inverted codes read badly on many phones.
CPU. A live canvas redraws at 30 fps. Lower fps, call __stop() when it is off screen, or use still for many codes on one page.
Decoders differ. On the test set ZXing reads 99.3%; on the harshest test images ZBar and quirc drop to about 90–93%. These are synthetic distortions, not a field test with phone cameras.

اندازه. آرت کامل برای هر ماژول حدود 12 پیکسل صفحه لازم دارد. کوچک‌تر که شود ساده‌تر می‌شود و زیر 5 پیکسل به یک کد ساده برمی‌گردد. متن بلندتر کد بزرگ‌تری می‌سازد که canvas بزرگ‌تری می‌خواهد.
اول برای صفحه‌نمایش. برای چاپ، یک PNG ثابت با کیفیت بالا بگیرید و قبل از چاپ با گوشی تستش کنید.
همیشه تیره روی روشن. حتی شب، کد ماژول‌های تیره را روی مسیر روشن نگه می‌دارد؛ کدهای برعکس روی خیلی از گوشی‌ها بد خوانده می‌شوند.
پردازنده. هر canvas زنده 30 بار در ثانیه دوباره کشیده می‌شود. fps را کم کنید، وقتی دیده نمی‌شود __stop() را صدا بزنید یا برای چند کد در یک صفحه از still استفاده کنید.
دیکودرها فرق دارند. روی مجموعه‌ی تست، ZXing 99.3% را می‌خواند؛ روی سخت‌ترین تصاویر تست، ZBar و quirc به حدود 90 تا 93% می‌رسند. این‌ها اختلالات مصنوعی‌اند، نه آزمایش میدانی با دوربین گوشی.