K01

k01.js

var qg = function() {
        function t() {
            var e = this;
            fo(this, t),
            this.width = window.innerWidth,
            Mo() ? this.height = window.innerHeight + 100 : this.height = window.innerHeight,
            this.actif = !1,
            this.scene = new jp,
            this.scene1 = new jp,
            this.clock = new Tg,
            this.mouse = new xl(0,0),
            this.prevMouse = new xl(0,0),
            this.currentWave = 0,
            this.sens = !1,
            this.currentScr = 0,
            this.baseTexture = new Pl(this.width,this.height,{
                minFilter: Fo,
                magFilter: Fo,
                format: Xo
            }),
            this.renderer = new qp,
            this.renderer.setPixelRatio(.5),
            Mo() && this.renderer.setPixelRatio(2),
            this.renderer.setSize(this.width, this.height);
            var n = this.height
              , i = this.width / this.height;
            this.camera = new pu(n * i / -2,n * i / 2,n / 2,n / -2,-1e3,1e3),
            this.renderer.setClearColor(0, 1),
            document.body.appendChild(this.renderer.domElement),
            this.video = document.getElementById("video"),
            this.video.play(),
            this.video.loop = this.video.muted = !0,
            this.texture = new Fm(video),
            this.material = new Hh({
                extensions: {
                    derivatives: "#extension GL_OES_standard_derivatives : enable"
                },
                side: 2,
                uniforms: {
                    time: {
                        value: 0
                    },
                    uDisplacement: {
                        value: null
                    },
                    uTexture: {
                        value: this.texture
                    },
                    resolution: {
                        value: new Rl
                    }
                },
                vertexShader: "varying vec2 vUv;\n    void main()\n    {\n        vUv = uv;\n        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);\n    }",
                fragmentShader: "uniform float time;\n\n    uniform sampler2D uTexture;\n    uniform sampler2D uDisplacement;\n    \n    varying vec2 vUv;\n\n    float PI = 3.141592653589793238;\n    void main() {\n        \n        vec4 displacement = texture2D(uDisplacement, vUv);\n        float theta = displacement.r*2.*PI;\n\n        vec2 dir = vec2(sin(theta), cos(theta));\n\n        vec2 uv = vUv + dir*displacement.r*0.2; //1.\n\n        vec4 color = texture2D(uTexture, uv);\n\n        gl_FragColor = color;\n    }"
            }),
            this.plane = new Nh(this.geometry,this.material1),
            this.scene.add(this.plane),
            this.max = 100,
            window.innerWidth < 768 ? this.geometry = new iu(350,350,1,1) : this.geometry = new iu(450,450,1,1),
            this.geometryFullScreen = new iu(this.width,this.height,1,1),
            this.meshes = [],
            this.meshes2 = [],
            this.meshesMouse = [],
            this.textureEau = (new lg).load(document.body.getAttribute("data-eau"));
            for (var r = 0; r < this.max; r++) {
                var s = new ih({
                    map: (new lg).load(document.body.getAttribute("data-brush")),
                    transparent: !0
                })
                  , a = new Nh(this.geometry,s);
                a.visible = !1,
                this.scene.add(a),
                this.meshes.push(a)
            }
            for (var o = 0; o < this.max; o++) {
                var l = new ih({
                    map: (new lg).load(document.body.getAttribute("data-eau")),
                    transparent: !0
                })
                  , c = new Nh(this.geometry,l);
                c.visible = !1,
                this.scene.add(c),
                this.meshes2.push(c)
            }
            for (var h = 0; h < this.max; h++) {
                var u = new ih({
                    map: (new lg).load(document.body.getAttribute("data-mouse")),
                    transparent: !0
                })
                  , d = new Nh(this.geometry,u);
                d.visible = !1,
                this.scene.add(d),
                this.meshesMouse.push(d)
            }
            this.quad = new Nh(this.geometryFullScreen,this.material),
            this.scene1.add(this.quad),
            window.addEventListener("resize", (function() {
                e.width = window.innerWidth,
                Mo() ? e.height = window.innerHeight + 100 : e.height = window.innerHeight,
                e.camera.aspect = e.width / e.height,
                e.camera.updateProjectionMatrix(),
                e.renderer.setSize(e.width, e.height)
            }
            ))
        }
        return vo(t, [{
            key: "setNewWave",
            value: function(t, e, n, i, r, s) {
                var a = i[n];
                a.blocClassic = a.click = !1,
                a.visible = !0,
                a.position.x = t,
                a.position.y = e,
                a.scale.x = a.scale.y = 1,
                i == this.meshes ? (a.material.opacity = .5,
                a.scale.x = a.scale.y = 1.2) : i == this.meshes2 ? (a.material.opacity = .2,
                a.rotation.z = 2 * Math.random() * Math.PI) : i == this.meshesMouse && (a.material.opacity = .55,
                a.scale.x = a.scale.y = .7,
                a.rotation.z = 2 * Math.random() * Math.PI),
                null == r || r.el.classList.contains("bloc1") || (a.scale.x = r.el.clientWidth / 300,
                a.blocClassic = !0),
                null != s && (a.click = !0,
                a.material.opacity = .4,
                a.scale.x = a.scale.y = s,
                a.rotation.z = 0)
            }
        }, {
            key: "trackMousePos",
            value: function() {
                Math.abs(this.mouse.x - this.prevMouse.x) < 4 && Math.abs(this.mouse.y - this.prevMouse.y) < 4 || (this.setNewWave(this.mouse.x, this.mouse.y, this.currentWave, this.meshesMouse),
                this.currentWave = (this.currentWave + 1) % this.max),
                this.prevMouse.x = this.mouse.x,
                this.prevMouse.y = this.mouse.y;
                var t, e = _o(this.blocks);
                try {
                    for (e.s(); !(t = e.n()).done; ) {
                        var n = t.value;
                        if (n.el.classList.contains("bloc1"))
                            n.y = -n.el.getBoundingClientRect().top + this.height / 2 - n.el.clientHeight / 2;
                        else {
                            var i = n.el.clientHeight - 210;
                            this.sens || (i = 210),
                            n.y = -n.el.getBoundingClientRect().top + this.height / 2 - i
                        }
                        n.y + this.height / 2 < this.height && n.y + this.height / 2 > 0 && (n.el.classList.contains("blocHaut") && !this.sens || n.el.classList.contains("blocBas") && this.sens) && (n.x = n.el.getBoundingClientRect().left - window.innerWidth / 2 + n.el.clientWidth / 2,
                        Math.abs(n.y - n.prevY) < 4 || (this.setNewWave(n.x, n.y, this.currentWave, this.meshes, n),
                        this.setNewWave(n.x, n.y, this.currentWave, this.meshes2, n),
                        this.currentWave = (this.currentWave + 1) % this.max),
                        n.prevY = n.y)
                    }
                } catch (t) {
                    e.e(t)
                } finally {
                    e.f()
                }
            }
        }, {
            key: "animate",
            value: function() {
                this.trackMousePos(),
                this.rafWebgl = requestAnimationFrame(this.animate.bind(this)),
                this.renderer.setRenderTarget(this.baseTexture),
                this.renderer.render(this.scene, this.camera),
                this.material.uniforms.uDisplacement.value = this.baseTexture.texture,
                this.renderer.setRenderTarget(null),
                this.renderer.clear(),
                this.renderer.render(this.scene1, this.camera);
                var t = this.clock.getDelta();
                this.meshes.forEach((function(t) {
                    t.visible && (t.material.opacity *= .92,
                    t.scale.x = .982 * t.scale.x + .02,
                    t.blocClassic || (t.scale.y = t.scale.x),
                    t.material.opacity < .002 && (t.visible = !1))
                }
                )),
                this.meshes2.forEach((function(e) {
                    e.visible && (e.rotation.z += t / 2,
                    e.material.opacity *= .98,
                    e.scale.x = .982 * e.scale.x + .04,
                    e.blocClassic || (e.scale.y = e.scale.x),
                    e.material.opacity < .002 && (e.visible = !1))
                }
                )),
                this.meshesMouse.forEach((function(e) {
                    e.visible && (e.click ? e.material.opacity *= .95 : (e.rotation.z += t / 2,
                    e.material.opacity *= .98),
                    e.scale.x = .982 * e.scale.x + .03,
                    e.scale.y = e.scale.x,
                    e.material.opacity < .002 && (e.visible = !1))
                }
                )),
                window.pageYOffset < this.currentScr ? this.sens = !1 : window.pageYOffset > this.currentScr && (this.sens = !0),
                this.currentScr = window.pageYOffset
            }
        }, {
            key: "init",
            value: function() {
                this.blocks = [],
                this.mouseE = this.mouseMove.bind(this),
                window.addEventListener("mousemove", this.mouseE),
                this.mouseC = this.mouseClick.bind(this),
                document.body.addEventListener("click", this.mouseC)
            }
        }, {
            key: "updateBlocs",
            value: function() {
                var t = this;
                this.blocks = [],
                document.querySelectorAll(".bloc").forEach((function(e) {
                    var n = {};
                    n.el = e,
                    n.prevY = 0,
                    t.blocks.push(n)
                }
                ))
            }
        }, {
            key: "mouseMove",
            value: function(t) {
                this.mouse.x = t.clientX - this.width / 2,
                this.mouse.y = this.height / 2 - t.clientY
            }
        }, {
            key: "mouseClick",
            value: function(t) {
                for (var e = this, n = 0, i = 0; i < 10; i++)
                    !function(t) {
                        vi.delayedCall(n, (function() {
                            e.setNewWave(e.mouse.x, e.mouse.y, e.currentWave, e.meshesMouse, void 0, .2 + .1 * t),
                            e.currentWave = (e.currentWave + 1) % e.max
                        }
                        ))
                    }(i),
                    n += .02
            }
        }, {
            key: "killWebgl",
            value: function() {
                cancelAnimationFrame(this.rafWebgl),
                window.removeEventListener("mousemove", this.mouseE),
                document.body.removeEventListener("click", this.mouseC)
            }
        }]),
        t
    }()