← Back to selected workCase 05 / 06
Creative Technology

A photograph.A thread at a time.

A web application that turns a photo into a thread-art pattern and guides the user through assembly with voice instructions, adjustable speed and optional background sounds.

JavaScriptCanvas APIWeb Speech APIHTML / CSS
Photo processingThread patternGuided assembly
Original photographGenerated thread-art patternFrom photo to thread pattern
Practical outcome
A thread pattern with step-by-step assembly guidance.
Built as
Browser-based creative application
Focus
Image processing & guided assembly
Workflow

From a photo to thread art

Image preparation and step-by-step guidance are combined in a single browser constructor.

01 · Prepare

Choose a photo and one of four filters. Facial feature detection helps preserve detail in portraits.

02 · Generate

Create a pattern for a circular board with 200 or 240 pins.

03 · Assemble

Follow the thread sequence at a comfortable speed, with voice guidance and optional relaxing sounds.

Interactive demo

Compare the photo and pattern

Drag the divider or use the arrow keys to compare the original image with the generated thread-art result.

Processing comparison

The original photo on the left and the thread-art pattern on the right.

Drag to compare
Generated thread-art pattern
Original photograph
Original photoThread-art pattern
Constructor

A guided creative process

The constructor brings image processing and assembly controls together in one interface.

Thread art constructor interface
Thread art constructor
Capabilities

Designed for comfortable assembly

Controls help users prepare the image and follow the pattern at their own pace.

01

Facial feature detection

Identifies facial areas in the photo to retain more portrait detail.

02

Four image filters

Different processing options for different types of photographs.

03

Voice guidance

Spoken instructions inside the constructor help users follow the assembly sequence.

04

Two circular board formats

Supports circular boards with 200 and 240 pins.

05

Adjustable assembly speed

Change the pace of thread instructions to suit your comfort level.

06

Relaxing background sounds

Optional audio creates a calm atmosphere during assembly.

Technology

Inside the constructor

Browser-based image processing and voice guidance support the creative workflow.

Technical details
  • Facial feature detection algorithm
  • Image filters for different types of photographs
  • Interactive constructor with adjustable assembly controls
  • Canvas API for image processing and rendering
  • Web Speech API for voice guidance
  • Responsive browser interface

Full workflow demonstration

Request a video demonstration →

Have a creative tool in mind?

I build custom web applications for creative and production workflows.