Week 3- DNA

Concept:

This week, we were tasked with gathering inspiration from Memo Akten’s work, focusing on visualizing simple harmonic motion (SHM). When I looked through his work I was reminded of the structure of DNA, with its two intertwining sine waves resembling the periodic motion characteristic of SHM. So, for my assignment I wanted to replicate that and try to mimic the movement and design of a DNA structure.

Key Features:

• Sine Waves as DNA Backbones: Two sinusoidal waves form the backbone of the DNA structure. These waves oscillate vertically and reflect the nature of simple harmonic motion.
• Bunched Particles: Along both sine waves, I added clusters of red particles to mimic the molecular bonds on a DNA strand, creating a more organic and dynamic feel.
• Colorful Connecting Rungs: The colorful “rungs” between the two sine waves change color as they move along the structure, representing the diversity and vibrancy found in DNA.
• 3D Rotation: The entire DNA strand rotates around the y-axis, adding a three-dimensional element to the animation.

embedded sketch:

Code I’m Most Proud Of:

I’m particularly proud of the code that generates the particles along the sine waves and the rungs. By combining randomness and structured positions, I was able to create visually interesting clusters that closely mimic the complexity of a DNA strand. Additionally, the color transitions in the connecting rungs add an appealing vibrancy to the piece, making it more engaging to look at.

// Function to draw bunched-up red particles along the sine waves
function drawParticles(x, y) {
  noStroke();
  fill(255, 0, 0);  // Red particles
  let numParticles = 5;  // Number of particles in each bunch
  let particleSize = 4;  // Size of each particle
  let spread = 5;  // Spread between particles in a bunch

  for (let i = 0; i < numParticles; i++) {
    // Create small offsets for the particles to make them appear bunched
    let offsetX = random(-spread, spread);
    let offsetY = random(-spread, spread);

    // Draw particle at each offset position
    ellipse(x + offsetX, y + offsetY, particleSize, particleSize);
  }
}

// Function to draw particles along the connecting strands (rungs)
function drawRungParticles(x1, x2, y) {
  noStroke();
  fill(0, 255, 0);  // Green particles for the connecting rungs
  let numRungParticles = 4;  // Number of particles along each rung
  let particleSize = 4;  // Size of each particle

  for (let i = 0; i < numRungParticles; i++) {
    // Calculate positions along the line between x1 and x2
    let t = i / (numRungParticles - 1);  // Normalize t to range [0, 1]
    let x = lerp(x1, x2, t);  // Linear interpolation between x1 and x2

    // Draw particle along the line connecting x1 and x2 (rung)
    ellipse(x, y, particleSize, particleSize);
  }
}

main functions:

1. drawParticles():
   • Red Particles: Randomly places red particles along each sine wave.
   • Bunching: The function creates clusters of particles by adding random offsets (offsetX, offsetY) to the position. This simulates the bunched look of molecules along DNA strands.
2. drawRungParticles():
   • Green Particles: Particles along the rungs (the connections between the two sine waves).
   • Structured Positions: The function calculates positions between the two sine waves using linear interpolation (lerp()), ensuring that the particles are evenly distributed along the connecting lines.

Reflections for Future Work:

In the future, I’d like to explore further how I can simulate more biological properties in this visualization. One idea is to add more complexity to the particles, making them behave like molecules interacting with one another. I also think it would be interesting to explore interactivity, where users can manipulate the DNA strand’s rotation, zoom, or even the particle behavior, allowing for a more immersive experience.