[
  {
    "path": ".gitignore",
    "content": "node_modules\n.cache\n.parcel-cache\npackage-lock.json\ndist/\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Distorted Pixels\n\nDistorting pixels with DataTexture, based on [Infinite Bad Guy website](https://billie.withyoutube.com/)\n\n![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/01/DistrotedPixels_feat.jpg)\n\n[Article on Codrops](https://tympanus.net/codrops/?p=)\n\n[Demo](http://tympanus.net/Development/DistortedPixels/)\n\n\n## Installation\n\nInstall dependencies:\n\n```\nnpm install\n```\n\nCompile the code for development and start a local server:\n\n```\nnpx parcel index.html\n```\n\nCreate the build:\n\n```\nnpx parcel build index.html\n```\n\n## Credits\n\n- Images from [Unsplash](https://unsplash.com/)\n\n## Misc\n\nFollow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)\n\n## License\n[MIT](LICENSE)\n\nMade with :blue_heart:  by [Codrops](http://www.codrops.com)\n\n\n\n\n\n"
  },
  {
    "path": "css/base.css",
    "content": "*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 18px;\r\n}\r\n\r\nbody {\r\n\tmargin: 0;\r\n\t--color-text: #fff;\r\n\t--color-bg: #000;\r\n\t--color-link: #c63643;\r\n\t--color-link-hover: #fff;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\tfont-family: mono45-headline, monospace;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.demo-2 {\r\n\t--color-link: #b95e5d;\r\n}\r\n\r\n.demo-3 {\r\n\t--color-link: #f7bcac;\r\n}\r\n\r\n.demo-4 {\r\n\t--color-link: #bf8b5b;\r\n}\r\n\r\n.lil-gui {\r\n\tvisibility: hidden;\r\n}\r\n\r\n.demo-4 .lil-gui {\r\n\tvisibility: visible;\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before,\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n}\r\n\r\n.js .loading::before {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: var(--color-bg);\r\n}\r\n\r\n.js .loading::after {\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n\tmargin: -30px 0 0 -30px;\r\n\tborder-radius: 50%;\r\n\topacity: 0.4;\r\n\tbackground: var(--color-link);\r\n\tanimation: loaderAnim 0.7s linear infinite alternate forwards;\r\n\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(0.5,0.5,1);\r\n\t}\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-link);\r\n\toutline: none;\r\n}\r\n\r\na:hover {\r\n\tcolor: var(--color-link-hover);\r\n\toutline: none;\r\n}\r\n\r\n/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */\r\na:focus {\r\n\t/* Provide a fallback style for browsers\r\n\t that don't support :focus-visible */\r\n\toutline: none;\r\n\tbackground: lightgrey;\r\n}\r\n\r\na:focus:not(:focus-visible) {\r\n\t/* Remove the focus indicator on mouse-focus for browsers\r\n\t that do support :focus-visible */\r\n\tbackground: transparent;\r\n}\r\n\r\na:focus-visible {\r\n\t/* Draw a very noticeable focus style for\r\n\t keyboard-focus on browsers that do support\r\n\t :focus-visible */\r\n\toutline: 2px solid red;\r\n\tbackground: transparent;\r\n}\r\n\r\n.unbutton {\r\n\tbackground: none;\r\n\tborder: 0;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont: inherit;\r\n}\r\n\r\n.unbutton:focus {\r\n\toutline: none;\r\n}\r\n\r\n.frame {\r\n\tpadding: 3rem 5vw;\r\n\ttext-align: center;\r\n\tposition: relative;\r\n\tz-index: 1000;\r\n}\r\n\r\n.frame__title {\r\n\tfont-size: 1rem;\r\n\tmargin: 0 0 1rem;\r\n\tfont-weight: normal;\r\n}\r\n\r\n.frame__links {\r\n\tdisplay: inline;\r\n}\r\n\r\n.frame__links a:not(:last-child),\r\n.frame__demos a:not(:last-child) {\r\n\tmargin-right: 1rem;\r\n}\r\n\r\n.frame__demos {\r\n\tmargin: 1rem 0;\r\n}\r\n\r\n.frame__demo--current,\r\n.frame__demo--current:hover {\r\n\tcolor: var(--color-text);\r\n}\r\n\r\n.content {\r\n\tdisplay: grid;\r\n\twidth: 100vw;\r\n\theight: calc(100vh - 13rem);\r\n\tposition: relative;\r\n\tpadding: 3rem;\r\n}\r\n\r\n.content__title {\r\n\tfont-family: mono45-headline, monospace;\r\n\tfont-size: 13vw;\r\n\tline-height: 1;\r\n\tcolor: #fff;\r\n\tmax-width: 50vw;\r\n\tfont-weight: 400;\r\n\tmargin: 0;\r\n\talign-self: center;\r\n\tpointer-events: none;\r\n}\r\n\r\n.content__title--centered {\r\n\ttext-align: center;\r\n\tjustify-self: center;\r\n}\r\n\r\n.content__title--style-1 {\r\n\tfont-family: new-order, sans-serif;\r\n\tfont-weight: 400;\r\n\tfont-size: 10vw;\r\n\tline-height: 0.85;\r\n\tbackground: linear-gradient(90deg, #e9a680 0%,#992d46 50%, #064cb5 100%);;\r\n    background-size: cover;\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    text-fill-color: transparent;\r\n}\r\n\r\n.content__title--style-2 {\r\n\tfont-family: bely-display, serif;\r\n\tfont-weight: 400;\r\n\tfont-size: 10vw;\r\n\topacity: 0.7;\r\n\tline-height: 0.8;\r\n}\r\n\r\n\r\n@media screen and (min-width: 53em) {\r\n\t.frame {\r\n\t\tposition: fixed;\r\n\t\ttext-align: left;\r\n\t\tz-index: 100;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tdisplay: grid;\r\n\t\talign-content: space-between;\r\n\t\twidth: 100%;\r\n\t\tmax-width: none;\r\n\t\theight: 100vh;\r\n\t\tpadding: 1.5rem 3.35rem;\r\n\t\tpointer-events: none;\r\n\t\tgrid-template-columns: auto 1fr;\r\n\t\tgrid-template-rows: auto auto auto;\r\n\t\tgrid-template-areas: 'title ...'\r\n\t\t\t\t\t\t\t'... ...'\r\n\t\t\t\t\t\t\t'links demos';\r\n\t}\r\n\t.frame__title-wrap {\r\n\t\tgrid-area: title;\r\n\t\tdisplay: flex;\r\n\t}\r\n\t.frame__title {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.frame__tagline {\r\n\t\tposition: relative;\r\n\t\tmargin: 0 0 0 0.25rem;\r\n\t\tpadding: 0 0 0 1rem;\r\n\t\topacity: 0.5;\r\n\t}\r\n\t.frame__demos {\r\n\t\tmargin: 0;\r\n\t\tgrid-area: demos;\r\n\t\tjustify-self: end;\r\n\t}\r\n\t.frame__links {\r\n\t\tgrid-area: links;\r\n\t\tpadding: 0;\r\n\t\tjustify-self: start;\r\n\t}\r\n\t.frame a {\r\n\t\tpointer-events: auto;\r\n\t}\r\n\t.content {\r\n\t\theight: 100vh;\r\n\t}\r\n}\r\n#canvasContainer{\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: -1;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n#canvasContainer img{\r\n\tvisibility: hidden;\r\n\tpointer-events: none;\r\n\tposition: absolute;\r\n}\r\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t<title>Pixel Distortion with Three.js | Demo 1 | Codrops</title>\n\t\t<meta name=\"description\" content=\"An interactive pixel distortion effect made with Three.js \" />\n\t\t<meta name=\"keywords\" content=\"webgl, three.js, pixel, distortion, pixelated, javascript\" />\n\t\t<meta name=\"author\" content=\"Codrops\" />\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t\t<link rel=\"stylesheet\" href=\"https://use.typekit.net/oxr3hup.css\">\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\n\t\t<script>document.documentElement.className=\"js\";var supportsCssVars=function(){var e,t=document.createElement(\"style\");return t.innerHTML=\"root: { --tmp-var: bold; }\",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports(\"font-weight\",\"var(--tmp-var)\")),t.parentNode.removeChild(t),e};supportsCssVars()||alert(\"Please view this demo in a modern browser that supports CSS Variables.\");</script>\n\t\t<script src=\"//tympanus.net/codrops/adpacks/analytics.js\"></script>\n\t</head>\n\t<body class=\"demo-1\">\n\t\t<main>\n\t\t\t<div class=\"frame\">\n\t\t\t\t<div class=\"frame__title-wrap\">\n\t\t\t\t\t<h1 class=\"frame__title\">Pixel Distortion</h1>\n\t\t\t\t\t<p class=\"frame__tagline\">with Three.js</p>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"frame__links\">\n\t\t\t\t\t<a href=\"https://tympanus.net/Development/ColumnScroll/\">Previous demo</a>\n\t\t\t\t\t<a href=\"https://tympanus.net/codrops/?p=58318\">Article</a>\n\t\t\t\t\t<a href=\"https://github.com/akella/DistortedPixels\">GitHub</a>\n\t\t\t\t</nav>\n\t\t\t\t<nav class=\"frame__demos\">\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo frame__demo--current\">demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo\">demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo\">demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\" class=\"frame__demo\">demo 4</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t\t<div id=\"canvasContainer\"\n\t\t\t\tdata-grid=\"50\"\n\t\t\t\tdata-mouse=\"0.25\"\n\t\t\t\tdata-strength=\"0.11\"\n\t\t\t>\n\t\t\t\t<img src=\"img/1.jpg\" alt=\"\">\n\t\t\t</div>\n\t\t\t<div class=\"content\">\n\t\t\t\t<h2 class=\"content__title\">We distort realities</h2>\n\t\t\t</div>\n\t\t</main>\n\t\t<script src=\"https://tympanus.net/codrops/adpacks/cda.js\"></script>\n\t\t<script type=\"module\" src=\"js/app.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "index2.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t<title>Pixel Distortion with Three.js | Demo 2 | Codrops</title>\n\t\t<meta name=\"description\" content=\"An interactive pixel distortion effect made with Three.js \" />\n\t\t<meta name=\"keywords\" content=\"webgl, three.js, pixel, distortion, pixelated, javascript\" />\n\t\t<meta name=\"author\" content=\"Codrops\" />\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t\t<link rel=\"stylesheet\" href=\"https://use.typekit.net/oxr3hup.css\">\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\n\t\t<script>document.documentElement.className=\"js\";var supportsCssVars=function(){var e,t=document.createElement(\"style\");return t.innerHTML=\"root: { --tmp-var: bold; }\",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports(\"font-weight\",\"var(--tmp-var)\")),t.parentNode.removeChild(t),e};supportsCssVars()||alert(\"Please view this demo in a modern browser that supports CSS Variables.\");</script>\n\t\t<script src=\"//tympanus.net/codrops/adpacks/analytics.js\"></script>\n\t</head>\n\t<body class=\"demo-2\">\n\t\t<main>\n\t\t\t<div class=\"frame\">\n\t\t\t\t<div class=\"frame__title-wrap\">\n\t\t\t\t\t<h1 class=\"frame__title\">Pixel Distortion</h1>\n\t\t\t\t\t<p class=\"frame__tagline\">with Three.js</p>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"frame__links\">\n\t\t\t\t\t<a href=\"https://tympanus.net/Development/ColumnScroll/\">Previous demo</a>\n\t\t\t\t\t<a href=\"https://tympanus.net/codrops/?p=58318\">Article</a>\n\t\t\t\t\t<a href=\"https://github.com/akella/DistortedPixels\">GitHub</a>\n\t\t\t\t</nav>\n\t\t\t\t<nav class=\"frame__demos\">\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo \">demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo frame__demo--current\">demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo\">demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\" class=\"frame__demo\">demo 4</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t\t<div id=\"canvasContainer\"\n\t\t\t\tdata-grid=\"607\"\n\t\t\t\tdata-mouse=\"0.11\"\n\t\t\t\tdata-strength=\"0.36\"\n\t\t\t\tdata-relaxation=\"0.96\"\n\t\t\t>\n\t\t\t\t<img src=\"img/2.jpg\" alt=\"\">\n\t\t\t</div>\n\t\t\t<div class=\"content\">\n\t\t\t\t<h2 class=\"content__title content__title--centered content__title--style-1\">Fungible Love</h2>\n\t\t\t</div>\n\t\t</main>\n\t\t<script src=\"https://tympanus.net/codrops/adpacks/cda.js\"></script>\n\t\t<script type=\"module\" src=\"js/app.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "index3.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t<title>Pixel Distortion with Three.js | Demo 3 | Codrops</title>\n\t\t<meta name=\"description\" content=\"An interactive pixel distortion effect made with Three.js \" />\n\t\t<meta name=\"keywords\" content=\"webgl, three.js, pixel, distortion, pixelated, javascript\" />\n\t\t<meta name=\"author\" content=\"Codrops\" />\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t\t<link rel=\"stylesheet\" href=\"https://use.typekit.net/oxr3hup.css\">\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\n\t\t<script>document.documentElement.className=\"js\";var supportsCssVars=function(){var e,t=document.createElement(\"style\");return t.innerHTML=\"root: { --tmp-var: bold; }\",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports(\"font-weight\",\"var(--tmp-var)\")),t.parentNode.removeChild(t),e};supportsCssVars()||alert(\"Please view this demo in a modern browser that supports CSS Variables.\");</script>\n\t\t<script src=\"//tympanus.net/codrops/adpacks/analytics.js\"></script>\n\t</head>\n\t<body class=\"demo-3\">\n\t\t<main>\n\t\t\t<div class=\"frame\">\n\t\t\t\t<div class=\"frame__title-wrap\">\n\t\t\t\t\t<h1 class=\"frame__title\">Pixel Distortion</h1>\n\t\t\t\t\t<p class=\"frame__tagline\">with Three.js</p>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"frame__links\">\n\t\t\t\t\t<a href=\"https://tympanus.net/Development/ColumnScroll/\">Previous demo</a>\n\t\t\t\t\t<a href=\"https://tympanus.net/codrops/?p=58318\">Article</a>\n\t\t\t\t\t<a href=\"https://github.com/akella/DistortedPixels\">GitHub</a>\n\t\t\t\t</nav>\n\t\t\t\t<nav class=\"frame__demos\">\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo \">demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo\">demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo frame__demo--current\">demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\" class=\"frame__demo\">demo 4</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t\t<div id=\"canvasContainer\"\n\t\t\t\tdata-grid=\"15\"\n\t\t\t\tdata-mouse=\"0.13\"\n\t\t\t\tdata-strength=\"0.15\"\n\t\t\t>\n\t\t\t\t<img src=\"img/3.jpg\" alt=\"\">\n\t\t\t</div>\n\t\t\t<div class=\"content\">\n\t\t\t\t<h2 class=\"content__title content__title--centered content__title--style-2\">Cold Storage</h2>\n\t\t\t</div>\n\t\t</main>\n\t\t<script src=\"https://tympanus.net/codrops/adpacks/cda.js\"></script>\n\t\t<script type=\"module\" src=\"js/app.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "index4.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t<title>Pixel Distortion with Three.js | Demo 4 | Codrops</title>\n\t\t<meta name=\"description\" content=\"An interactive pixel distortion effect made with Three.js \" />\n\t\t<meta name=\"keywords\" content=\"webgl, three.js, pixel, distortion, pixelated, javascript\" />\n\t\t<meta name=\"author\" content=\"Codrops\" />\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t\t<link rel=\"stylesheet\" href=\"https://use.typekit.net/oxr3hup.css\">\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\n\t\t<script>document.documentElement.className=\"js\";var supportsCssVars=function(){var e,t=document.createElement(\"style\");return t.innerHTML=\"root: { --tmp-var: bold; }\",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports(\"font-weight\",\"var(--tmp-var)\")),t.parentNode.removeChild(t),e};supportsCssVars()||alert(\"Please view this demo in a modern browser that supports CSS Variables.\");</script>\n\t\t<script src=\"//tympanus.net/codrops/adpacks/analytics.js\"></script>\n\t</head>\n\t<body class=\"demo-4\">\n\t\t<main>\n\t\t\t<div class=\"frame\">\n\t\t\t\t<div class=\"frame__title-wrap\">\n\t\t\t\t\t<h1 class=\"frame__title\">Pixel Distortion</h1>\n\t\t\t\t\t<p class=\"frame__tagline\">with Three.js</p>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"frame__links\">\n\t\t\t\t\t<a href=\"https://tympanus.net/Development/ColumnScroll/\">Previous demo</a>\n\t\t\t\t\t<a href=\"https://tympanus.net/codrops/?p=58318\">Article</a>\n\t\t\t\t\t<a href=\"https://github.com/akella/DistortedPixels\">GitHub</a>\n\t\t\t\t</nav>\n\t\t\t\t<nav class=\"frame__demos\">\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo \">demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo\">demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo\">demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\" class=\"frame__demo frame__demo--current\">demo 4</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t\t<div id=\"canvasContainer\"\n\t\t\t\tdata-grid=\"15\"\n\t\t\t\tdata-mouse=\"0.13\"\n\t\t\t\tdata-strength=\"0.15\"\n\t\t\t>\n\t\t\t\t<img src=\"img/4.jpg\" alt=\"\">\n\t\t\t</div>\n\t\t</main>\n\t\t<script src=\"https://tympanus.net/codrops/adpacks/cda.js\"></script>\n\t\t<script type=\"module\" src=\"js/app.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "js/app.js",
    "content": "import * as THREE from \"three\";\nimport fragment from \"./shader/fragment.glsl\";\nimport vertex from \"./shader/vertex.glsl\";\nimport GUI from \"lil-gui\";\n\nfunction clamp(number, min, max) {\n  return Math.max(min, Math.min(number, max));\n}\n\nexport default class Sketch {\n  constructor(options) {\n    this.scene = new THREE.Scene();\n\n    this.container = options.dom;\n    this.img = this.container.querySelector('img')\n    this.width = this.container.offsetWidth;\n    this.height = this.container.offsetHeight;\n    this.renderer = new THREE.WebGLRenderer();\n    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))\n    this.renderer.setSize(this.width, this.height);\n    this.renderer.setClearColor(0xeeeeee, 1);\n    this.renderer.physicallyCorrectLights = true;\n    this.renderer.outputEncoding = THREE.sRGBEncoding;\n\n    this.container.appendChild(this.renderer.domElement);\n\n    this.camera = new THREE.PerspectiveCamera(\n      70,\n      window.innerWidth / window.innerHeight,\n      0.1,\n      100\n    );\n\n    var frustumSize = 1;\n    var aspect = window.innerWidth / window.innerHeight;\n    this.camera = new THREE.OrthographicCamera(frustumSize / -2, frustumSize / 2, frustumSize / 2, frustumSize / -2, -1000, 1000);\n    this.camera.position.set(0, 0, 2);\n\n    this.time = 0;\n\n    this.mouse = {\n      x: 0,\n      y: 0,\n      prevX: 0,\n      prevY: 0,\n      vX: 0,\n      vY: 0\n    }\n\n    this.isPlaying = true;\n    this.settings();\n    this.addObjects();\n    this.resize();\n    this.render();\n    this.setupResize();\n\n    this.mouseEvents()\n\n  }\n\n  getValue(val){\n    return parseFloat(this.container.getAttribute('data-'+val))\n  }\n\n\n  mouseEvents() {\n    window.addEventListener('mousemove', (e) => {\n      this.mouse.x = e.clientX / this.width;\n      this.mouse.y = e.clientY / this.height;\n\n      // console.log(this.mouse.x,this.mouse.y)\n\n      this.mouse.vX = this.mouse.x - this.mouse.prevX;\n      this.mouse.vY = this.mouse.y - this.mouse.prevY;\n\n\n      this.mouse.prevX = this.mouse.x\n      this.mouse.prevY = this.mouse.y;\n\n\n      // console.log(this.mouse.vX,'vx')\n    })\n  }\n\n  settings() {\n    let that = this;\n    this.settings = {\n      grid: this.getValue('grid')||34,\n      mouse: this.getValue('mouse')||0.25,\n      strength: this.getValue('strength')||1,\n      relaxation: this.getValue('relaxation')||0.9,\n    };\n\n\n    this.gui = new GUI();\n\n    this.gui.add(this.settings, \"grid\", 2, 1000, 1).onFinishChange(() => {\n      this.regenerateGrid()\n    });\n    this.gui.add(this.settings, \"mouse\", 0, 1, 0.01);\n    this.gui.add(this.settings, \"strength\", 0, 1, 0.01);\n    this.gui.add(this.settings, \"relaxation\", 0, 1, 0.01);\n  }\n\n  setupResize() {\n    window.addEventListener(\"resize\", this.resize.bind(this));\n  }\n\n  resize() {\n    this.width = this.container.offsetWidth;\n    this.height = this.container.offsetHeight;\n    this.renderer.setSize(this.width, this.height);\n    this.camera.aspect = this.width / this.height;\n\n\n    // image cover\n    this.imageAspect = 1. / 1.5;\n    let a1;\n    let a2;\n    if (this.height / this.width > this.imageAspect) {\n      a1 = (this.width / this.height) * this.imageAspect;\n      a2 = 1;\n    } else {\n      a1 = 1;\n      a2 = (this.height / this.width) / this.imageAspect;\n    }\n\n    this.material.uniforms.resolution.value.x = this.width;\n    this.material.uniforms.resolution.value.y = this.height;\n    this.material.uniforms.resolution.value.z = a1;\n    this.material.uniforms.resolution.value.w = a2;\n\n    this.camera.updateProjectionMatrix();\n    this.regenerateGrid()\n\n\n  }\n\n  regenerateGrid() {\n    this.size = this.settings.grid;\n\n    const width = this.size;\n    const height = this.size;\n\n    const size = width * height;\n    const data = new Float32Array(3 * size);\n    const color = new THREE.Color(0xffffff);\n\n    const r = Math.floor(color.r * 255);\n    const g = Math.floor(color.g * 255);\n    const b = Math.floor(color.b * 255);\n\n    for (let i = 0; i < size; i++) {\n      let r = Math.random() * 255 - 125;\n      let r1 = Math.random() * 255 - 125;\n\n      const stride = i * 3;\n\n      data[stride] = r;\n      data[stride + 1] = r1;\n      data[stride + 2] = r;\n\n    }\n\n    // used the buffer to create a DataTexture\n\n    this.texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat, THREE.FloatType);\n\n    this.texture.magFilter = this.texture.minFilter = THREE.NearestFilter;\n\n    if (this.material) {\n      this.material.uniforms.uDataTexture.value = this.texture;\n      this.material.uniforms.uDataTexture.value.needsUpdate = true;\n    }\n  }\n\n  addObjects() {\n\n    this.regenerateGrid()\n    let texture = new THREE.Texture(this.img)\n    texture.needsUpdate = true;\n    this.material = new THREE.ShaderMaterial({\n      extensions: {\n        derivatives: \"#extension GL_OES_standard_derivatives : enable\"\n      },\n      side: THREE.DoubleSide,\n      uniforms: {\n        time: {\n          value: 0\n        },\n        resolution: {\n          value: new THREE.Vector4()\n        },\n        uTexture: {\n          value: texture\n        },\n        uDataTexture: {\n          value: this.texture\n        },\n      },\n      vertexShader: vertex,\n      fragmentShader: fragment\n    });\n\n    this.geometry = new THREE.PlaneGeometry(1, 1, 1, 1);\n\n    this.plane = new THREE.Mesh(this.geometry, this.material);\n    this.scene.add(this.plane);\n  }\n\n\n  updateDataTexture() {\n    let data = this.texture.image.data;\n    for (let i = 0; i < data.length; i += 3) {\n      data[i] *= this.settings.relaxation\n      data[i + 1] *= this.settings.relaxation\n    }\n\n    let gridMouseX = this.size * this.mouse.x;\n    let gridMouseY = this.size * (1 - this.mouse.y);\n    let maxDist = this.size * this.settings.mouse;\n    let aspect = this.height / this.width\n\n    for (let i = 0; i < this.size; i++) {\n      for (let j = 0; j < this.size; j++) {\n\n        let distance = ((gridMouseX - i) ** 2) / aspect + (gridMouseY - j) ** 2\n        let maxDistSq = maxDist ** 2;\n\n        if (distance < maxDistSq) {\n\n          let index = 3 * (i + this.size * j);\n\n          let power = maxDist / Math.sqrt(distance);\n          power = clamp(power, 0, 10)\n          // if(distance <this.size/32) power = 1;\n          // power = 1;\n\n          data[index] += this.settings.strength * 100 * this.mouse.vX * power;\n          data[index + 1] -= this.settings.strength * 100 * this.mouse.vY * power;\n\n        }\n      }\n    }\n\n    this.mouse.vX *= 0.9;\n    this.mouse.vY *= 0.9;\n    this.texture.needsUpdate = true\n  }\n\n\n  render() {\n    if (!this.isPlaying) return;\n    this.time += 0.05;\n    this.updateDataTexture()\n    this.material.uniforms.time.value = this.time;\n    requestAnimationFrame(this.render.bind(this));\n    this.renderer.render(this.scene, this.camera);\n  }\n}\n\nnew Sketch({\n  dom: document.getElementById(\"canvasContainer\")\n});"
  },
  {
    "path": "js/shader/fragment.glsl",
    "content": "uniform float time;\nuniform float progress;\nuniform sampler2D uDataTexture;\nuniform sampler2D uTexture;\n\n\nuniform vec4 resolution;\nvarying vec2 vUv;\nvarying vec3 vPosition;\nfloat PI = 3.141592653589793238;\nvoid main()\t{\n\tvec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);\n\tvec4 color = texture2D(uTexture,newUV);\n\tvec4 offset = texture2D(uDataTexture,vUv);\n\tgl_FragColor = vec4(vUv,0.0,1.);\n\tgl_FragColor = vec4(offset.r,0.,0.,1.);\n\tgl_FragColor = color;\n\tgl_FragColor = texture2D(uTexture,newUV - 0.02*offset.rg);\n\t// gl_FragColor = offset;\n\n}"
  },
  {
    "path": "js/shader/vertex.glsl",
    "content": "uniform float time;\nvarying vec2 vUv;\nvarying vec3 vPosition;\nuniform vec2 pixels;\nfloat PI = 3.141592653589793238;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}"
  },
  {
    "path": "js/shader/vertexParticles.glsl",
    "content": "uniform float time;\nvarying vec2 vUv;\nvarying vec3 vPosition;\nuniform sampler2D texture1;\nfloat PI = 3.141592653589793238;\nvoid main() {\n  vUv = uv;\n  vec4 mvPosition = modelViewMatrix * vec4( position, 1. );\n  gl_PointSize = 1000. * ( 1. / - mvPosition.z );\n  gl_Position = projectionMatrix * mvPosition;\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"dependencies\": {\n    \"dat.gui\": \"^0.7.7\",\n    \"lil-gui\": \"^0.16.0\",\n    \"three\": \"^0.136.0\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-glsl\": \"^2.1.1\",\n    \"glslify-bundle\": \"^5.1.1\",\n    \"glslify-deps\": \"^1.3.2\"\n  }\n}\n"
  }
]