const vertex = `float PI = 3.1415926535897932384626433;
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r){
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v) {
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
uniform vec3 p1v;
uniform vec3 p1c;
uniform vec3 p2v;
uniform vec3 p2c;
uniform vec3 p3v;
uniform vec3 p3c;
uniform vec3 p4v;
uniform vec3 p4c;
uniform vec3 p5v;
uniform vec3 p5c;
uniform vec3 p6v;
uniform vec3 p6c;
uniform vec3 p7v;
uniform vec3 p7c;
uniform vec3 p8v;
uniform vec3 p8c;
uniform vec3 p9v;
uniform vec3 p9c;
uniform vec3 p10v;
uniform vec3 p10c;
uniform vec3 p11v;
uniform vec3 p11c;
uniform vec3 p12v;
uniform vec3 p12c;
uniform vec3 p13v;
uniform vec3 p13c;
uniform vec3 p14v;
uniform vec3 p14c;
uniform vec3 p15v;
uniform vec3 p15c;
uniform vec3 p16v;
uniform vec3 p16c;
uniform vec3 p17v;
uniform vec3 p17c;
uniform vec3 p18v;
uniform vec3 p18c;
uniform vec3 p19v;
uniform vec3 p19c;
uniform vec3 p20v;
uniform vec3 p20c;
uniform float pointCount;
uniform float progress;
uniform float w;
uniform float h;
attribute vec3 aCoordinates;
varying vec2 vCoordinates;
varying vec3 vMvm;
varying vec3 vPos;
varying float delayedProgress;
void main() {
// voronoi
float shortest = max(w,h) + 1.;
vec3 color = vec3(0.,0.,0.);
vec3 closest = vec3(0.,0.,0.);
float d = 0.;
d = distance(p1v,position); if ( d < shortest) { shortest = d; closest = p1v; color = p1c; }
d = distance(p2v,position); if ( d < shortest) { shortest = d; closest = p2v; color = p2c; }
d = distance(p3v,position); if ( d < shortest) { shortest = d; closest = p3v; color = p3c; }
d = distance(p4v,position); if ( d < shortest) { shortest = d; closest = p4v; color = p4c; }
d = distance(p5v,position); if ( d < shortest) { shortest = d; closest = p5v; color = p5c; }
d = distance(p6v,position); if ( d < shortest) { shortest = d; closest = p6v; color = p6c; }
d = distance(p7v,position); if ( d < shortest) { shortest = d; closest = p7v; color = p7c; }
d = distance(p8v,position); if ( d < shortest) { shortest = d; closest = p8v; color = p8c; }
d = distance(p9v,position); if ( d < shortest) { shortest = d; closest = p9v; color = p9c; }
d = distance(p10v,position); if ( d < shortest) { shortest = d; closest = p10v; color = p10c; }
d = distance(p11v,position); if ( d < shortest) { shortest = d; closest = p11v; color = p11c; }
d = distance(p12v,position); if ( d < shortest) { shortest = d; closest = p12v; color = p12c; }
d = distance(p13v,position); if ( d < shortest) { shortest = d; closest = p13v; color = p13c; }
d = distance(p14v,position); if ( d < shortest) { shortest = d; closest = p14v; color = p14c; }
d = distance(p15v,position); if ( d < shortest) { shortest = d; closest = p15v; color = p15c; }
d = distance(p16v,position); if ( d < shortest) { shortest = d; closest = p16v; color = p16c; }
d = distance(p17v,position); if ( d < shortest) { shortest = d; closest = p17v; color = p17c; }
d = distance(p18v,position); if ( d < shortest) { shortest = d; closest = p18v; color = p18c; }
d = distance(p19v,position); if ( d < shortest) { shortest = d; closest = p19v; color = p19c; }
d = distance(p20v,position); if ( d < shortest) { shortest = d; closest = p20v; color = p20c; }
float xPos = ((aCoordinates.x/w)*2.)-1.;
vCoordinates = aCoordinates.xy;
vMvm = vec3(xPos, aCoordinates.y/h,0.);
vPos = position;
float dir = color.x > .5 ? -1. :1.;
float progressPerc = progress/100.;
float lowerBound = color.r *.5;
float upperBound = 1. - (color.g * .5);
delayedProgress = smoothstep(lowerBound, upperBound, progressPerc);
float leverProgress = 1. - abs((delayedProgress -.5)*2.);
vec3 newPos = position;
float dst = distance(closest, newPos);
float a =newPos.y- closest.y;
float b =newPos.x- closest.x;
float angle =atan(a , b);
angle += PI*2. * delayedProgress;
float x = cos(angle) * dst;
float y = sin(angle) * dst;
newPos.x = closest.x + x;
newPos.z = newPos.z + (closest.z + y)*leverProgress + (500. * leverProgress * dir);
vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.);
gl_PointSize = 2000.*(1./-mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}`;
const fragment = `
uniform float pointCount;
uniform float progress;
uniform float w;
uniform float h;
varying vec2 vCoordinates;
uniform sampler2D currentImg;
uniform sampler2D nextImg;
varying vec3 vMvm;
varying vec3 vPos;
varying float delayedProgress;
void main() {
vec2 imgUv = vec2(vCoordinates.x/w,vCoordinates.y/h);
vec4 current = texture2D(currentImg,imgUv);
vec4 next = texture2D(nextImg,imgUv);
vec4 image = mix(current, next, delayedProgress);
gl_FragColor = image;
}`;
const img1 = "https://assets.codepen.io/5946/stair1.jpg"; // https://unsplash.com/photos/w6OniVDCfn0
const img2 = "https://assets.codepen.io/5946/stair2.jpg"; // https://unsplash.com/photos/cfQEO_1S0Rs
const img3 = "https://assets.codepen.io/5946/stair3.jpg"; // https://unsplash.com/photos/tb4heMa-ZRo
class Sketch {
constructor() {
this.imgs = [];
this.paths = [img1, img2, img3];
this.camera;
this.scene;
this.renderer;
this.progress = { progress: 0 };
this.active = 0;
this.pointCount = 20;
this.colorsBG = ["#ddf4f0", "#e4e2ee", "#cbdac3"];
this.colorsText = ["#8a3738", "#840c02", "#444"];
this.loadImages();
}
init() {
this.scene = new THREE.Scene();
// this.scene.background = new THREE.Color(0xffffff, 0);
this.addRenderer();
this.addCamera();
this.addLights();
this.addObjects();
this.addEvents();
document.body.appendChild(this.renderer.domElement);
document.body.style.backgroundColor = this.colorsBG[0];
document.body.style.color = this.colorsText[0];
this.animate();
}
loadImages() {
this.paths.forEach(
function (path) {
let img = new Image();
img.onload = () => {
this.imgs.push(img);
if (this.imgs.length == this.paths.length) this.imgsReady();
};
img.src = path;
}.bind(this)
);
}
imgsReady() {
this.init();
}
addObjects() {
// this.geo = new THREE.PlaneBufferGeometry(1000, 1000, 100, 100);
this.geo = new THREE.BufferGeometry();
this.w = this.imgs[1].naturalWidth;
this.h = this.imgs[1].naturalHeight;
this.particleCount = this.w * this.h;
this.textures = [
// new THREE.TextureLoader().load(mask),
new THREE.TextureLoader().load(img1),
new THREE.TextureLoader().load(img2),
new THREE.TextureLoader().load(img3)
];
this.positions = new THREE.BufferAttribute(
new Float32Array(this.particleCount * 3),
3
);
this.coordinates = new THREE.BufferAttribute(
new Float32Array(this.particleCount * 3),
3
);
let index = 0;
for (let i = 0; i < this.w; i++) {
for (let j = 0; j < this.h; j++) {
this.positions.setXYZ(index, i - this.w / 2, j - this.h / 2, 0);
this.coordinates.setXYZ(index, i, j, 0);
index++;
}
}
this.geo.setAttribute("position", this.positions);
this.geo.setAttribute("aCoordinates", this.coordinates);
let points = [];
let colors = [];
for (let i = 1; i <= this.pointCount; i++) {
points.push(
new THREE.Vector3(
Math.round(this.w * Math.random()),
Math.round(this.h * Math.random()),
0
)
);
colors.push(new THREE.Vector3(Math.random(), Math.random(), Math.random()));
}
this.mat = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
transparent: true,
depthTest: false,
depthWrite: false,
uniforms: {
progress: { value: this.progress.progress },
w: { value: this.w },
h: { value: this.h },
pointCount: { value: this.pointCount },
currentImg: { value: this.textures[this.active % 3] },
nextImg: { value: this.textures[(this.active + 1) % 3] }
},
vertexShader: vertex,
fragmentShader: fragment
});
for (let i = 1; i <= 20; i++) {
this.mat.uniforms[`p${i}v`] = { value: this.randomVoronoiVector() };
this.mat.uniforms[`p${i}c`] = { value: this.random3DVector() };
this.mat.uniforms[`p${i}a`] = { value: this.random3DDirectionalVector() };
}
this.mesh = new THREE.Points(this.geo, this.mat);
this.scene.add(this.mesh);
}
moveVoronoiVectors() {
for (let i = 1; i <= 20; i++) {
let item = this.mesh.material.uniforms[`p${i}v`].value;
let acc = this.mesh.material.uniforms[`p${i}a`].value;
item.x += acc.x;
item.y += acc.y;
if (item.x <= -this.w / 2) {
item.x = -this.w / 2;
acc.x *= -1;
}
if (item.x >= this.w / 2) {
item.x = this.w / 2;
acc.x *= -1;
}
if (item.y <= -this.h / 2) {
item.y = -this.h / 2;
acc.y *= -1;
}
if (item.y >= this.h / 2) {
item.y = this.h / 2;
acc.y *= -1;
}
}
}
randomVoronoiVector() {
return new THREE.Vector3(
Math.round(this.w * Math.random() - this.w * 0.5),
Math.round(this.h * Math.random() - this.h * 0.5),
0
);
}
random3DVector() {
return new THREE.Vector3(Math.random(), Math.random(), Math.random());
}
random3DDirectionalVector() {
let v = new THREE.Vector3(
Math.random() * 30 * Math.random() < 0.5 ? 1 : -1,
Math.random() * 30 * Math.random() < 0.5 ? 1 : -1,
Math.random()
);
return v;
}
addRenderer() {
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.shadowMap.enabled = true;
}
addCamera() {
this.camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
6000
);
this.camera.position.x = 0;
this.camera.position.y = 0;
// this.camera.position.z = (1 - window.innerWidth / 1600) * 25;
this.camera.position.z = 1000;
this.scene.add(this.camera);
}
addLights() {
let ambLight = new THREE.AmbientLight(0xffffff, 0.7, 100);
this.scene.add(ambLight);
let dirLight = new THREE.DirectionalLight(0xffffff, 1, 100);
dirLight.position.set(-3, 5, -3);
this.scene.add(dirLight);
}
choose(current, next) {
current = current % 3;
next = next % 3;
this.mesh.material.uniforms.currentImg.value = this.textures[current];
this.mesh.material.uniforms.nextImg.value = this.textures[next];
gsap.fromTo(
this.progress,
{ progress: 0 },
{ progress: 100, duration: 2, ease: "power1.inOut" }
);
gsap.fromTo(
"body",
{
backgroundColor: this.colorsBG[current],
color: this.colorsText[current]
},
{
backgroundColor: this.colorsBG[next],
color: this.colorsText[next],
duration: 1.5,
delay: 1,
ease: "power4.inOut"
}
);
}
choosePrev() {
let current = this.active;
let next;
if (this.active == 0) this.active = 3;
this.active--;
next = this.active;
this.choose(current, next);
}
chooseNext() {
let current = this.active;
let next;
this.active++;
next = this.active;
this.choose(current, next);
}
addEvents() {
window.addEventListener("resize", this.onWindowResize.bind(this), false);
}
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
render() {
this.renderer.render(this.scene, this.camera);
}
animate() {
requestAnimationFrame(this.animate.bind(this));
this.moveVoronoiVectors();
this.mesh.material.uniforms.progress.value = this.progress.progress;
this.render();
}
}
let sketch = new Sketch();
document.querySelector(".prev").addEventListener("click", () => {
sketch.choosePrev();
});
document.querySelector(".next").addEventListener("click", () => {
sketch.chooseNext();
});
!
