Created
December 11, 2023 10:11
-
-
Save hatsumatsu/8bf77d9348749a605aa62c0594f5fef5 to your computer and use it in GitHub Desktop.
K01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment