├── .gitignore ├── README.md ├── audio ├── demo1.mp3 ├── demo2.mp3 ├── demo3.mp3 ├── demo4.mp3 ├── demo5.mp3 ├── demo6.mp3 ├── demo7.mp3 └── demo8.mp3 ├── css ├── base.css ├── demo1.css ├── demo2.css ├── demo3.css ├── demo4.css ├── demo5.css ├── demo6.css ├── demo7.css └── demo8.css ├── favicon.ico ├── fonts ├── ferritecore-regular-webfont.woff ├── ferritecore-regular-webfont.woff2 ├── kiona-regular-webfont.woff ├── kiona-regular-webfont.woff2 ├── tall_films_expanded-webfont.woff ├── tall_films_expanded-webfont.woff2 ├── talldark-webfont.woff ├── talldark-webfont.woff2 ├── walkway_condensed-webfont.woff └── walkway_condensed-webfont.woff2 ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── clouds.jpg ├── fibers.jpg ├── pointilize.jpg └── ripple.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html ├── index6.html ├── index7.html ├── index8.html ├── js ├── demo1.js ├── demo2.js ├── demo3.js ├── demo4.js ├── demo5.js ├── demo6.js ├── demo7.js └── demo8.js └── shaders ├── base.vert ├── d1.frag ├── d2.frag ├── d3.frag ├── d4.frag ├── d5.frag ├── d6.frag └── d8.frag /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .vscode 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Audio-based Image Distortion 2 | 3 | A set of experimental audio-based image distortion effects made with WebGL. 4 | 5 | ![Featured](https://tympanus.net/codrops/wp-content/uploads/2020/02/Soundbasedimagedistortion_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=47614) 8 | 9 | [Demo](http://tympanus.net/Development/AudioBasedImageDistortion/) 10 | 11 | ## Credits 12 | 13 | - Sound icons made by [Freepik](https://www.flaticon.com/authors/freepik) 14 | 15 | ## License 16 | This resource can be used freely in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell, redistribute, re-publish, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work on our site. 17 | 18 | ## Misc 19 | 20 | Follow Yannis: [Web](https://www.neundex.com), [Twitter](https://www.twitter.com/neundex), [Instagram](https://www.instagram.com/neundex) 21 | 22 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 23 | 24 | 25 | [© Codrops 2020](http://www.codrops.com) 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /audio/demo1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo1.mp3 -------------------------------------------------------------------------------- /audio/demo2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo2.mp3 -------------------------------------------------------------------------------- /audio/demo3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo3.mp3 -------------------------------------------------------------------------------- /audio/demo4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo4.mp3 -------------------------------------------------------------------------------- /audio/demo5.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo5.mp3 -------------------------------------------------------------------------------- /audio/demo6.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo6.mp3 -------------------------------------------------------------------------------- /audio/demo7.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo7.mp3 -------------------------------------------------------------------------------- /audio/demo8.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/audio/demo8.mp3 -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 14px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #000; 15 | --color-link: #aaa; 16 | --color-link-hover: #fff; 17 | --anim-time: 3s; 18 | --anim-delay-first: 1s; 19 | --anim-delay-second: calc(var(--anim-delay-first) + var(--anim-time)); 20 | --anim-time-total: calc(var(--anim-time) + var(--anim-delay-first)/3 + var(--anim-delay-second)); 21 | --color-title: #fff; 22 | color: var(--color-text); 23 | background-color: var(--color-bg); 24 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 25 | background-size: cover; 26 | background-position: 50% 50%; 27 | } 28 | 29 | canvas { 30 | position: absolute; 31 | left: 50%; 32 | top: 50%; 33 | transform: translate(-50%, -50%); 34 | width: 100%; 35 | height: 100%; 36 | } 37 | 38 | .hidden { 39 | position: absolute; 40 | overflow: hidden; 41 | width: 0; 42 | height: 0; 43 | pointer-events: none; 44 | } 45 | 46 | .p5_loading { 47 | background: var(--color-bg); 48 | position: fixed; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | z-index: 2000; 57 | } 58 | 59 | .p5_loading__inner { 60 | width: 60px; 61 | height: 60px; 62 | border-radius: 50%; 63 | opacity: 0.4; 64 | background: var(--color-link); 65 | animation: loaderAnim 0.7s linear infinite alternate forwards; 66 | } 67 | 68 | @keyframes loaderAnim { 69 | to { 70 | opacity: 1; 71 | transform: scale3d(0.5,0.5,1); 72 | } 73 | } 74 | 75 | a { 76 | text-decoration: none; 77 | color: var(--color-link); 78 | outline: none; 79 | } 80 | 81 | a:hover, 82 | a:focus { 83 | color: var(--color-link-hover); 84 | outline: none; 85 | } 86 | 87 | .frame { 88 | padding: 3rem 5vw; 89 | text-align: center; 90 | position: relative; 91 | z-index: 1500; 92 | text-transform: uppercase; 93 | } 94 | 95 | .frame__title { 96 | font-size: inherit; 97 | margin: 0 0 1rem; 98 | font-weight: inherit; 99 | } 100 | 101 | .frame__links { 102 | display: inline; 103 | } 104 | 105 | .frame__links a:not(:last-child), 106 | .frame__demos a:not(:last-child) { 107 | margin-right: 1.5rem; 108 | } 109 | 110 | .frame__demos { 111 | margin: 1rem 0; 112 | } 113 | 114 | .frame__demo--current, 115 | .frame__demo--current:hover { 116 | color: var(--color-text); 117 | } 118 | 119 | .button { 120 | -moz-appearance: none; 121 | -webkit-appearance: none; 122 | background: none; 123 | border: 0; 124 | padding: 0; 125 | margin: 0; 126 | color: var(--color-link); 127 | cursor: pointer; 128 | } 129 | 130 | .button--box { 131 | pointer-events: auto; 132 | background: var(--color-link); 133 | color: var(--color-bg); 134 | padding: 0.5rem 2rem; 135 | font-family: inherit; 136 | margin: 2rem; 137 | border-radius: 1.25rem; 138 | font-size: 1rem; 139 | } 140 | 141 | .button:hover, 142 | .button:focus { 143 | outline: none; 144 | color: var(--color-link-hover); 145 | } 146 | 147 | .button--box:hover, 148 | .button--box:focus { 149 | background: var(--color-link); 150 | color: var(--color-bg); 151 | } 152 | 153 | .toggle__icon { 154 | position: relative; 155 | display: block; 156 | width: 1.6rem; 157 | height: 1.6rem; 158 | margin: 0 auto; 159 | fill: currentColor; 160 | } 161 | 162 | .toggle__icon--off { 163 | display: none; 164 | } 165 | 166 | .toggle--on .toggle__icon--on { 167 | display: none; 168 | } 169 | 170 | .toggle--on .toggle__icon--off { 171 | display: block; 172 | } 173 | 174 | .start-anim .toggle { 175 | pointer-events: auto; 176 | } 177 | 178 | .start-anim .button--box { 179 | pointer-events: none; 180 | } 181 | 182 | .content { 183 | display: flex; 184 | flex-direction: column; 185 | padding: 0 1.5rem; 186 | width: 100vw; 187 | height: calc(100vh - 13rem); 188 | position: relative; 189 | justify-content: flex-start; 190 | align-items: center; 191 | position: relative; 192 | z-index: 1200; 193 | cursor: default; 194 | text-transform: uppercase; 195 | pointer-events: none; 196 | } 197 | 198 | .content a { 199 | pointer-events: auto; 200 | } 201 | 202 | .content__subtitle { 203 | font-size: 1.35rem; 204 | font-weight: inherit; 205 | margin: 0 0 1rem 0; 206 | } 207 | 208 | .content__title { 209 | font-size: 3rem; 210 | font-weight: inherit; 211 | margin: 0; 212 | color: var(--color-title); 213 | } 214 | 215 | .content__credits { 216 | margin: 4rem 0; 217 | max-width: 37rem; 218 | text-align: center; 219 | } 220 | 221 | .screen { 222 | position: fixed; 223 | top: 0; 224 | left: 0; 225 | width: 100%; 226 | height: 100%; 227 | pointer-events: none; 228 | background: var(--color-bg); 229 | z-index: 1600; 230 | } 231 | 232 | .screen--grid { 233 | display: grid; 234 | grid-template-columns: 100%; 235 | grid-template-rows: 100%; 236 | justify-items: center; 237 | align-items: center; 238 | } 239 | 240 | .screen--flex { 241 | display: flex; 242 | flex-direction: column; 243 | align-items: center; 244 | justify-content: center; 245 | } 246 | 247 | .start-anim .intro { 248 | animation: fadeOut 1s var(--anim-time-total) linear forwards; 249 | } 250 | 251 | @keyframes fadeOut { 252 | to { 253 | opacity: 0; 254 | } 255 | } 256 | 257 | .intro__content { 258 | font-size: 4vw; 259 | grid-area: 1 / 1 / 2 / 2; 260 | text-align: center; 261 | pointer-events: none; 262 | margin: 0; 263 | opacity: 0; 264 | } 265 | 266 | .intro__content-line { 267 | display: block; 268 | margin: 1rem 0; 269 | } 270 | 271 | .intro__content-line--small { 272 | font-size: 1.5rem; 273 | } 274 | 275 | .no-js .intro { 276 | display: none; 277 | } 278 | 279 | .start-anim .intro__content { 280 | animation: fadeInOut var(--anim-time) var(--anim-delay-first) linear forwards; 281 | } 282 | 283 | .start-anim .intro__content:nth-child(2) { 284 | animation-delay: var(--anim-delay-second); 285 | } 286 | 287 | @keyframes fadeInOut { 288 | 0% { 289 | opacity: 0; 290 | } 291 | 50% { 292 | opacity: 1; 293 | } 294 | 100% { 295 | opacity: 0; 296 | pointer-events: none; 297 | } 298 | } 299 | 300 | .action__line { 301 | margin: 1rem 0; 302 | cursor: default; 303 | } 304 | 305 | .start-anim .action { 306 | transition: opacity 0.3s; 307 | opacity: 0; 308 | pointer-events: none; 309 | } 310 | 311 | @media screen and (min-width: 53em) { 312 | .frame { 313 | position: absolute; 314 | text-align: left; 315 | top: 0; 316 | left: 0; 317 | width: 100%; 318 | display: grid; 319 | padding: 2.5rem 4rem; 320 | grid-template-columns: auto 1fr auto auto auto; 321 | align-content: space-between; 322 | align-items: center; 323 | } 324 | .frame__title { 325 | margin: 0 5rem 0 0; 326 | } 327 | .frame__demos { 328 | margin: 0; 329 | } 330 | .frame__links { 331 | padding: 0; 332 | } 333 | .frame a { 334 | pointer-events: auto; 335 | } 336 | .toggle { 337 | margin: 0 0 0 4rem; 338 | } 339 | .content { 340 | height: 100vh; 341 | justify-content: flex-end; 342 | } 343 | .content__title { 344 | font-size: 8.75vw; 345 | } 346 | } 347 | -------------------------------------------------------------------------------- /css/demo1.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'kionaregular'; 3 | src: url('../fonts/kiona-regular-webfont.woff') format('woff2'), 4 | url('../fonts/kiona-regular-webfont.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } 9 | 10 | @font-face { 11 | font-family: 'walkway_condensedregular'; 12 | src: url('../fonts/walkway_condensed-webfont.woff2') format('woff2'), 13 | url('../fonts/walkway_condensed-webfont.woff') format('woff'); 14 | font-weight: normal; 15 | font-style: normal; 16 | } 17 | 18 | body { 19 | font-family: 'kionaregular'; 20 | background-image: url(../img/1.jpg); 21 | } 22 | 23 | .content__credits { 24 | font-family: 'walkway_condensedregular'; 25 | letter-spacing: 1px; 26 | font-size: 1.15rem; 27 | } -------------------------------------------------------------------------------- /css/demo2.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'ferrite_coreregular'; 3 | src: url('../fonts/ferritecore-regular-webfont.woff2') format('woff2'), 4 | url('../fonts/ferritecore-regular-webfont.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | body { 10 | font-family: news-gothic-std, "Arial Narrow", sans-serif; 11 | background-image: url(../img/2.jpg); 12 | --color-title: #e972ff; 13 | } 14 | 15 | .intro { 16 | text-transform: uppercase; 17 | font-style: italic; 18 | } 19 | 20 | .content__subtitle { 21 | font-style: italic; 22 | } 23 | 24 | .content__title { 25 | font-family: 'ferrite_coreregular'; 26 | } 27 | 28 | .content__credits { 29 | font-style: italic; 30 | margin-top: 7rem; 31 | max-width: 40rem; 32 | } -------------------------------------------------------------------------------- /css/demo3.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: niveau-grotesk, sans-serif; 3 | background-image: url(../img/3.jpg); 4 | } 5 | 6 | .content__title { 7 | font-size: 10vw; 8 | } -------------------------------------------------------------------------------- /css/demo4.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'tall_films_expandedregular'; 3 | src: url('../fonts/tall_films_expanded-webfont.woff2') format('woff2'), 4 | url('../fonts/tall_films_expanded-webfont.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | body { 10 | font-family: news-gothic-std, "Arial Narrow", sans-serif; 11 | background-image: url(../img/4.jpg); 12 | } 13 | 14 | .content__subtitle { 15 | font-style: italic; 16 | } 17 | 18 | .content__title { 19 | font-size: 13vw; 20 | font-family: 'tall_films_expandedregular'; 21 | } 22 | 23 | .content__credits, 24 | .intro { 25 | font-family: 'tall_films_expandedregular'; 26 | } 27 | 28 | .content__credits { 29 | font-size: 1.25rem; 30 | } -------------------------------------------------------------------------------- /css/demo5.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'tall_dark_and_handsomeCn'; 3 | src: url('../fonts/talldark-webfont.woff2') format('woff2'), 4 | url('../fonts/talldark-webfont.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | @font-face { 10 | font-family: 'tall_films_expandedregular'; 11 | src: url('../fonts/tall_films_expanded-webfont.woff2') format('woff2'), 12 | url('../fonts/tall_films_expanded-webfont.woff') format('woff'); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | body { 18 | font-family: niveau-grotesk, sans-serif; 19 | background-image: url(../img/5.jpg); 20 | --color-title: #6bffde; 21 | --color-link: #6bffde; 22 | } 23 | 24 | .content__title { 25 | font-size: 8vw; 26 | font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; 27 | } 28 | 29 | .content__subtitle, 30 | .content__credits { 31 | font-size: 1.25rem; 32 | font-family: 'tall_films_expandedregular'; 33 | color: var(--color-title); 34 | } 35 | 36 | .content__subtitle { 37 | font-size: 2rem; 38 | } -------------------------------------------------------------------------------- /css/demo6.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: titling-gothic-fb, sans-serif; 3 | font-weight: 200; 4 | letter-spacing: 1px; 5 | font-size: 0.85rem; 6 | background-image: url(../img/6.jpg); 7 | --color-title: #ef2f60; 8 | } 9 | 10 | .content__title { 11 | -webkit-text-stroke: 2px var(--color-title); 12 | text-stroke: 2px var(--color-title); 13 | -webkit-text-fill-color: transparent; 14 | text-fill-color: transparent; 15 | color: transparent; 16 | font-size: 8vw; 17 | font-weight: 800; 18 | } 19 | 20 | .content__subtitle { 21 | font-size: 1.25rem; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /css/demo7.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: gill-sans-nova, sans-serif; 3 | background-image: url(../img/7.jpg); 4 | font-weight: 500; 5 | font-size: 0.85rem; 6 | --color-link: #c3c9fe; 7 | } 8 | 9 | .screen { 10 | text-transform: uppercase; 11 | } 12 | 13 | .content__title { 14 | font-size: 8vw; 15 | font-weight: 900; 16 | } 17 | 18 | .content__credits { 19 | color: var(--color-link); 20 | } 21 | -------------------------------------------------------------------------------- /css/demo8.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'kionaregular'; 3 | src: url('../fonts/kiona-regular-webfont.woff') format('woff2'), 4 | url('../fonts/kiona-regular-webfont.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } 9 | 10 | @font-face { 11 | font-family: 'walkway_condensedregular'; 12 | src: url('../fonts/walkway_condensed-webfont.woff2') format('woff2'), 13 | url('../fonts/walkway_condensed-webfont.woff') format('woff'); 14 | font-weight: normal; 15 | font-style: normal; 16 | } 17 | 18 | body { 19 | font-family: 'kionaregular'; 20 | background-image: url(../img/8.jpg); 21 | font-weight: 500; 22 | font-size: 0.85rem; 23 | --color-link: #d3e5fc; 24 | } 25 | 26 | .screen { 27 | text-transform: uppercase; 28 | } 29 | 30 | .content__title { 31 | font-size: 8vw; 32 | font-weight: 900; 33 | } 34 | 35 | .content__credits { 36 | font-family: 'walkway_condensedregular'; 37 | letter-spacing: 1px; 38 | font-size: 1.15rem; 39 | max-width: 42rem; 40 | } 41 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/favicon.ico -------------------------------------------------------------------------------- /fonts/ferritecore-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/ferritecore-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/ferritecore-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/ferritecore-regular-webfont.woff2 -------------------------------------------------------------------------------- /fonts/kiona-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/kiona-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/kiona-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/kiona-regular-webfont.woff2 -------------------------------------------------------------------------------- /fonts/tall_films_expanded-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/tall_films_expanded-webfont.woff -------------------------------------------------------------------------------- /fonts/tall_films_expanded-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/tall_films_expanded-webfont.woff2 -------------------------------------------------------------------------------- /fonts/talldark-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/talldark-webfont.woff -------------------------------------------------------------------------------- /fonts/talldark-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/talldark-webfont.woff2 -------------------------------------------------------------------------------- /fonts/walkway_condensed-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/walkway_condensed-webfont.woff -------------------------------------------------------------------------------- /fonts/walkway_condensed-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/fonts/walkway_condensed-webfont.woff2 -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/8.jpg -------------------------------------------------------------------------------- /img/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/clouds.jpg -------------------------------------------------------------------------------- /img/fibers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/fibers.jpg -------------------------------------------------------------------------------- /img/pointilize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/pointilize.jpg -------------------------------------------------------------------------------- /img/ripple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neundex/AudioBasedImageDistortion/210129ebf8fbdb666fb1ffefca0843e7c1be571f/img/ripple.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 28 |
29 |

Audio-based Image Distortion

30 |
31 | Previous Demo 32 | Article 33 | GitHub 34 |
35 |
36 | 1 37 | 2 38 | 3 39 | 4 40 | 5 41 | 6 42 | 7 43 | 8 44 |
45 | 49 |
50 |
51 |

An Onum Barr film

52 |

Substrate

53 |
Mechanic Sky Enterprises presents a Mechanic Sky production in association with Humanae Future an Onum Barr Film Susan Calvin Arkady Darell Lors Avakim Raych Seldon "Substrate" music by Danny Greehouse costume designer Laura Kenister visual effects supervisor Frederick Mounte editors Onum Barr Mark Singer production designer Andy Nichols director of photography Carol P. Wyonast written by Onum Barr produced by Onum Barr David Loyman directed by Onum Barr 54 |

Sponsored by Divi 55 |
56 |
57 |
58 |

59 | Mechanic Sky 60 | presents 61 |

62 |

63 | in association with 64 | Humanae Future 65 |

66 |
67 |
68 | Turn your sound on 69 | 70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Han Pritcher film

53 |

posthuman

54 |
Cubernetic Corporation presents a Cubernetic production in association with Bridge Entertainment a Han Pritcher film Susan Calvin Arkady Darell Lors Avakim Raych Seldon "Posthuman" music by Holly Feather costume designer Frank Bilderberg visual effects supervisor Jason Nesta editors Han Pritcher Arnold Jenister production designer Bill Hollister director of photography Allen Brick written by Han Pritcher produced by Han Pritcher David Reno directed by Han Pritcher 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Cubernetic 61 | presents 62 |

63 |

64 | in association with 65 | Bridge Entertainment 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Johan Lee film

53 |

Desolation

54 |
Nightcastle Dreams presents a Nightcastle production in association with Lonesome Riders a Johan Lee film Susan Calvin Arkady Darell Lors Avakim Raych Seldon "Solitude" music by Jane Ginsberg costume designer Serena Jacobs visual effects supervisor Louise Remington editors Johan Lee Fabian Koch production designer Soren Goldman director of photography Anastasia White written by Johan Lee produced by Johan Lee Helena Rubinstein directed by Johan Lee 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Nightcastle Dreams 61 | presents 62 |

63 |

64 | in association with 65 | Lonesome Riders 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Pia Vargas film

53 |

Insurrection

54 |
Junior Mechanics Association presents a Junior Mechanics production in association with Fable Toys a Pia Vargas film Frank Ortega Barbara Flores Carry Torres "Insurrection" music by Luna costume designer Maria Castro visual effects supervisor Mateo Garcia editors Pia Vargas Tyler Mendoza production designer Emilia Castillo director of photography Gabriella Reyes written by Pia Vargas produced by Pia Vargas Sofia Ortiz directed by Pia Vargas 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Junior Mechanics 61 | presents 62 |

63 |

64 | in association with 65 | Fable Toys 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Lars Avakim film

53 |

Incommunicado

54 |
Crazy Carousel Association presents a Crazy Carousel production in association with Broken Hell a Lars Avakim film Rebecca Freeman Jason Bacon "Incommunicado" music by Orlando Waters costume designer Christian Waldorf visual effects supervisor Herbert Costa editors Lars Avakim Sindia Crostin production designer Albert Mann director of photography Ken Gustaffson written by Lars Avakim produced by Lars Avakim Ursula Koch directed by Lars Avakim 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Crazy Carousel 61 | presents 62 |

63 |

64 | in association with 65 | Broken Hell 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 6 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Lars Avakim film

53 |

Uprising

54 |
Pandora State Association presents a Pandora State production in association with Nemesis Festival a Lars Avakim film Rebecca Freeman Jason Bacon "Incommunicado" music by Orlando Waters costume designer Christian Waldorf visual effects supervisor Herbert Costa editors Lars Avakim Sindia Crostin production designer Albert Mann director of photography Ken Gustaffson written by Lars Avakim produced by Lars Avakim Ursula Koch directed by Lars Avakim 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Pandora State 61 | presents 62 |

63 |

64 | in association with 65 | Nemesis Festival 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 6 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Eugenia Sol film

53 |

Imminence

54 |
Green Eyes Entertainment presents a Green Eyes production in association with Doomsday Pictures a Eugenia Sol film Jody Trust Francis Belladonna "Imminence" music by Jesse Chair costume designer Lola Osteria visual effects supervisor Henrietta Frank editors Eugenia Sol Jason Schaltz production designer Andrew Schumann director of photography Franklin Thunder written by Eugenia Sol produced by Eugenia Sol Lavinia Piaretta directed by Eugenia Sol 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Green Eyes Entertainment 61 | presents 62 |

63 |

64 | in association with 65 | Doomsday Pictures 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Audio-based Image Distortion | Demo 8 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 |
30 |

Audio-based Image Distortion

31 |
32 | Previous Demo 33 | Article 34 | GitHub 35 |
36 |
37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 |
46 | 50 |
51 |
52 |

A Mika Vario film

53 |

Konstellaatio

54 |
Sami Kombinaatti presents a Rude Mechanic production in association with Kuopio Pictures a Mika Vario film Konstellaatio music by Onko costume designer Kajo visual effects supervisor Frank Oleva editors Eugenia Sol Jason Schaltz production designer Schumann Vakio director of photography Franklin Thunder written by Mika Vario produced by Lavinia Kesto directed by Mika Vario 55 |

Sponsored by Divi 56 |
57 |
58 |
59 |

60 | Sami Kombinaatti 61 | presents 62 |

63 |

64 | in association with 65 | Rude Mechanic 66 |

67 |
68 |
69 | Turn your sound on 70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /js/demo1.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo1Shader, img, fft, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo1.mp3') 6 | demo1Shader = p.loadShader('shaders/base.vert', 'shaders/d1.frag') 7 | img = p.loadImage('img/1.jpg') 8 | } 9 | 10 | p.setup = () => { 11 | playBtn = document.querySelector('#play-btn') 12 | playBtn.addEventListener('click', () => { 13 | document.body.classList.add('start-anim') 14 | audio.loop() 15 | }) 16 | 17 | p.pixelDensity(1) 18 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 19 | 20 | toggleBtn = document.querySelector('#toggle-btn') 21 | toggleBtn.addEventListener('click', () => { 22 | toggleBtn.classList.toggle('toggle--on') 23 | this.toggleAudio() 24 | }) 25 | 26 | fft = new p5.FFT() 27 | p.shader(demo1Shader) 28 | 29 | demo1Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 30 | demo1Shader.setUniform('u_texture', img) 31 | demo1Shader.setUniform('u_tResolution', [img.width, img.height]) 32 | } 33 | 34 | p.draw = () => { 35 | fft.analyze() 36 | 37 | const bass = fft.getEnergy("bass") 38 | const treble = fft.getEnergy("treble") 39 | const mid = fft.getEnergy("mid") 40 | 41 | const mapBass = p.map(bass, 0, 255, 10, 15.0) 42 | const mapTremble = p.map(treble, 0, 255, 0, 0.0) 43 | const mapMid = p.map(mid, 0, 255, 0.0, 0.1) 44 | 45 | demo1Shader.setUniform('u_time', p.frameCount / 20) 46 | demo1Shader.setUniform('u_bass', mapBass) 47 | demo1Shader.setUniform('u_tremble', mapTremble) 48 | demo1Shader.setUniform('u_mid', mapMid) 49 | 50 | p.rect(0,0, p.width, p.height) 51 | } 52 | 53 | p.windowResized = () => { 54 | p.resizeCanvas(p.windowWidth, p.windowHeight) 55 | demo1Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 56 | } 57 | 58 | toggleAudio = () => { 59 | if (audio.isPlaying()) { 60 | audio.pause() 61 | } else { 62 | audio.loop() 63 | } 64 | } 65 | }; 66 | 67 | new p5(s) -------------------------------------------------------------------------------- /js/demo2.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo2Shader, img, d_map, fft, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | //audio = p.loadSound('audio/d18_3.mp3'); 6 | audio = p.loadSound('audio/demo2.mp3') 7 | demo2Shader = p.loadShader('shaders/base.vert', 'shaders/d2.frag') 8 | img = p.loadImage('img/2.jpg') 9 | d_map = p.loadImage('img/clouds.jpg') 10 | } 11 | 12 | p.setup = () => { 13 | playBtn = document.querySelector('#play-btn') 14 | playBtn.addEventListener('click', () => { 15 | document.body.classList.add('start-anim') 16 | audio.loop() 17 | }) 18 | 19 | p.pixelDensity(1) 20 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 21 | 22 | toggleBtn = document.querySelector('#toggle-btn') 23 | toggleBtn.addEventListener('click', () => { 24 | toggleBtn.classList.toggle('toggle--on') 25 | this.toggleAudio() 26 | }) 27 | 28 | fft = new p5.FFT() 29 | p.shader(demo2Shader) 30 | demo2Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 31 | demo2Shader.setUniform('d_map', d_map) 32 | demo2Shader.setUniform('img', img) 33 | demo2Shader.setUniform('texRes', [img.width, img.height]) 34 | } 35 | 36 | p.draw = () => { 37 | p.background(0) 38 | 39 | fft.analyze() 40 | 41 | const bass = fft.getEnergy("bass") 42 | const treble = fft.getEnergy("treble") 43 | const mid = fft.getEnergy("highMid") 44 | const lowMid = fft.getEnergy("mid") 45 | 46 | const mapBass = p.map(bass, 0, 255, 0.0, 0.04) 47 | const mapMid = p.map(mid, 0, 30, 0.0, 0.8) 48 | const mapLowMid = p.map(lowMid, 0, 60, 0.0, 0.4) 49 | 50 | const tc = p.map(audio.currentTime(), 0, audio.duration(), 1.0, 1.0) 51 | demo2Shader.setUniform('u_time', tc) 52 | demo2Shader.setUniform('u_bass', mapBass) 53 | demo2Shader.setUniform('u_mid', mapMid) 54 | demo2Shader.setUniform('u_lowmid', mapLowMid) 55 | 56 | p.rect(0, 0 , p.width, p.height) 57 | } 58 | 59 | p.windowResized = () => { 60 | p.resizeCanvas(p.windowWidth, p.windowHeight) 61 | demo2Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 62 | } 63 | 64 | toggleAudio = () => { 65 | if (audio.isPlaying()) { 66 | audio.pause() 67 | } else { 68 | audio.loop() 69 | } 70 | } 71 | }; 72 | 73 | new p5(s) -------------------------------------------------------------------------------- /js/demo3.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo3Shader, img, fft, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo3.mp3') 6 | demo3Shader = p.loadShader('shaders/base.vert', 'shaders/d3.frag') 7 | img = p.loadImage('img/3.jpg') 8 | } 9 | 10 | p.setup = () => { 11 | playBtn = document.querySelector('#play-btn') 12 | playBtn.addEventListener('click', () => { 13 | document.body.classList.add('start-anim') 14 | audio.loop() 15 | }) 16 | 17 | p.pixelDensity(1) 18 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 19 | 20 | toggleBtn = document.querySelector('#toggle-btn') 21 | toggleBtn.addEventListener('click', () => { 22 | toggleBtn.classList.toggle('toggle--on') 23 | this.toggleAudio() 24 | }) 25 | 26 | fft = new p5.FFT() 27 | p.shader(demo3Shader) 28 | demo3Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 29 | demo3Shader.setUniform('u_texture', img) 30 | demo3Shader.setUniform('u_tResolution', [img.width, img.height]) 31 | } 32 | 33 | p.draw = () => { 34 | fft.analyze(); 35 | 36 | const bass = fft.getEnergy("bass") 37 | const treble = fft.getEnergy("treble") 38 | const mid = fft.getEnergy("mid") 39 | 40 | const mapBass = p.map(bass, 0, 255, 0, 15.0) 41 | const mapTremble = p.map(treble, 0, 255, 0, 0.0) 42 | const mapMid = p.map(mid, 0, 255, 0.0, 0.2) 43 | 44 | demo3Shader.setUniform('u_time', p.frameCount / 20) 45 | demo3Shader.setUniform('u_bass', mapBass) 46 | demo3Shader.setUniform('u_tremble', mapTremble) 47 | demo3Shader.setUniform('u_mid', mapMid) 48 | 49 | p.rect(0,0, p.width, p.height) 50 | } 51 | 52 | p.windowResized = () => { 53 | p.resizeCanvas(p.windowWidth, p.windowHeight); 54 | demo3Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 55 | } 56 | 57 | toggleAudio = () => { 58 | if (audio.isPlaying()) { 59 | audio.pause() 60 | } else { 61 | audio.loop() 62 | } 63 | } 64 | }; 65 | 66 | new p5(s) -------------------------------------------------------------------------------- /js/demo4.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo4Shader, img, d_map, fft, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo4.mp3') 6 | demo4Shader = p.loadShader('shaders/base.vert', 'shaders/d4.frag') 7 | img = p.loadImage('img/4.jpg') 8 | d_map = p.loadImage('img/clouds.jpg') 9 | } 10 | 11 | p.setup = () => { 12 | playBtn = document.querySelector('#play-btn') 13 | playBtn.addEventListener('click', () => { 14 | document.body.classList.add('start-anim') 15 | audio.loop() 16 | }) 17 | 18 | p.pixelDensity(1) 19 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 20 | 21 | toggleBtn = document.querySelector('#toggle-btn') 22 | toggleBtn.addEventListener('click', () => { 23 | toggleBtn.classList.toggle('toggle--on') 24 | this.toggleAudio() 25 | }) 26 | 27 | fft = new p5.FFT() 28 | p.shader(demo4Shader) 29 | demo4Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 30 | demo4Shader.setUniform('d_map', d_map) 31 | demo4Shader.setUniform('img', img) 32 | demo4Shader.setUniform('u_tResolution', [img.width, img.height]) 33 | } 34 | 35 | p.draw = () => { 36 | p.background(0) 37 | 38 | fft.analyze() 39 | 40 | const bass = fft.getEnergy("bass") 41 | const treble = fft.getEnergy("treble") 42 | const mid = fft.getEnergy("mid") 43 | 44 | const mapBass = p.map(bass, 0, 255, 0, 0.02) 45 | const mapMid = p.map(mid, 0, 70, 0, 10.001) 46 | 47 | // let fc = p.map(p.frameCount, 0, 1000, 0.0, 2.5) 48 | const tc = p.map(audio.currentTime(), 0, audio.duration(), 2.0, 2.0) 49 | demo4Shader.setUniform('u_time', tc) 50 | demo4Shader.setUniform('u_bass', mapBass) 51 | demo4Shader.setUniform('u_mid', mapMid) 52 | 53 | p.rect(0, 0 , p.width, p.height) 54 | } 55 | 56 | p.windowResized = () => { 57 | p.resizeCanvas(p.windowWidth, p.windowHeight) 58 | demo4Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 59 | } 60 | 61 | toggleAudio = () => { 62 | if (audio.isPlaying()) { 63 | audio.pause() 64 | } else { 65 | audio.loop() 66 | } 67 | } 68 | }; 69 | 70 | new p5(s) -------------------------------------------------------------------------------- /js/demo5.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo5Shader, img, fft, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo5.mp3') 6 | demo5Shader = p.loadShader('shaders/base.vert', 'shaders/d5.frag') 7 | img = p.loadImage('img/5.jpg') 8 | } 9 | 10 | p.setup = () => { 11 | playBtn = document.querySelector('#play-btn') 12 | playBtn.addEventListener('click', () => { 13 | document.body.classList.add('start-anim') 14 | audio.loop() 15 | }) 16 | 17 | p.pixelDensity(1) 18 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 19 | 20 | toggleBtn = document.querySelector('#toggle-btn') 21 | toggleBtn.addEventListener('click', () => { 22 | toggleBtn.classList.toggle('toggle--on') 23 | this.toggleAudio() 24 | }) 25 | 26 | fft = new p5.FFT() 27 | p.shader(demo5Shader) 28 | 29 | demo5Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 30 | demo5Shader.setUniform('u_texture', img) 31 | demo5Shader.setUniform('u_tResolution', [img.width, img.height]) 32 | } 33 | 34 | p.draw = () => { 35 | fft.analyze() 36 | 37 | const bass = fft.getEnergy("bass") 38 | const treble = fft.getEnergy("treble") 39 | const mid = fft.getEnergy("mid") 40 | 41 | const mapBass = p.map(bass, 0, 150, 0, 13.0) 42 | const mapTremble = p.map(treble, 0, 255, 0, 0.5) 43 | const mapMid = p.map(mid, 0, 255, 0.0, 0.1) 44 | 45 | demo5Shader.setUniform('u_time', p.frameCount / 8) 46 | demo5Shader.setUniform('u_bass', mapBass) 47 | demo5Shader.setUniform('u_tremble', mapTremble) 48 | demo5Shader.setUniform('u_mid', mapMid) 49 | 50 | p.rect(0,0, p.width, p.height) 51 | } 52 | 53 | p.windowResized = () => { 54 | p.resizeCanvas(p.windowWidth, p.windowHeight) 55 | demo5Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 56 | } 57 | 58 | toggleAudio = () => { 59 | if (audio.isPlaying()) { 60 | audio.pause() 61 | } else { 62 | audio.loop() 63 | } 64 | } 65 | }; 66 | 67 | new p5(s) -------------------------------------------------------------------------------- /js/demo6.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo6Shader, img, fft, audio, toggleBtn; 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo6.mp3') 6 | demo6Shader = p.loadShader('shaders/base.vert', 'shaders/d6.frag') 7 | img = p.loadImage('img/6.jpg') 8 | } 9 | 10 | p.setup = () => { 11 | playBtn = document.querySelector('#play-btn') 12 | playBtn.addEventListener('click', () => { 13 | document.body.classList.add('start-anim') 14 | audio.loop() 15 | }) 16 | 17 | p.pixelDensity(1) 18 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 19 | 20 | toggleBtn = document.querySelector('#toggle-btn') 21 | toggleBtn.addEventListener('click', () => { 22 | toggleBtn.classList.toggle('toggle--on') 23 | this.toggleAudio() 24 | }) 25 | 26 | fft = new p5.FFT() 27 | p.shader(demo6Shader) 28 | 29 | demo6Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 30 | demo6Shader.setUniform('u_texture', img) 31 | demo6Shader.setUniform('u_tResolution', [img.width, img.height]) 32 | } 33 | 34 | p.draw = () => { 35 | fft.analyze() 36 | 37 | const bass = fft.getEnergy("bass") 38 | const treble = fft.getEnergy("treble") 39 | const mid = fft.getEnergy("mid") 40 | 41 | const mapBass = p.map(bass, 0, 255, 10, 15.0) 42 | const mapTremble = p.map(treble, 0, 255, 0, 0.0) 43 | const mapMid = p.map(mid, 0, 255, 0.0, 0.1) 44 | 45 | demo6Shader.setUniform('u_time', p.frameCount / 20) 46 | demo6Shader.setUniform('u_bass', mapBass) 47 | demo6Shader.setUniform('u_tremble', mapTremble) 48 | demo6Shader.setUniform('u_mid', mapMid) 49 | 50 | p.rect(0,0, p.width, p.height); 51 | } 52 | 53 | p.windowResized = () => { 54 | p.resizeCanvas(p.windowWidth, p.windowHeight) 55 | demo6Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 56 | } 57 | 58 | toggleAudio = () => { 59 | if (audio.isPlaying()) { 60 | audio.pause() 61 | } else { 62 | audio.loop() 63 | } 64 | } 65 | }; 66 | 67 | new p5(s) -------------------------------------------------------------------------------- /js/demo7.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo7Shader, img, fft, audio, toggleBtn; 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo7.mp3') 6 | demo7Shader = p.loadShader('shaders/base.vert', 'shaders/d3.frag') 7 | img = p.loadImage('img/7.jpg') 8 | } 9 | 10 | p.setup = () => { 11 | playBtn = document.querySelector('#play-btn') 12 | playBtn.addEventListener('click', () => { 13 | document.body.classList.add('start-anim') 14 | audio.loop() 15 | }) 16 | 17 | p.pixelDensity(1) 18 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 19 | 20 | toggleBtn = document.querySelector('#toggle-btn') 21 | toggleBtn.addEventListener('click', () => { 22 | toggleBtn.classList.toggle('toggle--on') 23 | this.toggleAudio() 24 | }) 25 | 26 | fft = new p5.FFT() 27 | p.shader(demo7Shader) 28 | 29 | demo7Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 30 | demo7Shader.setUniform('u_texture', img) 31 | demo7Shader.setUniform('u_tResolution', [img.width, img.height]) 32 | } 33 | 34 | p.draw = () => { 35 | fft.analyze() 36 | 37 | const bass = fft.getEnergy("bass") 38 | const treble = fft.getEnergy("treble") 39 | const mid = fft.getEnergy("mid") 40 | 41 | const mapBass = p.map(bass, 0, 255, 0.0, 2.0) 42 | const mapTremble = p.map(treble, 0, 255, 10.0, 10.0) 43 | const mapMid = p.map(mid, 0, 255, 0.0, 0.05) 44 | 45 | demo7Shader.setUniform('u_time', p.frameCount / 20.0) 46 | demo7Shader.setUniform('u_bass', mapBass) 47 | demo7Shader.setUniform('u_mid', mapMid) 48 | 49 | p.rect(0,0, p.width, p.height) 50 | } 51 | 52 | p.windowResized = () => { 53 | p.resizeCanvas(p.windowWidth, p.windowHeight) 54 | demo7Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 55 | } 56 | 57 | toggleAudio = () => { 58 | if (audio.isPlaying()) { 59 | audio.pause() 60 | } else { 61 | audio.loop() 62 | } 63 | } 64 | }; 65 | 66 | new p5(s) -------------------------------------------------------------------------------- /js/demo8.js: -------------------------------------------------------------------------------- 1 | const s = (p) => { 2 | let demo8Shader, img, fft, d_map, audio, toggleBtn 3 | 4 | p.preload = () => { 5 | audio = p.loadSound('audio/demo8.mp3') 6 | demo8Shader = p.loadShader('shaders/base.vert', 'shaders/d8.frag') 7 | img = p.loadImage('img/8.jpg') 8 | d_map = p.loadImage('img/clouds.jpg') 9 | } 10 | 11 | p.setup = () => { 12 | playBtn = document.querySelector('#play-btn') 13 | playBtn.addEventListener('click', () => { 14 | document.body.classList.add('start-anim') 15 | audio.loop() 16 | }) 17 | 18 | p.pixelDensity(1) 19 | p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL) 20 | 21 | toggleBtn = document.querySelector('#toggle-btn') 22 | toggleBtn.addEventListener('click', () => { 23 | toggleBtn.classList.toggle('toggle--on') 24 | this.toggleAudio() 25 | }) 26 | 27 | fft = new p5.FFT() 28 | p.shader(demo8Shader) 29 | 30 | demo8Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 31 | demo8Shader.setUniform('d_map', d_map) 32 | demo8Shader.setUniform('u_texture', img) 33 | demo8Shader.setUniform('u_tResolution', [img.width, img.height]) 34 | } 35 | 36 | p.draw = () => { 37 | fft.analyze() 38 | 39 | const bass = fft.getEnergy("bass") 40 | const treble = fft.getEnergy("treble") 41 | const mid = fft.getEnergy("mid") 42 | 43 | const mapBass = p.map(bass, 0, 255, 5, 10.0) 44 | const mapTremble = p.map(treble, 0, 255, 0, 0.0) 45 | const mapMid = p.map(mid, 0, 255, 0.0, 0.1) 46 | 47 | demo8Shader.setUniform('u_time', p.frameCount / 20) 48 | demo8Shader.setUniform('u_bass', mapBass) 49 | demo8Shader.setUniform('u_tremble', mapTremble) 50 | demo8Shader.setUniform('u_mid', mapMid) 51 | 52 | p.rect(0,0, p.width, p.height) 53 | } 54 | 55 | p.windowResized = () => { 56 | p.resizeCanvas(p.windowWidth, p.windowHeight) 57 | demo8Shader.setUniform('u_resolution', [p.windowWidth, p.windowHeight]) 58 | } 59 | 60 | toggleAudio = () => { 61 | if (audio.isPlaying()) { 62 | audio.pause() 63 | } else { 64 | audio.loop() 65 | } 66 | } 67 | }; 68 | 69 | new p5(s) -------------------------------------------------------------------------------- /shaders/base.vert: -------------------------------------------------------------------------------- 1 | attribute vec3 aPosition; 2 | attribute vec2 aTexCoord; 3 | varying vec2 vTexCoord; 4 | 5 | void main() { 6 | vTexCoord = aTexCoord; 7 | 8 | vec4 positionVec4 = vec4(aPosition, 1.0); 9 | positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 10 | 11 | gl_Position = positionVec4; 12 | } -------------------------------------------------------------------------------- /shaders/d1.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform float u_time; 7 | uniform vec2 u_resolution; 8 | uniform vec2 u_tResolution; 9 | uniform sampler2D u_texture; 10 | uniform float u_bass; 11 | uniform float u_tremble; 12 | uniform float u_mid; 13 | 14 | mat2 scale(vec2 _scale){ 15 | return mat2(_scale.x,0.0, 16 | 0.0,_scale.y); 17 | } 18 | 19 | void main() { 20 | vec2 ratio = vec2( 21 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 22 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 23 | ); 24 | 25 | vec2 uv = vec2( 26 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 27 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 28 | ); 29 | 30 | uv.y = 1.0 - uv.y; 31 | 32 | uv -= vec2(0.5); 33 | uv = scale(vec2(0.91)) * uv; 34 | uv += vec2(0.5); 35 | 36 | float wave_x = sin(uv.x * u_bass + u_time) * u_mid; 37 | float wave_y = sin(uv.y * u_bass / 2.0) * u_mid; 38 | vec2 d = vec2(wave_x, wave_y); 39 | 40 | vec4 image = texture2D(u_texture, uv + d); 41 | 42 | gl_FragColor = image; 43 | } -------------------------------------------------------------------------------- /shaders/d2.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform sampler2D d_map; 7 | uniform sampler2D img; 8 | uniform float u_bass; 9 | uniform float u_mid; 10 | uniform float u_time; 11 | uniform vec2 u_resolution; 12 | uniform vec2 texRes; 13 | uniform float u_lowmid; 14 | 15 | mat2 scale(vec2 _scale){ 16 | return mat2(_scale.x,0.0, 17 | 0.0,_scale.y); 18 | } 19 | 20 | void main() { 21 | 22 | vec2 ratio = vec2( 23 | min((u_resolution.x / u_resolution.y) / (texRes.x / texRes.y), 1.0), 24 | min((u_resolution.y / u_resolution.x) / (texRes.y / texRes.x), 1.0) 25 | ); 26 | 27 | vec2 uv = vec2( 28 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 29 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 30 | ); 31 | 32 | uv.y = 1.0 - uv.y; 33 | 34 | vec2 uvt = uv; 35 | 36 | vec2 translate = vec2(cos(u_mid),sin(u_mid)); 37 | uvt += translate * 0.5; 38 | 39 | vec4 t = texture2D(d_map, uvt); 40 | 41 | float d = dot(t.rgb, vec3(u_time)); 42 | float disp = d * u_bass; 43 | float disp_2 = d * u_mid; 44 | 45 | uv -= vec2(0.5); 46 | uv = scale(2.0 - vec2(sin(disp)+1.0)) * uv; 47 | uv += vec2(0.5); 48 | 49 | vec2 mir = uv; 50 | vec4 f = texture2D(img, mir); 51 | 52 | // output the image 53 | gl_FragColor = f; 54 | } -------------------------------------------------------------------------------- /shaders/d3.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform sampler2D u_texture; 7 | uniform vec2 u_resolution; 8 | uniform float u_bass; 9 | uniform float u_time; 10 | uniform float u_mid; 11 | uniform vec2 u_tResolution; 12 | 13 | mat2 scale(vec2 _scale){ 14 | return mat2(_scale.x,0.0, 15 | 0.0,_scale.y); 16 | } 17 | 18 | void main() { 19 | 20 | vec2 ratio = vec2( 21 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 22 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 23 | ); 24 | 25 | vec2 uv = vec2( 26 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 27 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 28 | ); 29 | 30 | uv = 1.0 - uv; 31 | 32 | uv -= vec2(0.5); 33 | uv = scale(vec2(0.91)) * uv; 34 | uv += vec2(0.5); 35 | 36 | float wave = sin(((uv.x * 2.0) - 1.0) * u_bass) * u_mid; 37 | vec2 d = vec2(wave, 0.001); 38 | 39 | 40 | vec4 red = texture2D(u_texture, uv - d); 41 | vec4 green = texture2D(u_texture, uv + d); 42 | vec4 blue = texture2D(u_texture, uv - d); 43 | 44 | vec4 color = vec4(red.r, green.g, blue.b, 1.0); 45 | 46 | gl_FragColor = color; 47 | } -------------------------------------------------------------------------------- /shaders/d4.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform sampler2D d_map; 7 | uniform sampler2D img; 8 | uniform float u_bass; 9 | uniform float u_mid; 10 | uniform float u_time; 11 | uniform vec2 u_resolution; 12 | uniform vec2 u_tResolution; 13 | 14 | void main() { 15 | 16 | vec2 ratio = vec2( 17 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 18 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 19 | ); 20 | 21 | vec2 uv = vec2( 22 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 23 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 24 | ); 25 | 26 | uv.y = 1.0 - uv.y; 27 | 28 | vec4 texture = texture2D(d_map, uv); 29 | 30 | float d = dot(texture.rgb, vec3(u_time)); 31 | float disp = d * u_bass; 32 | float disp_2 = d * u_mid; 33 | 34 | uv.y += disp; 35 | 36 | vec4 image = texture2D(img, uv); 37 | 38 | gl_FragColor = image; 39 | } -------------------------------------------------------------------------------- /shaders/d5.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform float u_time; 7 | uniform vec2 u_resolution; 8 | uniform sampler2D u_texture; 9 | uniform float u_bass; 10 | uniform float u_tremble; 11 | uniform float u_mid; 12 | uniform vec2 u_tResolution; 13 | 14 | mat2 scale(vec2 _scale){ 15 | return mat2(_scale.x,0.0, 16 | 0.0,_scale.y); 17 | } 18 | 19 | void main() { 20 | vec2 ratio = vec2( 21 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 22 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 23 | ); 24 | 25 | vec2 uv = vec2( 26 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 27 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 28 | ); 29 | 30 | uv.y = 1.0 - uv.y; 31 | 32 | uv -= vec2(0.5); 33 | uv = scale(vec2(0.88)) * uv; 34 | uv += vec2(0.5); 35 | 36 | float wave = sin(uv.x * u_bass + u_time) * u_mid; 37 | 38 | vec2 d = vec2(wave * 1.9, wave / 1.5); 39 | vec4 image = texture2D(u_texture, uv + d); 40 | 41 | gl_FragColor = image; 42 | } -------------------------------------------------------------------------------- /shaders/d6.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform vec2 u_resolution; 7 | uniform sampler2D u_texture; 8 | uniform float u_time; 9 | uniform vec2 u_tResolution; 10 | uniform float u_bass; 11 | uniform float u_tremble; 12 | uniform float u_mid; 13 | 14 | mat2 scale(vec2 _scale){ 15 | return mat2(_scale.x,0.0, 16 | 0.0,_scale.y); 17 | } 18 | 19 | void main() { 20 | vec2 ratio = vec2( 21 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 22 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 23 | ); 24 | 25 | vec2 uv = vec2( 26 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 27 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 28 | ); 29 | 30 | uv.y = 1.0 - uv.y; 31 | 32 | uv -= vec2(0.5); 33 | uv = scale(vec2(0.92)) * uv; 34 | uv += vec2(0.5); 35 | 36 | float wave = sin(uv.y * u_bass + u_time) * u_mid; 37 | vec2 d = vec2(wave); 38 | vec4 image = texture2D(u_texture, uv + d); 39 | 40 | gl_FragColor = image; 41 | } -------------------------------------------------------------------------------- /shaders/d8.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | varying vec2 vTexCoord; 6 | uniform vec2 u_resolution; 7 | uniform sampler2D u_texture; 8 | uniform float u_time; 9 | uniform vec2 u_tResolution; 10 | uniform float u_bass; 11 | uniform float u_tremble; 12 | uniform float u_mid; 13 | 14 | mat2 scale(vec2 _scale){ 15 | return mat2(_scale.x,0.0, 16 | 0.0,_scale.y); 17 | } 18 | 19 | void main() { 20 | vec2 ratio = vec2( 21 | min((u_resolution.x / u_resolution.y) / (u_tResolution.x / u_tResolution.y), 1.0), 22 | min((u_resolution.y / u_resolution.x) / (u_tResolution.y / u_tResolution.x), 1.0) 23 | ); 24 | 25 | vec2 uv = vec2( 26 | vTexCoord.x * ratio.x + (1.0 - ratio.x) * 0.5, 27 | vTexCoord.y * ratio.y + (1.0 - ratio.y) * 0.5 28 | ); 29 | 30 | uv.y = 1.0 - uv.y; 31 | 32 | uv -= vec2(0.5); 33 | uv = scale(vec2(0.91)) * uv; 34 | uv += vec2(0.5); 35 | 36 | float wave = sin(uv.y * u_bass + u_time) * u_mid; 37 | vec2 d = vec2(wave); 38 | vec4 image = texture2D(u_texture, uv + d); 39 | 40 | gl_FragColor = image; 41 | } --------------------------------------------------------------------------------