Learning Timeline
Key Insights
Gravity Control Logic
In this simulation, the Gravity slider works dynamically: a setting of 1 causes the liquid to fall quickly, while a setting of -1 reverses the physics, causing the liquid to float upwards.
AI Web Optimization Tips
When generating heavy physics simulations, always instruct the AI to 'Make it more efficient for a web browser' to avoid lag or frame drops while using the webcam.
Prompts
Initial Generation Prompt
Target:
OpenAI Codex
Simulate liquid splashes with adjustable gravity and light settings. Make it visually stunning. Allow me to control movements using hand tracking via webcam.
Visual Correction & Efficiency Prompt
Target:
OpenAI Codex
Why does the light flash every few seconds? It's too bright. The light angle and intensity also don't work well. It should be a dark background. Make it more efficient for a web browser.
Prompt for Adding Sliders & Physics Controls
Target:
OpenAI Codex
remove the fake particles that followed the cursor. Add more sliders that influence the splash colors and persistence. Let's increase the splash force. Color speed, saturation, light power, and let's also increase persistence.
Step by Step
Workflow for Building a Liquid Simulation with OpenAI Codex
- Open the OpenAI Codex interface or your preferred AI code editor.
- Enter the primary prompt to generate a 'liquid splashes' simulation with adjustable gravity and lighting settings.
- Click the 'Run' button to generate the code and view the initial results in your browser.
- Use follow-up prompts to fix lighting issues, set a 'dark background', and instruct the AI to optimize the code for web browsers.
- Provide additional instructions to remove 'fake particles' that follow the cursor and add control 'sliders' for color and 'persistence'.
- Ask the AI to increase the 'splash force', 'color speed', 'saturation', and 'light power' parameters for a better visual impact.
- Test the simulation by adjusting the 'Gravity' slider; move it to 1 to make the liquid fall, or -1 to make it float upwards.
- Click the 'Enable Hand' button on the simulation interface to activate the webcam.
- Use finger movements in front of the webcam to control the liquid's movement in real-time via hand tracking.
