Assignment Week #4 – DNA - Decoding Nature

Concept:

Drawing inspiration from the structure of DNA, the goal behind this project was to visually represent a DNA helix. A DNA helix is composed of two spiral strands, interlinked by rung-like structures, mimicking a twisted ladder. The project also allows interactive elements, enabling users to manipulate the visual representation of the helix. Users can control the radius and segment length of the helix by moving the mouse and can also manipulate the rotation speed using the arrow keys.

Implementation:

Helix:

Helix: Two helixes are drawn to represent the twisted strands of the DNA helix, each spiral strand having base pairs represented by ellipses. Lines connecting these ellipses create an aesthetic and illustrative representation of a DNA helix.

User interactivity:

Radius and Segment Length Control: By pressing and holding the mouse button, users can change the helix’s radius and segment length, creating varied visual effects. The X-coordinate of the mouse controls the radius, and the Y-coordinate controls the segment length.
Rotation Speed Control: The UP_ARROW key increases the rotation speed of the helix, while the DOWN_ARROW key decreases it, allowing users to explore the helix structure in a dynamic manner.

Sketch:

Code:

Here is a snippet of the main interactivity features implemented in the code:

for (let i = 0; i < numSegments; i++) {
    let angle1 = i * angleIncrement + angle;
    let angle2 = angle1 + PI; 
    let x1 = helixRadius * sin(angle1);
    let y1 = i * segmentLength;
    let x2 = helixRadius * sin(angle2);
    let y2 = (i + 1) * segmentLength;
    
    ellipse(x1, y1, 10, 10);
    ellipse(x2, y2, 10, 10);
    line(x1, y1, x2, y2);
}

It calculates two angles, angle1 and angle2, for each segment, ensuring a 180-degree phase shift between them to depict opposite points in the helix.
For each angle, it computes the x and y coordinates (x1, y1, x2, y2) to position the base pairs and draw the segment of the helix.
It uses these coordinates to draw two ellipses representing base pairs and a line between them, simulating the structure of DNA.

Challenges:

Interactivity Integration: Seamlessly incorporating user controls while maintaining the visual integrity of the helix structure presented a challenge. The controls needed to be intuitive and responsive, allowing users to explore the structure dynamically.
Visual Representation: Achieving a visually appealing and accurate representation of a DNA helix, considering the spiral strands and interconnecting lines, required meticulous calculations and adjustments.

Future Improvements:

Additional More User Controls: Implement more user controls, like sliders or input fields, enabling users to modify parameters such as color schemes, the density of base pairs, or introducing distortions to the helix structure.
Visual Aesthetics Enhancements: Infuse more aesthetic elements like dynamic colors, shadows, and reflections, elevating the visual appeal and depth of the representation.