Paint Your Own
Scannable Art

A guide to Artcodes for painters, sketchers & makers

What if a painting on your wall could link to a website, a video, or a secret message — and still look like a proper piece of art? That's Artcodes.

1 What Are Artcodes?

Artcodes are hand-drawn, scannable markers — like QR codes, but beautiful. Developed at the University of Nottingham's Mixed Reality Lab, they let you embed a hidden code inside any drawing, pattern, or painting. When scanned with the free Artcodes app, the artwork triggers a link — to a webpage, a video, a gallery, whatever you want.

Unlike a QR code's ugly grid of squares, an Artcode can look like a butterfly, a flower, a landscape, an abstract composition — anything you can draw. The code is invisible to the casual viewer but readable by the app's camera.

2 Three Building Blocks

Every Artcode is built from just three elements:

Artcode example showing a bird drawing with boundary, regions and blobs labelled

From the original Artcodes tutorials — boundary, regions and blobs in action. This bird is code 1:1:1:1:2 (5 regions, four with 1 blob and one with 2).

Boundary

The outer outline that connects everything together. Think of it as the "frame" of the code. All regions must be joined by the boundary.

Regions

Enclosed spaces within the boundary. Each region is a separate area. The number of regions becomes part of your code.

Blobs

Solid shapes that float freely inside a region — not touching the region's edge. The number of blobs in each region sets each digit of the code.

Boundary Region 1 Region 2 Code: 2:3
  • Boundary — the single outer outline joining all regions together.
  • Regions — enclosed spaces (here there are 2). The code has 2 digits.
  • Blobs — solid dots floating freely inside regions. Region 1 has 2 blobs, Region 2 has 3 blobs → code is 2:3

You can add as much decorative detail as you want to the boundary and outside it — embellishments, patterns, shading — as long as blobs stay floating and don't touch region edges.

3 The Golden Rules

Keep these in mind while you draw

  • All regions must connect — joined by a continuous boundary outline.
  • Blobs must float — solid shapes inside a region that don't touch the region's edge.
  • Anything touching an edge is decoration — detail attached to a region wall is "noise" and gets ignored by the scanner. Use this to your advantage!
  • Decorate freely outside the boundary — antennae, leaves, flourishes, background… go wild. It won't affect the code.
  • Use strong contrast — black on white works best. If painting in colour, keep boundary lines bold and blobs solid.
  • Codes are sorted ascending — 1:2:4 not 4:2:1. Plan your regions accordingly.

Common Mistakes to Avoid

  • Lines or blobs too close together — the scanner can merge them. Leave clear gaps.
  • Regions inside other regions — keep the hierarchy flat. Blobs can't be hollow either.
  • Lines too thin — bold, confident lines scan far better than spidery ones.

4 Draw Your First Artcode

Let's draw a simple butterfly with code 1:1:2:4:4 (five regions).

Completed butterfly Artcode drawn with black marker on paper

The finished butterfly — code 1:1:2:4:4. All you need is paper and a black marker.

1

Draw the body

A long oval in the centre — this is your first region. It will contain 1 blob.

2

Add the upper wings

Draw two large wing shapes connected to the body. These are regions 2 and 3. They'll hold 1 and 2 blobs respectively.

3

Add the lower wings

Two smaller wing shapes below, also connected. Regions 4 and 5 — each will hold 4 blobs.

4

Drop in your blobs

Place solid dots or shapes floating inside each region — 1, 1, 2, 4, 4. Don't let them touch the edges!

5

Decorate!

Add patterns, antennae, shading, colour — anything that touches the boundary is safe decoration. Make it your own.

6

Scan with the Artcodes app

Open the app, point your camera at the drawing, and watch it come alive. Link it to a webpage, your portfolio, or a hidden message.

5 Ideas for Painters

Artcodes aren't just for line drawings — they work in any medium. Here are some starting points:

🌸

Floral Still Life

Each flower head is a region, stamens are blobs. Viewers scan to see a time-lapse of the real flowers.

🏔️

Landscape

Fields, hills and clouds become regions. Rocks and birds become blobs. Link to the location on a map.

🎭

Portrait

Hide regions in clothing folds or hair. Blobs become buttons or jewellery. Scan to hear the subject's story.

🔮

Abstract

Geometric shapes and floating circles are already the language of Artcodes — abstract art is a natural fit.

🧱

Mural / Street Art

Paint a community wall with hidden codes that link to local history, stories, or event pages.

🎄

Seasonal Cards

Christmas cards, birthday cards — each one scannable with a personal video message.

6 For Developers

Artcodes is fully open source under the AGPL v3 licence. If you want to go beyond scanning and build Artcodes recognition into your own apps, the code is all on GitHub:

Android

Full scanner app and library. Add to your Gradle dependencies and you're away.

GitHub repo →

iOS

Native Swift scanner. Import the library and build AR experiences on iPhone and iPad.

GitHub repo →

Cordova Plugin

Cross-platform via HTML, CSS & JS. One plugin, both platforms. Ideal for web developers.

GitHub repo →

The libraries let you define "experiences" — mappings from codes to actions. Your app points the camera at a drawing, recognises the code, and triggers whatever you've linked it to. Think scavenger hunts, interactive exhibitions, or community storytelling walls.

Ready to Try?

Download the free Artcodes app, grab a marker pen, and start experimenting. The app lets you create "experiences" — mappings from your codes to any web content you like.

More info at the Horizon Digital Economy Research page and the University of Nottingham Mixed Reality Lab