Translation Telephone

A creative exploration in design, technology, and language

Project Focus

Creative coding, visual design, language

Context

Brown|RISD Dual-Degree Capstone, RISD Independent Study

Tools

React, JavaScript

Overview

Translation Telephone allows you to pass a piece of writing or an image through a transformative computational chain alternating between picture and text. Each step uses a different way of representing the same information, so the message that comes out is never quite the one that went in.

I designed and built this tool as part of my Brown|RISD Dual-Degree capstone and RISD Independent Study. It is a browser tool: you choose a mode, watch the image form, and then read what another mode makes of that image.

Concept

The question underlying the project does not have a single answer:

What happens to information and meaning
when it passes through a different system of representation?

Initially inspired by my studies in French and my interest in translation, this project grew out of a curiosity about how meaning shifts as it moves between languages, mediums, and systems of representation. In linguistic translation, meaning is rarely transferred perfectly between languages; nuances, cultural context, and ambiguity can be reinterpreted or lost, while new meanings emerge. I wanted to explore these same dynamics beyond language, using computational and visual transformations to investigate what gets preserved, changed, added, or lost along the way.

The telephone game is the model. A message is repeated rather than delivered. Each repetition keeps something, drops something, and adds whatever the next person, or the next system, brings to the act of repeating. Translation Telephone does that with computation. A sentence becomes an arrangement of marks. Those marks become another kind of text. The next mode reads that text as if it were the original.

I am less interested in a faithful transfer of meaning than in the transformation. The piece is a way to notice what a system preserves, what it emphasizes, what it obscures, and what it has to invent in order to interpret.

A visual representing how meaning can change as it is passed from one representation to another. Across the four frames, the translation adds information, loses it, or moves what is left.

Translation Telephone extends this concept into an interactive system, allowing users to experiment with transformations between text and images.

How it works

The interface is a sequence you can keep extending endlessly.

  1. Select a mode. For instance, start with text. A text-to-image mode draws that text as a picture.
  2. Choose an image-to-text mode. It reads the picture and writes something back.
  3. Send that new text through another image mode. Repeat, and compare what each combination keeps or changes.

Infinite translations are possible. These frames below are from just one chain, in the order the modes were used.

  1. Mono dots draws the text as overlapping circles.
  2. Brightness type reads that image back as letters and marks.
  3. Alphabet line draws the next text as a chain of colored dots.
  4. Literal map names the drawing as lines, circles, and rectangles.
  5. Character grid sets that text as a field of colored squares.
  6. Hue type reads that grid back as letters and marks.
  7. Blackout poem sets a later text as scattered marks and blocks.
  8. Raw features reads that image as a list of numbers.
  9. Mono dots draws that text as circles again.
  10. RGB grid reads those circles as color values.
  11. Watercolor paints those values as washes of color.
  12. Image description returns “a colorful kite is in the air.”

Modes of translation

I built ten ways to turn text into an image and seven ways to turn an image back into text. They do not share one definition of what the information is.

Text into image

The modes are Mono dots, Color grid, Character grid, Blackout poem, Alphabet line, Neuron grid, Character map, Watercolor, Sentence split, and Binary stripes. Some draw the text as marks or color. Others set it through characters, type, or a poem. Across them I worked with alphabet mappings and with type arranged from visual structure rather than from the sentence alone.

Mono dots is one of those modes. Each word becomes a circle. Size runs from a to z, horizontal position follows the average letter in the word, and word order runs down the page. This is the paragraph those diagrams read:

We call them Bunnies because that is what they call each other. Seriously. Bunny.
Example:
Hi, Bunny!
Hi, Bunny!
What did you do last night, Bunny?
I hung out with you, Bunny. Remember, Bunny?
That’s right, Bunny, you hung out with me and it was the best time I ever had.
Bunny, I love you.
I love you, Bunny.

Image into text

Other modes measure the picture and write the measurement down. Brightness type, Hue type, RGB grid, and Hex grid use color and tone as the code. Raw features lists numeric readings. Literal map names shapes it finds, such as lines, circles, and rectangles. Image description asks a model to say what it sees. In building these, I also worked with ASCII, RGB and color codes, typography based on brightness, generated image descriptions, and vision-language models such as CLIP.

RGB grid reads a picture as color values. This firework photo is the image. The text beside it is what the mode writes back.

