Overview

This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #6 on creating a simulation of Mitosis

Currently only simulates actual splitting of the cell; not the separation / replication of the chromosomes.

The p5.js curveVertex() is used to soften the curve the membrane. Technical note, the code loops back over on the first two points in the membrane due to the way the curve function works. (See the documentation on p5.js curveVertex() for more details).

Controls

(No interactivity implemented yet).

References:

• Wikipedia / Mitosis
• Wikipedia / Cell Cycle
• [YouTube - mitosis 3D animation | Phases of mitosis| cell division ][youtube-mitosis]
• p5.js curveVertex()

Links:

• Live View
• Source on Github

Notes / Learnings:

One (sub)challenge I wanted to explore here was mimicking the pinching of the cell membrane to form the two daughter cells. I chose to use a collection of line-segments (CellMembraneSegment) to form the membrane, which gave me this control.

Unfortunately, I got hung up on creating a natural push/pull aspect of this membrane, and resorted to random movement. Subsequently, there are jagged edges in what should be a smooth curved boundary. I would like to revisit this and use more natural forces to model the membranes movement.

Overall, this felt more like creating a timed animation than simulating a natural process.

Next Steps

• Re-model the movement of the membrane based on natural forces; and allow it contract / grow during Cytokinesis.
• Model the phases of mitosis involving chromosome condensing and movement via the centrosomes.
• Explore what it would look like to model the internal chemical signals that advance the cell through the stages of its life.
• Explore interactivity to engage the user more.

Screenshots: