├── .gitignore
├── LICENSE
├── README.md
├── cover.jpg
├── dist
├── assets
│ ├── bead.glb
│ └── normal.png
├── index-6ca6b2e6.css
├── index-be83070f.js
└── index.html
├── package-lock.json
├── package.json
├── src
├── app
│ ├── _sketch-template.js
│ ├── app.js
│ ├── audio-repeater.js
│ ├── is-ios.js
│ ├── shader
│ │ ├── bead.frag.glsl
│ │ ├── bead.vert.glsl
│ │ ├── blur.frag.glsl
│ │ ├── blur.vert.glsl
│ │ ├── composite.frag.glsl
│ │ ├── composite.vert.glsl
│ │ ├── highpass.frag.glsl
│ │ ├── highpass.vert.glsl
│ │ ├── light-depth.frag.glsl
│ │ ├── sph
│ │ │ ├── draw.frag.glsl
│ │ │ ├── draw.vert.glsl
│ │ │ ├── force.frag.glsl
│ │ │ ├── force.vert.glsl
│ │ │ ├── indices.frag.glsl
│ │ │ ├── indices.vert.glsl
│ │ │ ├── integrate.frag.glsl
│ │ │ ├── integrate.vert.glsl
│ │ │ ├── offset.frag.glsl
│ │ │ ├── offset.vert.glsl
│ │ │ ├── pressure.frag.glsl
│ │ │ ├── pressure.vert.glsl
│ │ │ ├── sort.frag.glsl
│ │ │ ├── sort.vert.glsl
│ │ │ └── utils
│ │ │ │ └── particle-utils.glsl
│ │ ├── test.frag.glsl
│ │ └── test.vert.glsl
│ ├── sketch.js
│ └── utils
│ │ ├── glb-builder.js
│ │ └── modernizr.js
├── assets
│ ├── bead.glb
│ ├── env-map-01.jpg
│ ├── env-map-02.jpg
│ └── normal.png
├── index.html
└── styles.css
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 |
84 | # Gatsby files
85 | .cache/
86 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
87 | # https://nextjs.org/blog/next-9-1#public-directory-support
88 | # public
89 |
90 | # vuepress build output
91 | .vuepress/dist
92 |
93 | # Serverless directories
94 | .serverless/
95 |
96 | # FuseBox cache
97 | .fusebox/
98 |
99 | # DynamoDB Local files
100 | .dynamodb/
101 |
102 | # TernJS port file
103 | .tern-port
104 |
105 | src/libs/**
106 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Robert Leitl
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Liquid-Geo
2 |
3 | 
4 |
5 | This web experiment is inspired by the liquid-geo interface designs form the movie [Man of Steel](https://en.wikipedia.org/wiki/Man_of_Steel_(film)). It allows the user to record a short audio snippet. This snippet can then be played back in a distorted version and the sphere responds to the audio signal. In addition, the beads on the surface of the sphere can be manipulated by touch or mouse movement.
6 |
7 | [DEMO](https://robert-leitl.github.io/liquid-geo/dist/?debug=true)
8 |
9 | ### Features
10 | - SPH fluid simulation on sphere surface [Github Repo](https://robert-leitl.github.io/gpgpu-2d-sph-fluid-simulation)
11 | - Screen-space halo and bloom effect inspired by this [article](https://john-chapman.github.io/2017/11/05/pseudo-lens-flare.html) from John Chapman.
12 | - Audio recording and distorted playback using web audio API and tone.js.
--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert-leitl/liquid-geo/ec7c6907c7c14bf54a63eca593bf7716575866ba/cover.jpg
--------------------------------------------------------------------------------
/dist/assets/bead.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert-leitl/liquid-geo/ec7c6907c7c14bf54a63eca593bf7716575866ba/dist/assets/bead.glb
--------------------------------------------------------------------------------
/dist/assets/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robert-leitl/liquid-geo/ec7c6907c7c14bf54a63eca593bf7716575866ba/dist/assets/normal.png
--------------------------------------------------------------------------------
/dist/index-6ca6b2e6.css:
--------------------------------------------------------------------------------
1 | *{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;height:100%;width:100dvw;height:100dvh;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:18px;overflow:hidden;touch-action:none;background-color:#000}body{position:relative}@media screen and (max-width: 640px){body,html{font-size:14px}}canvas{width:100%;height:100%}.github-link{position:absolute;right:0;bottom:0;color:#aaa;mix-blend-mode:difference;text-transform:uppercase;text-decoration:none;padding:.7em 1em;font-size:.8em}.audio-controls{position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;padding:3em 0;pointer-events:none}.audio-controls button{pointer-events:all;cursor:pointer;background:none;border:2px solid #eee;border-radius:10rem;display:flex;align-items:center;min-height:4.25em;width:16em;justify-content:center}@media screen and (min-width: 641px){.audio-controls button{min-height:6em}}.audio-controls button:hover{background:#333}.audio-controls button:disabled{opacity:.4;pointer-events:none}.audio-controls button label{color:#eee;font-size:1.25rem;pointer-events:none}.audio-controls svg{height:2rem;width:2rem;margin-right:.5rem;pointer-events:none}@media (min-aspect-ratio: 7/5){.audio-controls{flex-direction:column;height:100%;padding:0 2em;align-items:flex-end}.audio-controls button+button{margin-top:1em}}@media (max-aspect-ratio: 5/8){.audio-controls{flex-direction:column}.audio-controls button+button{margin-top:1em;margin-left:0!important}}.audio-controls button+button{margin-left:1em}#playback-button svg{width:1.7rem;height:1.7rem}#record-button.is-recording:before{content:"";display:block;width:1.5rem;height:1.5rem;margin-right:.5rem;background:#f22;border-radius:100%}#record-button.is-recording svg{display:none}
2 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | liquid-geo
7 |
8 |
9 |
10 |
11 |
12 |
13 | github
14 |
15 |
16 |
22 |
27 |
14 |
20 |
25 |