Ripples3

Liquid code experiment

Demo

🌊 Liquid simulation
🫠 Might liquify your CPU
🪫 And melt your battery

Experiment n°166 — Pool Party

• Better physics
• Improved light
• Less CPU load
• Various fixes

uncompiled dev version

What's next

• Optimize render loop
• Normalize parameters
• Adjust ranges & steps
• Rewrite trail spread
• Touch points params
• Gyro control
• Offline service worker
• Animated background
• Koi fish ? Sharks ?
• Multi screen !

Menu

• about : soon
• flow : play/pause simulation
• reset : reset water state
• upscl : render upscale
• full : toggle fullscreen
• share : share URL with current parameters
• image : load image from device
• test : testing only
• { } :
• point : autotouch point
• rain : is it raining ?
• swirl : effect
• previous / next preset
• parameters sliders

Bugs

• Still water heavy CPU load
• More bugs

Presets

biohazard

bright light

smooth blur (very heavy)

Previous experiments

n°152 — Biohazard / dev

n°122 — Liquid brain / dev

n°064 — Be water / dev

Perf

• Render detail is initially set to 2.0 and will decrease if framerate is too low.
• It can work the other way around, start low and then progressive upscale.
• See settings in Liquid constructor.

Tests (exp n°064)

framerate × render

• Intel Iris Xe : 60fps x 2
• iPhone 12 Mini : 60fps x 3
• Oppo A16s : 60fps x 1
• Samsung S10+ : 60fps x 3.5
• iPad Pro 12" Gen2 : 60fps x 1.5
• Samsung Tab S7+ : 75~100fps x 2.125 o_O

Vanilla

Javascript + WebGL

ClosureCompiler / ShaderMinifier / Sass