Break the Clot
Game and Web Development | NSF Research
2022
Functionality
This web application uses playful animations and simple movements to accurately depict fluid dynamics and nanobot techonologies.
This web application uses playful animations and simple movements to accurately depict fluid dynamics and nanobot techonologies.
My Role
This project was worked on with 2 other engineers.
I worked on the basic graphic design and front-end development.
This project was worked on with 2 other engineers.
I worked on the basic graphic design and front-end development.
Programming Languages Used 💻: HTML, JavaScript, CSS
Research Process
The first step in the development process was implementing the physics logic of a MATLAB script to the JavaScript movement of the microrobots.
Three-Sphere Swimmer Notation
Parameters:The MATLAB script for numerically calculating the Three Sphere Swimmer
is based of the research from this American Physics Society journal.
is based of the research from this American Physics Society journal.
Three-Sphere Swimmer Notation
D initial arm length
ε (epsilon): total stroke displacement
Δ (delta): middle sphere displacement after entire motion
function ThreeSphere(L1Now, L1Next, L2Now, L2Next)
- L1 and L2 are the state of the arms
- 1 = fully extended
- 0 = retracted
- Our sequence: 1,0,1,1 ︎︎︎ 0,0,1,0 ︎︎︎ 0,1,0,0 ︎︎︎ 1,1,0,1
MicroBot Logic translated to JavaScript
Design Process
Initial 3D mockup of Blood Cell:
However, 3D Modeling makes the game feel less targeted towards younger children.
It also adds a layer of complexity that the timeline of this game was not equipped to handle.
Once we decide upon 2D, we focused on the game logic and development.
The last step was then to implement more exciting and complex graphics.
👾 Play the game here! 👾
@Lydia Kim 2023