Long-exposure photograph of gold, green, and white firework light trails
Firework photo
[238,181,105];  [209,157,86];  [255,218,158];  [95,82,47];  [134,184,151];  [172,130,85];  [59,52,31];  [66,51,40];  [76,59,83];  [31,19,17];  [73,28,22];  [255,255,255]; [255,217,151];  [109,103,70];  [190,138,80];  [210,159,95];  [53,76,47];  [92,90,65];  [129,108,100];  [161,136,133];  [105,82,89];  [72,48,46];  [93,50,43];  [122,49,31]; [188,227,195];  [240,251,168];  [229,174,100];  [243,241,239];  [97,89,54];  [159,126,85];  [85,75,58];  [47,42,25];  [57,38,29];  [185,87,30];  [187,94,46];  [122,118,87]; [169,143,104];  [120,113,58];  [246,193,115];  [221,165,84];  [241,239,239];  [203,149,80];  [28,49,23];  [30,40,22];  [22,24,15];  [17,13,7];  [23,18,17];  [20,16,8]; [117,104,58];  [218,197,107];  [254,246,224];  [255,208,153];  [232,179,112];  [123,100,57];  [28,54,29];  [81,61,34];  [19,27,21];  [166,169,164];  [33,34,31];  [58,69,74]; [247,227,213];  [236,192,136];  [185,139,71];  [178,235,170];  [252,204,136];  [183,137,80];  [0,142,114];  [79,76,47];  [19,30,21];  [22,24,21];  [63,66,60];  [51,50,43]; [200,234,180];  [246,237,239];  [160,144,93];  [250,253,252];  [187,181,115];  [161,127,78];  [74,86,56];  [30,67,46];  [29,48,35];  [23,33,28];  [39,36,19];  [47,38,15]; [202,174,102];  [225,179,105];  [250,204,144];  [217,186,143];  [182,141,100];  [50,84,54];  [0,97,74];  [29,59,43];  [26,40,33];  [21,30,26];  [48,46,38];  [47,44,32]; [209,161,149];  [186,170,147];  [158,136,81];  [146,123,76];  [166,138,95];  [80,91,54];  [48,56,41];  [40,56,46];  [30,43,34];  [20,28,20];  [27,25,16];  [27,18,11]; [20,43,14];  [113,92,52];  [37,49,25];  [13,33,18];  [24,38,27];  [31,51,37];  [81,87,87];  [81,87,90];  [45,54,46];  [27,35,21];  [31,30,16];  [35,31,16]; [253,249,239];  [160,118,41];  [227,160,72];  [24,16,4];  [72,69,75];  [114,119,123];  [61,67,68];  [50,56,52];  [162,167,167];  [40,46,31];  [25,26,10];  [27,24,10];
RGB grid

Process

I wrote the piece in the browser with p5.js, React, and JavaScript, so the translations are something you operate rather than a film you watch. The drawings come from illustration and graphic design: type, grids, dots, watercolor, and the page as a composition. The questions come from the other side of the dual degree.

Computer science is the machinery of the modes. Cognitive science, linguistics, and human-computer interaction are why that machinery is arranged as a game of repetition. A person chooses the next mode. The system does not decide what the message meant. Making the tool was the inquiry: each new mode was a way of asking what counts as the information, and what gets left out when a representation has to become another kind of representation.

Reflection

A representation can be precise and still lose the thing it was asked to carry. A brightness reading is faithful to the pixels and indifferent to the sentence. In the recording, an image-description mode looks at a watercolor and answers, “a colorful kite is in the air.” The sentence sounds sure. It is also far from the text that began that chain.

Those moments are not a proof about semantic drift, and they are not a general claim about how meaning works. They are what this particular sequence of systems did with a particular input. Translation Telephone is an instrument for noticing that, and for trying the chain again.

Some fun outputs

A field of black dots joined into a network
Soft color washes crossed by thin concentric circles
Rows of RGB color values
Blue dots of different sizes sitting on vertical lines
Overlapping circles in blue, green, purple, and orange
Vertical color stripes with black and white dots arranged in rows
Soft green and purple washes crossed by thin overlapping circles
Colored curves linking small squares across a pale field
Columns of overlapping black circles, dense on the left and larger on the right
A field of letters and punctuation marks