[
  {
    "path": ".gitignore",
    "content": "*.DS_Store\r\n"
  },
  {
    "path": "README.md",
    "content": "# Interactive Landscape\r\n\r\nAn exploration of an animated interactive landscape built with three.js. By André Mattos.\r\n\r\n![Interactive Landscape](https://tympanus.net/codrops/wp-content/uploads/2018/12/landscape_featured.jpg)\r\n\r\n[Article on Codrops](https://tympanus.net/codrops/?p=36470)\r\n\r\n[Demo](https://tympanus.net/Development/InteractiveLandscape/)\r\n\r\n## Credits\r\n\r\n*   [three.js](https://threejs.org/)\r\n*   [WebGL noise](https://github.com/stegu/webgl-noise) by Stefan Gustavson\r\n*   [sky + sun shader](https://threejs.org/examples/?q=sky#webgl_shaders_sky) by [@blurspline](https://twitter.com/blurspline)\r\n*   [Desmos](https://www.desmos.com/calculator)\r\n*   [Coolors](https://coolors.co)\r\n*   [TweenMax](https://greensock.com/tweenmax)\r\n\r\n## License\r\nThis resource can be used freely if integrated or build upon 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 it, redistribute, re-publish it, or sell \"pluginized\" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.\r\n\r\n## Misc\r\n\r\nFollow André: [GitHub](https://github.com/ma77os), [Codepen](https://codepen.io/ma77os/), [Instagram](https://www.instagram.com/ma77os/), [LinkedIn](https://www.linkedin.com/in/andremattos/), [Behance](https://behance.net/ma77os)\r\n\r\nFollow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)\r\n\r\n\r\n[© Codrops 2018](http://www.codrops.com)\r\n\r\n\r\n\r\n\r\n\r\n"
  },
  {
    "path": "css/base.css",
    "content": "article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:\"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type=\"button\"],input[type=\"reset\"],input[type=\"submit\"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type=\"checkbox\"],input[type=\"radio\"]{box-sizing:border-box;padding:0;}input[type=\"search\"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}\r\n*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 16px;\r\n}\r\n\r\nbody {\r\n\t--color-text: #fff;\r\n\t--color-bg: #0e0e0f;\r\n\t--color-link: #EC8F7B;\r\n\t--color-link-hover: #fff;\r\n\t--color-title: #fff;\r\n\t--color-subtitle: #fff;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\tfont-family: Barlow, Arial, sans-serif;\r\n\toverflow: hidden;\r\n\theight: 100vh;\r\n}\r\n\r\n.demo-2 {\r\n\t--color-text: #fff;\r\n\t--color-bg: #0e0e0f;\r\n\t--color-link: #854aa5;\r\n\t--color-link-hover: #fff;\r\n\t--color-title: #fff;\r\n\t--color-subtitle: #fff;\r\n}\r\n\r\n.demo-3 {\r\n\t--color-text: #fff;\r\n\t--color-bg: #0e0e0f;\r\n\t--color-link: #E5CA56;\r\n\t--color-link-hover: #fff;\r\n\t--color-title: #fff;\r\n\t--color-subtitle: #fff;\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 100000;\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\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 100000;\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\tpointer-events: none;\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@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\na:focus {\r\n\tcolor: var(--color-link-hover);\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\tline-height: 1;\r\n}\r\n\r\n.frame__article {\r\n\tline-height: 1;\r\n}\r\n\r\n.frame__github,\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: flex;\r\n\tflex-direction: column;\r\n\twidth: 100vw;\r\n\theight: calc(100vh - 13rem);\r\n\tposition: relative;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n.content__title {\r\n\tposition: relative;\r\n\tcolor: var(--color-title);\r\n\tfont-size: 10vw;\r\n\ttext-transform: uppercase;\r\n\tmargin: 0;\r\n\tperspective: 1000px;\r\n}\r\n\r\n.content__title span {\r\n\tdisplay: inline-block;\r\n\twhite-space: pre;\r\n\ttransform-origin: 50% -50%;\r\n}\r\n\r\n.content__subtitle {\r\n\tposition: relative;\r\n\tmargin: 0;\r\n\tcolor: var(--color-subtitle);\r\n}\r\n\r\n.landscape {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n.overlay {\r\n\tposition: fixed;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tbackground: #000;\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: 10000;\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: 2rem;\r\n\t\tpointer-events: none;\r\n\t\tgrid-template-columns: 25% 50% 25%;\r\n\t\tgrid-template-rows: auto auto auto;\r\n\t\tgrid-template-areas: 'previous title github'\r\n\t\t\t\t\t\t\t'... ... ...'\r\n\t\t\t\t\t\t\t'... demos ...';\r\n\t}\r\n\t.frame__title-wrap {\r\n\t\tgrid-area: title;\r\n\t\tjustify-self: center;\r\n\t\tdisplay: flex;\r\n\t}\r\n\t.frame__title {\r\n\t\tmargin: 0 0.5rem 0 0;\r\n\t\tpadding: 0 0.5rem 0 0;\r\n\t\tposition: relative;\r\n\t}\r\n\t.frame__title::after {\r\n\t\tcontent: '';\r\n\t\twidth: 1px;\r\n\t\theight: 1.1rem;\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t\ttop: 50%;\r\n\t\tmargin-top: -0.55rem;\r\n\t\tbackground: currentColor;\r\n\t}\r\n\t.frame__github {\r\n\t\tgrid-area: github;\r\n\t\tjustify-self: end;\r\n\t\tmargin: 0;\r\n\t}\r\n\t.frame__demos {\r\n\t\tmargin: 0;\r\n\t\tgrid-area: demos;\r\n\t\tjustify-self: center;\r\n\t}\r\n\t.frame__previous {\r\n\t\tgrid-area: previous;\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\tpadding: 0 0 10rem 0;\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n}\r\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\r\n<html lang=\"en\" class=\"no-js\">\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\" />\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\t\t<title>Interactive Landscape | Demo 1 | Codrops</title>\r\n\t\t<meta name=\"description\" content=\"An interactive animated landscape built with three.js\" />\r\n\t\t<meta name=\"keywords\" content=\"three.js, javascript, webgl, animation, landscape, interactive, demo\" />\r\n\t\t<meta name=\"author\" content=\"Codrops\" />\r\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\r\n\t\t<link href=\"https://fonts.googleapis.com/css?family=Barlow:400,800\" rel=\"stylesheet\">\r\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\r\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>\r\n\t</head>\r\n\t<body class=\"demo-1\">\r\n\t\t<main>\r\n\t\t\t<div class=\"frame\">\r\n\t\t\t\t<div class=\"frame__title-wrap\">\r\n\t\t\t\t\t<h1 class=\"frame__title\">Interactive Landscape</h1>\r\n\t\t\t\t\t<a class=\"frame__article\" href=\"https://tympanus.net/codrops/?p=36470\">Article</a>\r\n\t\t\t\t</div>\r\n\t\t\t\t<a class=\"frame__github\" href=\"https://github.com/codrops/InteractiveLandscape/\">GitHub</a>\r\n\t\t\t\t<a class=\"frame__previous\" href=\"https://tympanus.net/Development/AmbientCanvasBackgrounds/\">Previous demo</a>\r\n\t\t\t\t<div class=\"frame__demos\">\r\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo frame__demo--current\">demo 1</a>\r\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo\">demo 2</a>\r\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo\">demo 3</a>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"content\">\r\n\t\t\t\t<canvas class=\"landscape\"></canvas>\r\n\t\t\t\t<script id=\"custom-vertex\" type=\"x-shader/x-vertex\">\r\n\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// GLSL textureless classic 3D noise \"cnoise\",\r\n\t\t\t\t\t// with an RSL-style periodic variant \"pnoise\".\r\n\t\t\t\t\t// Author:  Stefan Gustavson (stefan.gustavson@liu.se)\r\n\t\t\t\t\t// Version: 2011-10-11\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Many thanks to Ian McEwan of Ashima Arts for the\r\n\t\t\t\t\t// ideas for permutation and gradient selection.\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\r\n\t\t\t\t\t// Distributed under the MIT license. See LICENSE file.\r\n\t\t\t\t\t// https://github.com/stegu/webgl-noise\r\n\t\t\t\t\t//\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 mod289(vec3 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 mod289(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 permute(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn mod289(((x*34.0)+1.0)*x);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 taylorInvSqrt(vec4 r)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn 1.79284291400159 - 0.85373472095314 * r;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 fade(vec3 t) {\r\n\t\t\t\t\t\treturn t*t*t*(t*(t*6.0-15.0)+10.0);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise\r\n\t\t\t\t\tfloat cnoise(vec3 P)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = floor(P); // Integer part for indexing\r\n\t\t\t\t\t\tvec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise, periodic variant\r\n\t\t\t\t\tfloat pnoise(vec3 P, vec3 rep)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period\r\n\t\t\t\t\t\tvec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t#define PI 3.1415926535897932384626433832795\r\n\t\t\t\t\t\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform float maxHeight;\r\n\t\t\t\t\tuniform float speed;\r\n\t\t\t\t\tuniform float distortCenter;\r\n\t\t\t\t\tuniform float roadWidth;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tfloat t = time * speed;\r\n\t\t\t\t\t\tfloat wRoad = distortCenter;\r\n\t\t\t\t\t\tfloat wRoad2 = wRoad * 0.5;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat angleCenter = uv.y * PI*4.0;\r\n\t\t\t\t\t\tangleCenter += t * 0.9;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat centerOff = (\r\n\t\t\t\t\t\t\tsin(angleCenter) + \r\n\t\t\t\t\t\t\tsin(angleCenter*0.5) \r\n\t\t\t\t\t\t) * wRoad;\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tvec3 noiseIn = vec3(uv, 1.0)*10.0;\r\n\t\t\t\t\t\tfloat noise = cnoise(vec3(noiseIn.x, noiseIn.y + t, noiseIn.z));\r\n\t\t\t\t\t\tnoise += 1.0;\r\n\t\t\t\t\t\tfloat h = noise;\r\n\t\t\t\t\t\tfloat angle = (uv.x - centerOff) * PI;\r\n\t\t\t\t\t\tfloat f = abs(cos(angle));\r\n\t\t\t\t\t\th *= pow(f, 1.5 + roadWidth);\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\tvDisplace = h;\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\th*=maxHeight;\r\n\r\n\t\t\t\t\t\tvec3 transformed = vec3( position.x, position.y, position.z + h );\r\n\r\n\r\n\t\t\t\t\t\tvec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\r\n\t\t\t\t\t\tgl_Position = projectionMatrix * mvPosition;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfogDepth = -mvPosition.z;\r\n\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<script id=\"custom-fragment\" type=\"x-shader/x-fragment\">\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform vec3 color;\r\n\t\t\t\t\tuniform sampler2D pallete;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tuniform vec3 fogColor;\r\n\t\t\t\t\tuniform float fogNear;\r\n\t\t\t\t\tuniform float fogFar;\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tvec2 stripPos = vec2( 0.0, vDisplace );\r\n\t\t\t\t\t\tvec4 stripColor = texture2D( pallete, stripPos );\r\n\t\t\t\t\t\tstripColor *= pow(1.0-vDisplace, 1.0);\r\n\r\n\t\t\t\t\t\tgl_FragColor = stripColor;\r\n\r\n\t\t\t\t\t\t#ifdef USE_FOG\r\n\t\t\t\t\t\t\tfloat fogFactor = smoothstep( fogNear, fogFar, fogDepth );\r\n\t\t\t\t\t\t\tgl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );\r\n\t\t\t\t\t\t#endif\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<h2 class=\"content__title\">Upgrade</h2>\r\n\t\t\t\t<p class=\"content__subtitle\">Version 5.5</p>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"overlay\"></div>\r\n\t\t</main>\r\n\t\t<script src=\"js/vendor/three.min.js\"></script>\r\n\t\t<script src=\"js/vendor/Sky.js\"></script>\r\n\t\t<script src=\"js/vendor/hammer.min.js\"></script>\r\n\t\t<script src=\"js/vendor/charming.min.js\"></script>\r\n\t\t<script src=\"js/vendor/TweenMax.min.js\"></script>\r\n\t\t<script src=\"js/demo1.js\"></script>\r\n\t</body>\r\n</html>\r\n"
  },
  {
    "path": "index2.html",
    "content": "<!DOCTYPE html>\r\n<html lang=\"en\" class=\"no-js\">\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\" />\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\t\t<title>Interactive Landscape | Demo 2 | Codrops</title>\r\n\t\t<meta name=\"description\" content=\"An interactive animated landscape built with three.js\" />\r\n\t\t<meta name=\"keywords\" content=\"three.js, javascript, webgl, animation, landscape, interactive, demo\" />\r\n\t\t<meta name=\"author\" content=\"Codrops\" />\r\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\r\n\t\t<link href=\"https://fonts.googleapis.com/css?family=Barlow:400,800\" rel=\"stylesheet\">\r\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\r\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>\r\n\t</head>\r\n\t<body class=\"demo-2\">\r\n\t\t<main>\r\n\t\t\t<div class=\"frame\">\r\n\t\t\t\t<div class=\"frame__title-wrap\">\r\n\t\t\t\t\t<h1 class=\"frame__title\">Interactive Landscape</h1>\r\n\t\t\t\t\t<a class=\"frame__article\" href=\"https://tympanus.net/codrops/?p=36470\">Article</a>\r\n\t\t\t\t</div>\r\n\t\t\t\t<a class=\"frame__github\" href=\"https://github.com/codrops/InteractiveLandscape/\">GitHub</a>\r\n\t\t\t\t<a class=\"frame__previous\" href=\"https://tympanus.net/Development/AmbientCanvasBackgrounds/\">Previous demo</a>\r\n\t\t\t\t<div class=\"frame__demos\">\r\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo\">demo 1</a>\r\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo frame__demo--current\">demo 2</a>\r\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo\">demo 3</a>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"content\">\r\n\t\t\t\t<canvas class=\"landscape\"></canvas>\r\n\t\t\t\t<script id=\"custom-vertex\" type=\"x-shader/x-vertex\">\r\n\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// GLSL textureless classic 3D noise \"cnoise\",\r\n\t\t\t\t\t// with an RSL-style periodic variant \"pnoise\".\r\n\t\t\t\t\t// Author:  Stefan Gustavson (stefan.gustavson@liu.se)\r\n\t\t\t\t\t// Version: 2011-10-11\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Many thanks to Ian McEwan of Ashima Arts for the\r\n\t\t\t\t\t// ideas for permutation and gradient selection.\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\r\n\t\t\t\t\t// Distributed under the MIT license. See LICENSE file.\r\n\t\t\t\t\t// https://github.com/stegu/webgl-noise\r\n\t\t\t\t\t//\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 mod289(vec3 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 mod289(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 permute(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn mod289(((x*34.0)+1.0)*x);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 taylorInvSqrt(vec4 r)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn 1.79284291400159 - 0.85373472095314 * r;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 fade(vec3 t) {\r\n\t\t\t\t\t\treturn t*t*t*(t*(t*6.0-15.0)+10.0);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise\r\n\t\t\t\t\tfloat cnoise(vec3 P)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = floor(P); // Integer part for indexing\r\n\t\t\t\t\t\tvec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise, periodic variant\r\n\t\t\t\t\tfloat pnoise(vec3 P, vec3 rep)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period\r\n\t\t\t\t\t\tvec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t#define PI 3.1415926535897932384626433832795\r\n\t\t\t\t\t\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform float maxHeight;\r\n\t\t\t\t\tuniform float speed;\r\n\t\t\t\t\tuniform float distortCenter;\r\n\t\t\t\t\tuniform float roadWidth;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tfloat t = time * speed;\r\n\t\t\t\t\t\tfloat wRoad = distortCenter;\r\n\t\t\t\t\t\tfloat wRoad2 = wRoad * 0.5;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat angleCenter = uv.y * PI*4.0;\r\n\t\t\t\t\t\tangleCenter += t * 0.9;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat centerOff = (\r\n\t\t\t\t\t\t\tsin(angleCenter) + \r\n\t\t\t\t\t\t\tsin(angleCenter*0.5) \r\n\t\t\t\t\t\t) * wRoad;\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tvec3 noiseIn = vec3(uv, 1.0)*10.0;\r\n\t\t\t\t\t\tfloat noise = cnoise(vec3(noiseIn.x, noiseIn.y + t, noiseIn.z));\r\n\t\t\t\t\t\tnoise += 1.0;\r\n\t\t\t\t\t\tfloat h = noise;\r\n\t\t\t\t\t\tfloat angle = (uv.x - centerOff) * PI;\r\n\t\t\t\t\t\tfloat f = abs(cos(angle));\r\n\t\t\t\t\t\th *= pow(f, 1.5 + roadWidth);\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\tvDisplace = h;\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\th*=maxHeight;\r\n\r\n\t\t\t\t\t\tvec3 transformed = vec3( position.x, position.y, position.z + h );\r\n\r\n\r\n\t\t\t\t\t\tvec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\r\n\t\t\t\t\t\tgl_Position = projectionMatrix * mvPosition;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfogDepth = -mvPosition.z;\r\n\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<script id=\"custom-fragment\" type=\"x-shader/x-fragment\">\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform vec3 color;\r\n\t\t\t\t\tuniform sampler2D pallete;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tuniform vec3 fogColor;\r\n\t\t\t\t\tuniform float fogNear;\r\n\t\t\t\t\tuniform float fogFar;\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tvec2 stripPos = vec2( 0.0, vDisplace );\r\n\t\t\t\t\t\tvec4 stripColor = texture2D( pallete, stripPos );\r\n\t\t\t\t\t\tstripColor *= pow(1.0-vDisplace, 1.0);\r\n\r\n\t\t\t\t\t\tgl_FragColor = stripColor;\r\n\r\n\t\t\t\t\t\t#ifdef USE_FOG\r\n\t\t\t\t\t\t\tfloat fogFactor = smoothstep( fogNear, fogFar, fogDepth );\r\n\t\t\t\t\t\t\tgl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );\r\n\t\t\t\t\t\t#endif\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<h2 class=\"content__title\">Upgrade</h2>\r\n\t\t\t\t<p class=\"content__subtitle\">Version 5.5</p>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"overlay\"></div>\r\n\t\t</main>\r\n\t\t<script src=\"js/vendor/three.min.js\"></script>\r\n\t\t<script src=\"js/vendor/Sky.js\"></script>\r\n\t\t<script src=\"js/vendor/hammer.min.js\"></script>\r\n\t\t<script src=\"js/vendor/charming.min.js\"></script>\r\n\t\t<script src=\"js/vendor/TweenMax.min.js\"></script>\r\n\t\t<script src=\"js/demo2.js\"></script>\r\n\t</body>\r\n</html>\r\n"
  },
  {
    "path": "index3.html",
    "content": "<!DOCTYPE html>\r\n<html lang=\"en\" class=\"no-js\">\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\" />\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\t\t<title>Interactive Landscape | Demo 3 | Codrops</title>\r\n\t\t<meta name=\"description\" content=\"An interactive animated landscape built with three.js\" />\r\n\t\t<meta name=\"keywords\" content=\"three.js, javascript, webgl, animation, landscape, interactive, demo\" />\r\n\t\t<meta name=\"author\" content=\"Codrops\" />\r\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\r\n\t\t<link href=\"https://fonts.googleapis.com/css?family=Barlow:400,800\" rel=\"stylesheet\">\r\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/base.css\" />\r\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>\r\n\t</head>\r\n\t<body class=\"demo-3\">\r\n\t\t<main>\r\n\t\t\t<div class=\"frame\">\r\n\t\t\t\t<div class=\"frame__title-wrap\">\r\n\t\t\t\t\t<h1 class=\"frame__title\">Interactive Landscape</h1>\r\n\t\t\t\t\t<a class=\"frame__article\" href=\"https://tympanus.net/codrops/?p=36470\">Article</a>\r\n\t\t\t\t</div>\r\n\t\t\t\t<a class=\"frame__github\" href=\"https://github.com/codrops/InteractiveLandscape/\">GitHub</a>\r\n\t\t\t\t<a class=\"frame__previous\" href=\"https://tympanus.net/Development/AmbientCanvasBackgrounds/\">Previous demo</a>\r\n\t\t\t\t<div class=\"frame__demos\">\r\n\t\t\t\t\t<a href=\"index.html\" class=\"frame__demo\">demo 1</a>\r\n\t\t\t\t\t<a href=\"index2.html\" class=\"frame__demo\">demo 2</a>\r\n\t\t\t\t\t<a href=\"index3.html\" class=\"frame__demo frame__demo--current\">demo 3</a>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"content\">\r\n\t\t\t\t<canvas class=\"landscape\"></canvas>\r\n\t\t\t\t<script id=\"custom-vertex\" type=\"x-shader/x-vertex\">\r\n\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// GLSL textureless classic 3D noise \"cnoise\",\r\n\t\t\t\t\t// with an RSL-style periodic variant \"pnoise\".\r\n\t\t\t\t\t// Author:  Stefan Gustavson (stefan.gustavson@liu.se)\r\n\t\t\t\t\t// Version: 2011-10-11\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Many thanks to Ian McEwan of Ashima Arts for the\r\n\t\t\t\t\t// ideas for permutation and gradient selection.\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\r\n\t\t\t\t\t// Distributed under the MIT license. See LICENSE file.\r\n\t\t\t\t\t// https://github.com/stegu/webgl-noise\r\n\t\t\t\t\t//\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 mod289(vec3 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 mod289(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn x - floor(x * (1.0 / 289.0)) * 289.0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 permute(vec4 x)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn mod289(((x*34.0)+1.0)*x);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec4 taylorInvSqrt(vec4 r)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\treturn 1.79284291400159 - 0.85373472095314 * r;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tvec3 fade(vec3 t) {\r\n\t\t\t\t\t\treturn t*t*t*(t*(t*6.0-15.0)+10.0);\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise\r\n\t\t\t\t\tfloat cnoise(vec3 P)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = floor(P); // Integer part for indexing\r\n\t\t\t\t\t\tvec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t// Classic Perlin noise, periodic variant\r\n\t\t\t\t\tfloat pnoise(vec3 P, vec3 rep)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period\r\n\t\t\t\t\t\tvec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period\r\n\t\t\t\t\t\tPi0 = mod289(Pi0);\r\n\t\t\t\t\t\tPi1 = mod289(Pi1);\r\n\t\t\t\t\t\tvec3 Pf0 = fract(P); // Fractional part for interpolation\r\n\t\t\t\t\t\tvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\r\n\t\t\t\t\t\tvec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n\t\t\t\t\t\tvec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n\t\t\t\t\t\tvec4 iz0 = Pi0.zzzz;\r\n\t\t\t\t\t\tvec4 iz1 = Pi1.zzzz;\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 ixy = permute(permute(ix) + iy);\r\n\t\t\t\t\t\tvec4 ixy0 = permute(ixy + iz0);\r\n\t\t\t\t\t\tvec4 ixy1 = permute(ixy + iz1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx0 = ixy0 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx0 = fract(gx0);\r\n\t\t\t\t\t\tvec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n\t\t\t\t\t\tvec4 sz0 = step(gz0, vec4(0.0));\r\n\t\t\t\t\t\tgx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n\t\t\t\t\t\tgy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 gx1 = ixy1 * (1.0 / 7.0);\r\n\t\t\t\t\t\tvec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\r\n\t\t\t\t\t\tgx1 = fract(gx1);\r\n\t\t\t\t\t\tvec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n\t\t\t\t\t\tvec4 sz1 = step(gz1, vec4(0.0));\r\n\t\t\t\t\t\tgx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n\t\t\t\t\t\tgy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n\t\t\t\t\t\tvec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n\t\t\t\t\t\tvec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n\t\t\t\t\t\tvec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n\t\t\t\t\t\tvec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n\t\t\t\t\t\tvec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n\t\t\t\t\t\tvec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n\t\t\t\t\t\tvec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n\t\t\t\t\t\tg000 *= norm0.x;\r\n\t\t\t\t\t\tg010 *= norm0.y;\r\n\t\t\t\t\t\tg100 *= norm0.z;\r\n\t\t\t\t\t\tg110 *= norm0.w;\r\n\t\t\t\t\t\tvec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n\t\t\t\t\t\tg001 *= norm1.x;\r\n\t\t\t\t\t\tg011 *= norm1.y;\r\n\t\t\t\t\t\tg101 *= norm1.z;\r\n\t\t\t\t\t\tg111 *= norm1.w;\r\n\t\t\t\t\r\n\t\t\t\t\t\tfloat n000 = dot(g000, Pf0);\r\n\t\t\t\t\t\tfloat n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n\t\t\t\t\t\tfloat n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n\t\t\t\t\t\tfloat n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n\t\t\t\t\t\tfloat n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n\t\t\t\t\t\tfloat n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n\t\t\t\t\t\tfloat n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n\t\t\t\t\t\tfloat n111 = dot(g111, Pf1);\r\n\t\t\t\t\r\n\t\t\t\t\t\tvec3 fade_xyz = fade(Pf0);\r\n\t\t\t\t\t\tvec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n\t\t\t\t\t\tvec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n\t\t\t\t\t\tfloat n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n\t\t\t\t\t\treturn 2.2 * n_xyz;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t#define PI 3.1415926535897932384626433832795\r\n\t\t\t\t\t\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform float scroll;\r\n\t\t\t\t\tuniform float maxHeight;\r\n\t\t\t\t\tuniform float speed;\r\n\t\t\t\t\tuniform float distortCenter;\r\n\t\t\t\t\tuniform float roadWidth;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tfloat t = time * speed;\r\n\t\t\t\t\t\tfloat wRoad = distortCenter;\r\n\t\t\t\t\t\tfloat wRoad2 = wRoad * 0.5;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat angleCenter = uv.y * PI*4.0;\r\n\t\t\t\t\t\tangleCenter += t * 0.9;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfloat centerOff = (\r\n\t\t\t\t\t\t\tsin(angleCenter) + \r\n\t\t\t\t\t\t\tsin(angleCenter*0.5) \r\n\t\t\t\t\t\t) * wRoad;\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tvec3 noiseIn = vec3(uv, 1.0)*10.0;\r\n\t\t\t\t\t\tfloat noise = cnoise(vec3(noiseIn.x, noiseIn.y + scroll, noiseIn.z));\r\n\t\t\t\t\t\tnoise += 1.0;\r\n\t\t\t\t\t\tfloat h = noise;\r\n\t\t\t\t\t\tfloat angle = (uv.x - centerOff) * PI;\r\n\t\t\t\t\t\tfloat f = abs(cos(angle));\r\n\t\t\t\t\t\th *= pow(f, 1.5 + roadWidth);\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\tvDisplace = h;\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\th*=maxHeight;\r\n\r\n\t\t\t\t\t\tvec3 transformed = vec3( position.x, position.y, position.z + h );\r\n\r\n\r\n\t\t\t\t\t\tvec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\r\n\t\t\t\t\t\tgl_Position = projectionMatrix * mvPosition;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tfogDepth = -mvPosition.z;\r\n\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<script id=\"custom-fragment\" type=\"x-shader/x-fragment\">\r\n\t\t\t\t\tuniform float time;\r\n\t\t\t\t\tuniform vec3 color;\r\n\t\t\t\t\tuniform sampler2D pallete;\r\n\t\t\t\t\tvarying float vDisplace;\r\n\r\n\t\t\t\t\tuniform vec3 fogColor;\r\n\t\t\t\t\tuniform float fogNear;\r\n\t\t\t\t\tuniform float fogFar;\r\n\t\t\t\t\tvarying float fogDepth;\r\n\r\n\t\t\t\t\tvoid main(){\r\n\r\n\t\t\t\t\t\tvec2 stripPos = vec2( 0.0, vDisplace * (sin(time)*0.5+0.7) );\r\n\t\t\t\t\t\tvec4 stripColor = texture2D( pallete, stripPos );\r\n\t\t\t\t\t\tstripColor *= pow(1.0-vDisplace, 1.0);\r\n\r\n\t\t\t\t\t\tgl_FragColor = stripColor;\r\n\r\n\t\t\t\t\t\t#ifdef USE_FOG\r\n\t\t\t\t\t\t\tfloat fogFactor = smoothstep( fogNear, fogFar, fogDepth );\r\n\t\t\t\t\t\t\tgl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );\r\n\t\t\t\t\t\t#endif\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t</script>\r\n\t\t\t\t<h2 class=\"content__title\">Upgrade</h2>\r\n\t\t\t\t<p class=\"content__subtitle\">Version 5.5</p>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"overlay\"></div>\r\n\t\t</main>\r\n\t\t<script src=\"js/vendor/three.min.js\"></script>\r\n\t\t<script src=\"js/vendor/Sky.js\"></script>\r\n\t\t<script src=\"js/vendor/hammer.min.js\"></script>\r\n\t\t<script src=\"js/vendor/charming.min.js\"></script>\r\n\t\t<script src=\"js/vendor/TweenMax.min.js\"></script>\r\n\t\t<script src=\"js/demo3.js\"></script>\r\n\t</body>\r\n</html>\r\n"
  },
  {
    "path": "js/demo1.js",
    "content": "createLandscape({\r\n  palleteImage:'img/pallete5.png'\r\n})\r\n\r\nfunction createLandscape(params){\r\n\r\n  var container = document.querySelector(\".landscape\")\r\n  var width = window.innerWidth;\r\n  var height = window.innerHeight;\r\n\r\n  var scene, renderer, camera;\r\n  var terrain;\r\n\r\n  var mouse = { x:0, y:0, xDamped:0, yDamped:0 };\r\n  var isMobile = typeof window.orientation !== 'undefined'\r\n\r\n  init();\r\n\r\n  function init(){\r\n\r\n    sceneSetup();\r\n    sceneElements();\r\n    sceneTextures();\r\n    render();\r\n\r\n    if(isMobile)\r\n      window.addEventListener(\"touchmove\", onInputMove, {passive:false})\r\n    else\r\n      window.addEventListener(\"mousemove\", onInputMove)\r\n    \r\n    window.addEventListener(\"resize\", resize)\r\n    resize()\r\n  }\r\n\r\n  function sceneSetup(){\r\n    scene = new THREE.Scene();\r\n    var fogColor = new THREE.Color( 0xffffff )\r\n    scene.background = fogColor;\r\n    scene.fog = new THREE.Fog(fogColor, 10, 400);\r\n\r\n    \r\n    sky()\r\n\r\n    camera = new THREE.PerspectiveCamera(60, width / height, .1, 10000);\r\n    camera.position.y = 8;\r\n    camera.position.z = 4;\r\n    \r\n    ambientLight = new THREE.AmbientLight(0xffffff, 1);\r\n    scene.add(ambientLight)\r\n    \r\n\r\n    renderer = new THREE.WebGLRenderer( {\r\n      canvas:container,\r\n      antialias:true\r\n    } );\r\n    renderer.setPixelRatio = devicePixelRatio;\r\n    renderer.setSize(width, height);\r\n    \r\n\r\n  }\r\n\r\n  function sceneElements(){\r\n\r\n    var geometry = new THREE.PlaneBufferGeometry(100, 400, 400, 400);\r\n\r\n    var uniforms = {\r\n      time: { type: \"f\", value: 0.0 },\r\n      distortCenter: { type: \"f\", value: 0.1 },\r\n      roadWidth: { type: \"f\", value: 0.5 },\r\n      pallete:{ type: \"t\", value: null},\r\n      speed: { type: \"f\", value: 0.5 },\r\n      maxHeight: { type: \"f\", value: 10.0 },\r\n      color:new THREE.Color(1, 1, 1)\r\n    }\r\n    \r\n    var material = new THREE.ShaderMaterial({\r\n      uniforms: THREE.UniformsUtils.merge([ THREE.ShaderLib.basic.uniforms, uniforms ]),\r\n      vertexShader: document.getElementById( 'custom-vertex' ).textContent,\r\n      fragmentShader: document.getElementById( 'custom-fragment' ).textContent,\r\n      wireframe:false,\r\n      fog:true\r\n    });\r\n\r\n    terrain = new THREE.Mesh(geometry, material);\r\n    terrain.position.z = -180;\r\n    terrain.rotation.x = -Math.PI / 2\r\n\r\n    scene.add(terrain)\r\n\r\n  }\r\n\r\n  function sceneTextures(){\r\n    // pallete\r\n    new THREE.TextureLoader().load( params.palleteImage, function(texture){\r\n      terrain.material.uniforms.pallete.value = texture;\r\n      terrain.material.needsUpdate = true;\r\n    });\r\n  }\r\n\r\n  function sky(){\r\n    sky = new THREE.Sky();\r\n    sky.scale.setScalar( 450000 );\r\n    sky.material.uniforms.turbidity.value = 20;\r\n    sky.material.uniforms.rayleigh.value = 0;\r\n    sky.material.uniforms.luminance.value = 1;\r\n    sky.material.uniforms.mieCoefficient.value = 0.01;\r\n    sky.material.uniforms.mieDirectionalG.value = 0.8;\r\n    \r\n    scene.add( sky );\r\n\r\n    sunSphere = new THREE.Mesh(\r\n      new THREE.SphereBufferGeometry( 20000, 16, 8 ),\r\n      new THREE.MeshBasicMaterial( { color: 0xffffff } )\r\n    );\r\n    sunSphere.visible = false;\r\n    scene.add( sunSphere );\r\n    \r\n    var theta = Math.PI * ( -0.02 );\r\n    var phi = 2 * Math.PI * ( -.25 );\r\n\r\n    sunSphere.position.x = 400000 * Math.cos( phi );\r\n    sunSphere.position.y = 400000 * Math.sin( phi ) * Math.sin( theta );\r\n    sunSphere.position.z = 400000 * Math.sin( phi ) * Math.cos( theta );\r\n    \r\n    sky.material.uniforms.sunPosition.value.copy( sunSphere.position );\r\n  }\r\n\r\n  function resize(){\r\n    width = window.innerWidth\r\n    height = window.innerHeight\r\n    camera.aspect = width / height;\r\n    camera.updateProjectionMatrix();\r\n\r\n    renderer.setSize( width, height );\r\n  }\r\n\r\n  function onInputMove(e){\r\n    e.preventDefault();\r\n    \r\n    var x, y\r\n    if(e.type == \"mousemove\"){\r\n      x = e.clientX;\r\n      y = e.clientY;\r\n    }else{\r\n      x = e.changedTouches[0].clientX\r\n      y = e.changedTouches[0].clientY\r\n    }\r\n    \r\n    mouse.x = x;\r\n    mouse.y = y;\r\n    \r\n  }\r\n\r\n  function render(){\r\n    requestAnimationFrame(render)\r\n\r\n    // damping mouse for smoother interaction\r\n    mouse.xDamped = lerp(mouse.xDamped, mouse.x, 0.1);\r\n    mouse.yDamped = lerp(mouse.yDamped, mouse.y, 0.1);\r\n\r\n    var time = performance.now() * 0.001\r\n    terrain.material.uniforms.time.value = time;\r\n    terrain.material.uniforms.distortCenter.value = map(mouse.xDamped, 0, width, -0.1, 0.1);\r\n    terrain.material.uniforms.roadWidth.value = map(mouse.yDamped, 0, height, -0.5, 2.5);\r\n\r\n\r\n    renderer.render(scene, camera)\r\n\r\n  }\r\n\r\n  function map (value, start1, stop1, start2, stop2) {\r\n    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))\r\n  }\r\n\r\n  function lerp (start, end, amt){\r\n    return (1 - amt) * start + amt * end\r\n  }\r\n}\r\n\r\nconst getRandomNumber = (min, max) => (Math.random() * (max - min) + min);\r\n\r\nanimateTitles();\r\n\r\nfunction animateTitles() {\r\n  const overlay = document.querySelector('.overlay'); \r\n  const title = document.querySelector('.content__title');\r\n  charming(title);\r\n  const titleLetters = Array.from(title.querySelectorAll('span'));\r\n\r\n  TweenMax.to(overlay, 2, {\r\n    ease: Quad.easeOut,\r\n    opacity: 0\r\n  });\r\n\r\n  TweenMax.set(titleLetters, {opacity: 0});\r\n  TweenMax.staggerTo(titleLetters, 1.5, {\r\n    ease: Expo.easeOut,\r\n    startAt: {rotationX: -100, z: -1000},\r\n    opacity: 1,\r\n    rotationX: 0,\r\n    z: 0\r\n  }, 0.1);\r\n\r\n  const subtitle = document.querySelector('.content__subtitle');\r\n  TweenMax.set(subtitle, {opacity: 0});\r\n  TweenMax.to(subtitle, 1.5, {\r\n    ease: Expo.easeOut,\r\n    startAt: {y: 30},\r\n    opacity: 1,\r\n    y: 0\r\n  });\r\n\r\n  const glitch = (el,cycles) => {\r\n    if ( cycles === 0 || cycles > 3 ) return;\r\n    TweenMax.set(el, {\r\n      x: getRandomNumber(-20,20), \r\n      y: getRandomNumber(-20,20),\r\n      color: ['#95dc77','#f3eb8a','#f9b97f'][cycles-1]\r\n    });\r\n    setTimeout(() => {\r\n      TweenMax.set(el, {x: 0, y: 0, color: '#fff'});\r\n      glitch(el, cycles-1);\r\n    }, getRandomNumber(20,100));\r\n  };\r\n\r\n  const loop = (startAt) => {\r\n    this.timeout = setTimeout(() => {\r\n        const titleLettersShuffled = titleLetters.sort((a,b) => 0.5 - Math.random());\r\n        const lettersSet = titleLettersShuffled.slice(0, getRandomNumber(1,titleLetters.length+1));\r\n        for (let i = 0, len = lettersSet.length; i < len-1; ++i) {\r\n          glitch(lettersSet[i], 3);\r\n        }\r\n        loop();\r\n    }, startAt || getRandomNumber(500, 3000));\r\n  }\r\n  loop(1500);\r\n}"
  },
  {
    "path": "js/demo2.js",
    "content": "createLandscape({\r\n  palleteImage:'img/pallete6.png'\r\n})\r\n\r\nfunction createLandscape(params){\r\n\r\n  var container = document.querySelector(\".landscape\")\r\n  var width = window.innerWidth;\r\n  var height = window.innerHeight;\r\n\r\n  var scene, renderer, camera;\r\n  var terrain;\r\n\r\n  var mouse = { x:0, y:0, xDamped:0, yDamped:0 };\r\n  var isMobile = typeof window.orientation !== 'undefined'\r\n\r\n  init();\r\n\r\n  function init(){\r\n\r\n    sceneSetup();\r\n    sceneElements();\r\n    sceneTextures();\r\n    render();\r\n\r\n    if(isMobile)\r\n      window.addEventListener(\"touchmove\", onInputMove, {passive:false})\r\n    else\r\n      window.addEventListener(\"mousemove\", onInputMove)\r\n    \r\n    window.addEventListener(\"resize\", resize)\r\n    resize()\r\n  }\r\n\r\n  function sceneSetup(){\r\n    scene = new THREE.Scene();\r\n    var fogColor = new THREE.Color( 0x000000 )\r\n    scene.background = fogColor;\r\n    scene.fog = new THREE.Fog(fogColor, 10, 400);\r\n\r\n    \r\n    sky()\r\n\r\n    camera = new THREE.PerspectiveCamera(60, width / height, .1, 10000);\r\n    camera.position.y = 8;\r\n    camera.position.z = 4;\r\n    \r\n    ambientLight = new THREE.AmbientLight(0xffffff, 1);\r\n    scene.add(ambientLight)\r\n    \r\n\r\n    renderer = new THREE.WebGLRenderer( {\r\n      canvas:container,\r\n      antialias:true\r\n    } );\r\n    renderer.setPixelRatio = devicePixelRatio;\r\n    renderer.setSize(width, height);\r\n    \r\n\r\n  }\r\n\r\n  function sceneElements(){\r\n\r\n    var geometry = new THREE.PlaneBufferGeometry(100, 400, 400, 400);\r\n\r\n    var uniforms = {\r\n      time: { type: \"f\", value: 0.0 },\r\n      distortCenter: { type: \"f\", value: 0.1 },\r\n      roadWidth: { type: \"f\", value: 0.5 },\r\n      pallete:{ type: \"t\", value: null},\r\n      speed: { type: \"f\", value: 1 },\r\n      maxHeight: { type: \"f\", value: 10.0 },\r\n      color:new THREE.Color(1, 1, 1)\r\n    }\r\n    \r\n    var material = new THREE.ShaderMaterial({\r\n      uniforms: THREE.UniformsUtils.merge([ THREE.ShaderLib.basic.uniforms, uniforms ]),\r\n      vertexShader: document.getElementById( 'custom-vertex' ).textContent,\r\n      fragmentShader: document.getElementById( 'custom-fragment' ).textContent,\r\n      wireframe:false,\r\n      fog:true\r\n    });\r\n\r\n    terrain = new THREE.Mesh(geometry, material);\r\n    terrain.position.z = -180;\r\n    terrain.rotation.x = -Math.PI / 2\r\n\r\n    scene.add(terrain)\r\n\r\n  }\r\n\r\n  function sceneTextures(){\r\n    // pallete\r\n    new THREE.TextureLoader().load( params.palleteImage, function(texture){\r\n      terrain.material.uniforms.pallete.value = texture;\r\n      terrain.material.needsUpdate = true;\r\n    });\r\n  }\r\n\r\n  function sky(){\r\n    sky = new THREE.Sky();\r\n    sky.scale.setScalar( 450000 );\r\n    sky.material.uniforms.turbidity.value = 1;\r\n    sky.material.uniforms.rayleigh.value = 0.01;\r\n    sky.material.uniforms.luminance.value = 1;\r\n    sky.material.uniforms.mieCoefficient.value = 0.0003;\r\n    sky.material.uniforms.mieDirectionalG.value = 0.99995;\r\n    \r\n    scene.add( sky );\r\n\r\n    sunSphere = new THREE.Mesh(\r\n      new THREE.SphereBufferGeometry( 20000, 16, 8 ),\r\n      new THREE.MeshBasicMaterial( { color: 0xffffff } )\r\n    );\r\n    sunSphere.visible = false;\r\n    scene.add( sunSphere );\r\n    \r\n    var theta = Math.PI * ( -0.03 );\r\n    var phi = 2 * Math.PI * ( -.25 );\r\n\r\n    sunSphere.position.x = 400000 * Math.cos( phi );\r\n    sunSphere.position.y = 400000 * Math.sin( phi ) * Math.sin( theta );\r\n    sunSphere.position.z = 400000 * Math.sin( phi ) * Math.cos( theta );\r\n    \r\n    sky.material.uniforms.sunPosition.value.copy( sunSphere.position );\r\n  }\r\n\r\n  function resize(){\r\n    width = window.innerWidth\r\n    height = window.innerHeight\r\n    camera.aspect = width / height;\r\n    camera.updateProjectionMatrix();\r\n\r\n    renderer.setSize( width, height );\r\n  }\r\n\r\n  function onInputMove(e){\r\n    e.preventDefault();\r\n    \r\n    var x, y\r\n    if(e.type == \"mousemove\"){\r\n      x = e.clientX;\r\n      y = e.clientY;\r\n    }else{\r\n      x = e.changedTouches[0].clientX\r\n      y = e.changedTouches[0].clientY\r\n    }\r\n    \r\n    mouse.x = x;\r\n    mouse.y = y;\r\n    \r\n  }\r\n\r\n  function render(){\r\n    requestAnimationFrame(render)\r\n\r\n    // damping mouse for smoother interaction\r\n    mouse.xDamped = lerp(mouse.xDamped, mouse.x, 0.1);\r\n    mouse.yDamped = lerp(mouse.yDamped, mouse.y, 0.1);\r\n\r\n    var time = performance.now() * 0.001\r\n    terrain.material.uniforms.time.value = time;\r\n    terrain.material.uniforms.distortCenter.value = Math.sin(time) * 0.1;\r\n    terrain.material.uniforms.maxHeight.value = map(mouse.yDamped, 0, height, 20, 5);\r\n    \r\n\r\n    renderer.render(scene, camera)\r\n\r\n  }\r\n\r\n  function map (value, start1, stop1, start2, stop2) {\r\n    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))\r\n  }\r\n\r\n  function lerp (start, end, amt){\r\n    return (1 - amt) * start + amt * end\r\n  }\r\n}\r\n\r\nconst getRandomNumber = (min, max) => (Math.random() * (max - min) + min);\r\n\r\nanimateTitles();\r\n\r\nfunction animateTitles() {\r\n  const overlay = document.querySelector('.overlay'); \r\n  const title = document.querySelector('.content__title');\r\n  charming(title);\r\n  const titleLetters = Array.from(title.querySelectorAll('span'));\r\n\r\n  TweenMax.to(overlay, 2, {\r\n    ease: Quad.easeOut,\r\n    opacity: 0\r\n  });\r\n\r\n  TweenMax.set(titleLetters, {opacity: 0});\r\n  TweenMax.staggerTo(titleLetters, 1, {\r\n    ease: Expo.easeOut,\r\n    startAt: {rotationX: -100, z: -1000},\r\n    opacity: 1,\r\n    rotationX: 0,\r\n    z: 0\r\n  }, 0.1);\r\n\r\n  const subtitle = document.querySelector('.content__subtitle');\r\n  TweenMax.set(subtitle, {opacity: 0});\r\n  TweenMax.to(subtitle, 1.5, {\r\n    ease: Expo.easeOut,\r\n    startAt: {y: 30},\r\n    opacity: 1,\r\n    y: 0\r\n  });\r\n\r\n  const glitch = (el,cycles) => {\r\n    if ( cycles === 0 || cycles > 3 ) return;\r\n    TweenMax.set(el, {\r\n      x: getRandomNumber(-20,20), \r\n      y: getRandomNumber(-20,20),\r\n      color: ['#7aaac3','#55276d','#111'][cycles-1]\r\n    });\r\n    setTimeout(() => {\r\n      TweenMax.set(el, {x: 0, y: 0, color: '#fff'});\r\n      glitch(el, cycles-1);\r\n    }, getRandomNumber(20,100));\r\n  };\r\n\r\n  const loop = (startAt) => {\r\n    this.timeout = setTimeout(() => {\r\n        const titleLettersShuffled = titleLetters.sort((a,b) => 0.5 - Math.random());\r\n        const lettersSet = titleLettersShuffled.slice(0, getRandomNumber(1,titleLetters.length+1));\r\n        for (let i = 0, len = lettersSet.length; i < len-1; ++i) {\r\n          glitch(lettersSet[i], 3);\r\n        }\r\n        loop();\r\n    }, startAt || getRandomNumber(500, 3000));\r\n  }\r\n  loop(1500);\r\n}"
  },
  {
    "path": "js/demo3.js",
    "content": "createLandscape({\r\n  palleteImage:'img/pallete.png'\r\n})\r\n\r\nfunction createLandscape(params){\r\n\r\n  var container = document.querySelector(\".landscape\")\r\n  var width = window.innerWidth;\r\n  var height = window.innerHeight;\r\n\r\n  var scene, renderer, camera;\r\n  var terrain;\r\n\r\n  var mouse = { x:0, y:0, xDamped:0, yDamped:0 };\r\n  var isMobile = typeof window.orientation !== 'undefined'\r\n\r\n  init();\r\n\r\n  function init(){\r\n\r\n    sceneSetup();\r\n    sceneElements();\r\n    sceneTextures();\r\n    render();\r\n\r\n    if(isMobile)\r\n      window.addEventListener(\"touchmove\", onInputMove, {passive:false})\r\n    else\r\n      window.addEventListener(\"mousemove\", onInputMove)\r\n    \r\n    window.addEventListener(\"resize\", resize)\r\n    resize()\r\n  }\r\n\r\n  function sceneSetup(){\r\n    scene = new THREE.Scene();\r\n    var fogColor = new THREE.Color( 0x333333 )\r\n    scene.background = fogColor;\r\n    scene.fog = new THREE.Fog(fogColor, 0, 400);\r\n\r\n    \r\n    sky()\r\n\r\n    camera = new THREE.PerspectiveCamera(60, width / height, .1, 10000);\r\n    camera.position.y = 8;\r\n    camera.position.z = 4;\r\n    \r\n    ambientLight = new THREE.AmbientLight(0xffffff, 1);\r\n    scene.add(ambientLight)\r\n    \r\n\r\n    renderer = new THREE.WebGLRenderer( {\r\n      canvas:container,\r\n      antialias:true\r\n    } );\r\n    renderer.setPixelRatio = devicePixelRatio;\r\n    renderer.setSize(width, height);\r\n    \r\n\r\n  }\r\n\r\n  function sceneElements(){\r\n\r\n    var geometry = new THREE.PlaneBufferGeometry(100, 400, 400, 400);\r\n\r\n    var uniforms = {\r\n      time: { type: \"f\", value: 0.0 },\r\n      scroll: { type: \"f\", value: 0.0 },\r\n      distortCenter: { type: \"f\", value: 0.1 },\r\n      roadWidth: { type: \"f\", value: 0.5 },\r\n      pallete:{ type: \"t\", value: null},\r\n      speed: { type: \"f\", value: 3 },\r\n      maxHeight: { type: \"f\", value: 10.0 },\r\n      color:new THREE.Color(1, 1, 1)\r\n    }\r\n    \r\n    var material = new THREE.ShaderMaterial({\r\n      uniforms: THREE.UniformsUtils.merge([ THREE.ShaderLib.basic.uniforms, uniforms ]),\r\n      vertexShader: document.getElementById( 'custom-vertex' ).textContent,\r\n      fragmentShader: document.getElementById( 'custom-fragment' ).textContent,\r\n      wireframe:false,\r\n      fog:true\r\n    });\r\n\r\n    terrain = new THREE.Mesh(geometry, material);\r\n    terrain.position.z = -180;\r\n    terrain.rotation.x = -Math.PI / 2\r\n\r\n    scene.add(terrain)\r\n\r\n  }\r\n\r\n  function sceneTextures(){\r\n\r\n    // pallete\r\n    new THREE.TextureLoader().load( params.palleteImage, function(texture){\r\n      terrain.material.uniforms.pallete.value = texture;\r\n      terrain.material.needsUpdate = true;\r\n    });\r\n  }\r\n\r\n  function sky(){\r\n    sky = new THREE.Sky();\r\n    sky.scale.setScalar( 450000 );\r\n    sky.material.uniforms.turbidity.value = 13;\r\n    sky.material.uniforms.rayleigh.value = 1.2;\r\n    sky.material.uniforms.luminance.value = 1;\r\n    sky.material.uniforms.mieCoefficient.value = 0.1;\r\n    sky.material.uniforms.mieDirectionalG.value = 0.58;\r\n    \r\n    scene.add( sky );\r\n\r\n    sunSphere = new THREE.Mesh(\r\n      new THREE.SphereBufferGeometry( 20000, 16, 8 ),\r\n      new THREE.MeshBasicMaterial( { color: 0xffffff } )\r\n    );\r\n    sunSphere.visible = false;\r\n    scene.add( sunSphere );\r\n    \r\n    var theta = Math.PI * ( -0.002 );\r\n    var phi = 2 * Math.PI * ( -.25 );\r\n\r\n    sunSphere.position.x = 400000 * Math.cos( phi );\r\n    sunSphere.position.y = 400000 * Math.sin( phi ) * Math.sin( theta );\r\n    sunSphere.position.z = 400000 * Math.sin( phi ) * Math.cos( theta );\r\n    \r\n    sky.material.uniforms.sunPosition.value.copy( sunSphere.position );\r\n  }\r\n\r\n  function resize(){\r\n    width = window.innerWidth\r\n    height = window.innerHeight\r\n    camera.aspect = width / height;\r\n    camera.updateProjectionMatrix();\r\n\r\n    renderer.setSize( width, height );\r\n  }\r\n\r\n  function onInputMove(e){\r\n    e.preventDefault();\r\n    \r\n    var x, y\r\n    if(e.type == \"mousemove\"){\r\n      x = e.clientX;\r\n      y = e.clientY;\r\n    }else{\r\n      x = e.changedTouches[0].clientX\r\n      y = e.changedTouches[0].clientY\r\n    }\r\n    \r\n    mouse.x = x;\r\n    mouse.y = y;\r\n    \r\n  }\r\n\r\n  function render(){\r\n    requestAnimationFrame(render)\r\n\r\n\r\n    // damping mouse for smoother interaction\r\n    mouse.xDamped = lerp(mouse.xDamped, mouse.x, 0.1);\r\n    mouse.yDamped = lerp(mouse.yDamped, mouse.y, 0.1);\r\n\r\n    \r\n    var time = performance.now() * 0.001\r\n    terrain.material.uniforms.time.value = time\r\n    terrain.material.uniforms.scroll.value = time + map(mouse.yDamped, 0, height, 0, 4);\r\n    terrain.material.uniforms.distortCenter.value = Math.sin(time) * 0.1;\r\n    terrain.material.uniforms.roadWidth.value = map(mouse.xDamped, 0, width, 1, 4.5);\r\n\r\n    camera.position.y = map(mouse.yDamped, 0, height, 4, 11);\r\n\r\n    renderer.render(scene, camera)\r\n\r\n  }\r\n\r\n  function map (value, start1, stop1, start2, stop2) {\r\n    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))\r\n  }\r\n\r\n  function lerp (start, end, amt){\r\n    return (1 - amt) * start + amt * end\r\n  }\r\n}\r\n\r\nconst getRandomNumber = (min, max) => (Math.random() * (max - min) + min);\r\n\r\nanimateTitles();\r\n\r\nfunction animateTitles() {\r\n  const overlay = document.querySelector('.overlay'); \r\n  const title = document.querySelector('.content__title');\r\n  charming(title);\r\n  const titleLetters = Array.from(title.querySelectorAll('span'));\r\n\r\n  TweenMax.to(overlay, 2, {\r\n    ease: Quad.easeOut,\r\n    opacity: 0\r\n  });\r\n\r\n  TweenMax.set(titleLetters, {opacity: 0});\r\n  TweenMax.staggerTo(titleLetters, 1.5, {\r\n    ease: Expo.easeOut,\r\n    startAt: {rotationX: -100, z: -1000},\r\n    opacity: 1,\r\n    rotationX: 0,\r\n    z: 0\r\n  }, 0.1);\r\n\r\n  const subtitle = document.querySelector('.content__subtitle');\r\n  TweenMax.set(subtitle, {opacity: 0});\r\n  TweenMax.to(subtitle, 1.5, {\r\n    ease: Expo.easeOut,\r\n    startAt: {y: 30},\r\n    opacity: 1,\r\n    y: 0\r\n  });\r\n\r\n  const glitch = (el,cycles) => {\r\n    if ( cycles === 0 || cycles > 3 ) return;\r\n    TweenMax.set(el, {\r\n      x: getRandomNumber(-20,20), \r\n      y: getRandomNumber(-20,20),\r\n      color: ['#f4d339','#df003f','#111111'][cycles-1]\r\n    });\r\n    setTimeout(() => {\r\n      TweenMax.set(el, {x: 0, y: 0, color: '#fff'});\r\n      glitch(el, cycles-1);\r\n    }, getRandomNumber(20,100));\r\n  };\r\n\r\n  const loop = (startAt) => {\r\n    this.timeout = setTimeout(() => {\r\n        const titleLettersShuffled = titleLetters.sort((a,b) => 0.5 - Math.random());\r\n        const lettersSet = titleLettersShuffled.slice(0, getRandomNumber(1,titleLetters.length+1));\r\n        for (let i = 0, len = lettersSet.length; i < len-1; ++i) {\r\n          glitch(lettersSet[i], 3);\r\n        }\r\n        loop();\r\n    }, startAt || getRandomNumber(500, 3000));\r\n  }\r\n  loop(1500);\r\n}"
  },
  {
    "path": "js/vendor/Sky.js",
    "content": "/**\n * @author zz85 / https://github.com/zz85\n *\n * Based on \"A Practical Analytic Model for Daylight\"\n * aka The Preetham Model, the de facto standard analytic skydome model\n * http://www.cs.utah.edu/~shirley/papers/sunsky/sunsky.pdf\n *\n * First implemented by Simon Wallner\n * http://www.simonwallner.at/projects/atmospheric-scattering\n *\n * Improved by Martin Upitis\n * http://blenderartists.org/forum/showthread.php?245954-preethams-sky-impementation-HDR\n *\n * Three.js integration by zz85 http://twitter.com/blurspline\n*/\n\nTHREE.Sky = function () {\n\n\tvar shader = THREE.Sky.SkyShader;\n\n\tvar material = new THREE.ShaderMaterial( {\n\t\tfragmentShader: shader.fragmentShader,\n\t\tvertexShader: shader.vertexShader,\n\t\tuniforms: THREE.UniformsUtils.clone( shader.uniforms ),\n\t\tside: THREE.BackSide\n\t} );\n\n\tTHREE.Mesh.call( this, new THREE.BoxBufferGeometry( 1, 1, 1 ), material );\n\n};\n\nTHREE.Sky.prototype = Object.create( THREE.Mesh.prototype );\n\nTHREE.Sky.SkyShader = {\n\n\tuniforms: {\n\t\tluminance: { value: 1 },\n\t\tturbidity: { value: 2 },\n\t\trayleigh: { value: 1 },\n\t\tmieCoefficient: { value: 0.005 },\n\t\tmieDirectionalG: { value: 0.8 },\n\t\tsunPosition: { value: new THREE.Vector3() }\n\t},\n\n\tvertexShader: [\n\t\t'uniform vec3 sunPosition;',\n\t\t'uniform float rayleigh;',\n\t\t'uniform float turbidity;',\n\t\t'uniform float mieCoefficient;',\n\n\t\t'varying vec3 vWorldPosition;',\n\t\t'varying vec3 vSunDirection;',\n\t\t'varying float vSunfade;',\n\t\t'varying vec3 vBetaR;',\n\t\t'varying vec3 vBetaM;',\n\t\t'varying float vSunE;',\n\n\t\t'const vec3 up = vec3( 0.0, 1.0, 0.0 );',\n\n\t\t// constants for atmospheric scattering\n\t\t'const float e = 2.71828182845904523536028747135266249775724709369995957;',\n\t\t'const float pi = 3.141592653589793238462643383279502884197169;',\n\n\t\t// wavelength of used primaries, according to preetham\n\t\t'const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );',\n\t\t// this pre-calcuation replaces older TotalRayleigh(vec3 lambda) function:\n\t\t// (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn))\n\t\t'const vec3 totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );',\n\n\t\t// mie stuff\n\t\t// K coefficient for the primaries\n\t\t'const float v = 4.0;',\n\t\t'const vec3 K = vec3( 0.686, 0.678, 0.666 );',\n\t\t// MieConst = pi * pow( ( 2.0 * pi ) / lambda, vec3( v - 2.0 ) ) * K\n\t\t'const vec3 MieConst = vec3( 1.8399918514433978E14, 2.7798023919660528E14, 4.0790479543861094E14 );',\n\n\t\t// earth shadow hack\n\t\t// cutoffAngle = pi / 1.95;\n\t\t'const float cutoffAngle = 1.6110731556870734;',\n\t\t'const float steepness = 1.5;',\n\t\t'const float EE = 1000.0;',\n\n\t\t'float sunIntensity( float zenithAngleCos ) {',\n\t\t'\tzenithAngleCos = clamp( zenithAngleCos, -1.0, 1.0 );',\n\t\t'\treturn EE * max( 0.0, 1.0 - pow( e, -( ( cutoffAngle - acos( zenithAngleCos ) ) / steepness ) ) );',\n\t\t'}',\n\n\t\t'vec3 totalMie( float T ) {',\n\t\t'\tfloat c = ( 0.2 * T ) * 10E-18;',\n\t\t'\treturn 0.434 * c * MieConst;',\n\t\t'}',\n\n\t\t'void main() {',\n\n\t\t'\tvec4 worldPosition = modelMatrix * vec4( position, 1.0 );',\n\t\t'\tvWorldPosition = worldPosition.xyz;',\n\n\t\t'\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',\n\t\t'\tgl_Position.z = gl_Position.w;', // set z to camera.far\n\n\t\t'\tvSunDirection = normalize( sunPosition );',\n\n\t\t'\tvSunE = sunIntensity( dot( vSunDirection, up ) );',\n\n\t\t'\tvSunfade = 1.0 - clamp( 1.0 - exp( ( sunPosition.y / 450000.0 ) ), 0.0, 1.0 );',\n\n\t\t'\tfloat rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );',\n\n\t\t// extinction (absorbtion + out scattering)\n\t\t// rayleigh coefficients\n\t\t'\tvBetaR = totalRayleigh * rayleighCoefficient;',\n\n\t\t// mie coefficients\n\t\t'\tvBetaM = totalMie( turbidity ) * mieCoefficient;',\n\n\t\t'}'\n\t].join( '\\n' ),\n\n\tfragmentShader: [\n\t\t'varying vec3 vWorldPosition;',\n\t\t'varying vec3 vSunDirection;',\n\t\t'varying float vSunfade;',\n\t\t'varying vec3 vBetaR;',\n\t\t'varying vec3 vBetaM;',\n\t\t'varying float vSunE;',\n\n\t\t'uniform float luminance;',\n\t\t'uniform float mieDirectionalG;',\n\n\t\t'const vec3 cameraPos = vec3( 0.0, 0.0, 0.0 );',\n\n\t\t// constants for atmospheric scattering\n\t\t'const float pi = 3.141592653589793238462643383279502884197169;',\n\n\t\t'const float n = 1.0003;', // refractive index of air\n\t\t'const float N = 2.545E25;', // number of molecules per unit volume for air at\n\t\t\t\t\t\t\t\t\t// 288.15K and 1013mb (sea level -45 celsius)\n\n\t\t// optical length at zenith for molecules\n\t\t'const float rayleighZenithLength = 8.4E3;',\n\t\t'const float mieZenithLength = 1.25E3;',\n\t\t'const vec3 up = vec3( 0.0, 1.0, 0.0 );',\n\t\t// 66 arc seconds -> degrees, and the cosine of that\n\t\t'const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;',\n\n\t\t// 3.0 / ( 16.0 * pi )\n\t\t'const float THREE_OVER_SIXTEENPI = 0.05968310365946075;',\n\t\t// 1.0 / ( 4.0 * pi )\n\t\t'const float ONE_OVER_FOURPI = 0.07957747154594767;',\n\n\t\t'float rayleighPhase( float cosTheta ) {',\n\t\t'\treturn THREE_OVER_SIXTEENPI * ( 1.0 + pow( cosTheta, 2.0 ) );',\n\t\t'}',\n\n\t\t'float hgPhase( float cosTheta, float g ) {',\n\t\t'\tfloat g2 = pow( g, 2.0 );',\n\t\t'\tfloat inverse = 1.0 / pow( 1.0 - 2.0 * g * cosTheta + g2, 1.5 );',\n\t\t'\treturn ONE_OVER_FOURPI * ( ( 1.0 - g2 ) * inverse );',\n\t\t'}',\n\n\t\t// Filmic ToneMapping http://filmicgames.com/archives/75\n\t\t'const float A = 0.15;',\n\t\t'const float B = 0.50;',\n\t\t'const float C = 0.10;',\n\t\t'const float D = 0.20;',\n\t\t'const float E = 0.02;',\n\t\t'const float F = 0.30;',\n\n\t\t'const float whiteScale = 1.0748724675633854;', // 1.0 / Uncharted2Tonemap(1000.0)\n\n\t\t'vec3 Uncharted2Tonemap( vec3 x ) {',\n\t\t'\treturn ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;',\n\t\t'}',\n\n\n\t\t'void main() {',\n\t\t// optical length\n\t\t// cutoff angle at 90 to avoid singularity in next formula.\n\t\t'\tfloat zenithAngle = acos( max( 0.0, dot( up, normalize( vWorldPosition - cameraPos ) ) ) );',\n\t\t'\tfloat inverse = 1.0 / ( cos( zenithAngle ) + 0.15 * pow( 93.885 - ( ( zenithAngle * 180.0 ) / pi ), -1.253 ) );',\n\t\t'\tfloat sR = rayleighZenithLength * inverse;',\n\t\t'\tfloat sM = mieZenithLength * inverse;',\n\n\t\t// combined extinction factor\n\t\t'\tvec3 Fex = exp( -( vBetaR * sR + vBetaM * sM ) );',\n\n\t\t// in scattering\n\t\t'\tfloat cosTheta = dot( normalize( vWorldPosition - cameraPos ), vSunDirection );',\n\n\t\t'\tfloat rPhase = rayleighPhase( cosTheta * 0.5 + 0.5 );',\n\t\t'\tvec3 betaRTheta = vBetaR * rPhase;',\n\n\t\t'\tfloat mPhase = hgPhase( cosTheta, mieDirectionalG );',\n\t\t'\tvec3 betaMTheta = vBetaM * mPhase;',\n\n\t\t'\tvec3 Lin = pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * ( 1.0 - Fex ), vec3( 1.5 ) );',\n\t\t'\tLin *= mix( vec3( 1.0 ), pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * Fex, vec3( 1.0 / 2.0 ) ), clamp( pow( 1.0 - dot( up, vSunDirection ), 5.0 ), 0.0, 1.0 ) );',\n\n\t\t// nightsky\n\t\t'\tvec3 direction = normalize( vWorldPosition - cameraPos );',\n\t\t'\tfloat theta = acos( direction.y ); // elevation --> y-axis, [-pi/2, pi/2]',\n\t\t'\tfloat phi = atan( direction.z, direction.x ); // azimuth --> x-axis [-pi/2, pi/2]',\n\t\t'\tvec2 uv = vec2( phi, theta ) / vec2( 2.0 * pi, pi ) + vec2( 0.5, 0.0 );',\n\t\t'\tvec3 L0 = vec3( 0.1 ) * Fex;',\n\n\t\t// composition + solar disc\n\t\t'\tfloat sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );',\n\t\t'\tL0 += ( vSunE * 19000.0 * Fex ) * sundisk;',\n\n\t\t'\tvec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );',\n\n\t\t'\tvec3 curr = Uncharted2Tonemap( ( log2( 2.0 / pow( luminance, 4.0 ) ) ) * texColor );',\n\t\t'\tvec3 color = curr * whiteScale;',\n\n\t\t'\tvec3 retColor = pow( color, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',\n\n\t\t'\tgl_FragColor = vec4( retColor, 1.0 );',\n\n\t\t'}'\n\t].join( '\\n' )\n\n};\n"
  }
]