Cryptographics

Aug 2013

Cryptoquilt: quilts, prints and t-shirts that turn anything holding an image into something that also holds hidden data

Photograph: Stef Lewandowski

When: Aug 2013
Stack: JavaScript, Ruby, Padrino, Heroku

Cryptographic quilts, prints, t-shirts - turn anything that can hold an image into something that can also hold hidden data. Stef calls it the Cryptoquilt; Cryptographics was its hack-day name.

Stef's own story: when the Financial Times photographed him, he wore a t-shirt with his own credit card details encrypted into it.

Pictures

2013
2013
Stef Lewandowski
Stef Lewandowski
Stef Lewandowski
Stef Lewandowski
Stef Lewandowski

source on GitHub

Around the same time

Higher resolutionsWriting · 2013
In conversation: Max Fraser, Stef Lewandowski and Christopher RaeburnSpeaking · 2013
Hackathon and on and onWriting · 2013
East Dulwich ForumProjects · 2013

Earlier in data art: Data Necklace. Later in data art: Gesture-controlled viewer for Andrew Lamb's Lenticular Changing Colour Ring.

/* No script, no button and no pill: the header sits in the page as the plain bar, every room in the row, and the body keeps its own top padding. */ /* grouped: the same idea, and why this block now names two layouts. Its rooms sit behind the More button, so with no script to open it they have to be a plain second line instead. float needs no equivalent — its bar renders every room already, and its rules below hide .site-more outright. */ :root[data-fx-nav-layout="grouped"] .site-more-button { display: none; } :root[data-fx-nav-layout="grouped"] .site-more .site-more-list { display: flex; position: static; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } :root[data-fx-nav-layout="float"] header.site-header { position: static; width: auto; height: auto; margin: 0 0 2.5rem; padding: 0; flex-wrap: wrap; align-items: baseline; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-fx-nav-layout="float"] body.py-8 { padding-top: 2rem; } :root[data-fx-nav-layout="float"] .site-header .site-nav { flex-wrap: wrap; } :root[data-fx-nav-layout="float"] .site-header .site-nav > a { display: inline; } :root[data-fx-nav-layout="float"] .site-more { display: none; } :root[data-fx-nav-layout="float"] .site-header .site-title, :root[data-fx-nav-layout="float"] .site-header .site-title:has(> span) { max-width: none; opacity: 1; margin-right: 0; visibility: visible; }