Skip to content

Instantly share code, notes, and snippets.

@hatsumatsu

hatsumatsu/k01.js

Created December 11, 2023 10:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hatsumatsu/8bf77d9348749a605aa62c0594f5fef5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hatsumatsu/8bf77d9348749a605aa62c0594f5fef5 to your computer and use it in GitHub Desktop.
Download ZIP
K01
Raw
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
}()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment