Exploring the Intersection of Photography and Computed Visuals with Processing: An Experiment with mtDNA and Animated Teeth Narration

Combining photography with computing can lead to some exciting and innovative visual experiences. One way to achieve this is through the use of Processing, a programming language that allows for the creation of dynamic and interactive visuals. As part of my FMP research, I have been considering the use of Processing in connection with my photography, specifically around the topic of mitochondrial DNA (mtDNA).

Mitochondrial DNA is a type of DNA that is found in the mitochondria of cells and is passed down maternally. This type of DNA can be used to trace ancestry and is also important in understanding genetic diseases. By combining photography with dynamic visualizations of mtDNA, I hope to create a unique and engaging experience for viewers.

To achieve this, I plan to add a layer of computed visuals to my photography using Processing. One possible approach could be to create an animated representation of mtDNA that responds to user input, allowing viewers to interact with the visualizations in real-time.

In addition to using computed visuals, I also plan to incorporate animated teeth as a narrator in my project. To accomplish this, I will be reusing code from an earlier course on Processing. The code for the animation is shown below:

float toothY = 0;
float toothDir = 1;

void setup() {
size(400, 400);
noStroke();
fill(255);
frameRate(45);
}

void draw() {
background(0);

// Update the tooth position
toothY += toothDir * 5;
if (toothY < -30 || toothY > 30) {
toothDir = -toothDir;
}

// Draw the teeth
pushMatrix();
translate(width/2, height/2 – 60 + toothY);
scale(0.5);
drawTooth(-80, -20, 30, 60);
drawTooth(-40, -10, 20, 50);
drawTooth(0, 0, 20, 40);
drawTooth(40, -10, 20, 50);
drawTooth(80, -20, 30, 60);
popMatrix();

pushMatrix();
translate(width/2, height/2 + 60 – toothY);
scale(0.5);
drawTooth(-70, 10, 20, 40);
drawTooth(-30, 20, 20, 50);
drawTooth(10, 20, 20, 50);
drawTooth(50, 10, 20, 40);
popMatrix();
}

void drawTooth(float x, float y, float w, float h) {
beginShape();
vertex(x-w/2, y);
bezierVertex(x-w/2, y-h, x+w/2, y-h, x+w/2, y);
vertex(x+w/2-w/5, y);
vertex(x+w/2-w/5, y-h/2);
vertex(x+w/5, y-h/2);
vertex(x+w/5, y);
endShape(CLOSE);
}

This code creates a simple animation of 10 teeth that move across the screen from left to right. To run this animation on Mac OS, you will need to download Processing version 4 from the Processing.org website. Once downloaded, simply copy and paste the code into a new sketch and click the “play” button to run the animation.

Mitochondrial DNA Example Sequence

While my own DNA has been decoded, I cannot share the actual coding due to privacy concerns. However, I have used a mitochondrial DNA sequence as an example in a photograph of my paternal grandmother, as part of a project to trace my father’s ancestry. I plan to create similar visualizations using antique photographs of my maternal grandmother and great-grandmother from my family photo collection.

GTGCTGATCACAGGTCTATCCTGACCTGGCCGAGCAGGAGAGCCTCTGCAACCCGGGAGGCGGGAGCATTGATTAGCTCACTAAACCCCCGCCCTCAGCCTACTTAAATTTAATTAAGCCATCGGCGCACGGTCTTTTATTAGCTCTAGTCAAAACTAAAGAGGGTTCGCTTTAGCCACACTGGGAGTGGATCACCCGTTCTCTACTAAAGTGTGCCGGGGGAGGAGCCTGTTATTT…

There are different methods to create the desired type of image. In Photoshop, one approach is to write the letter sequence as text attached to a marked-up line, which could be spiral in nature. Alternatively, a simple layer could be added to an antique family photograph. Another option is to use Processing to run a program that generates an image from the letter sequence, such as Text2Image.

The latter was implemented and is the more sophisticated visually. Text size and colour is varied to produce a form of typewriter art. Experimentation with parameters was clearly necessary from a previous implementation which was either too crowded with text or too sparse. I need to find the happy medium.

The more sophisticated approach for creating the image was through Processing’s Text2Image program, where the text size and color can be varied to produce typewriter art. However, experimentation with the parameters is necessary to find the right balance. In a previous implementation, the image was either too crowded or too sparse with text, so I need to find the sweet spot.

By combining computed visuals with my photography and incorporating animated teeth as a narrator albeit quite basic until further refined., I hope to create a unique and engaging experience for viewers that explores the topic of mitochondrial DNA in a new and exciting way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s