Morph click event listener over time

Questions
1

Hello,

I have written a click event listener that changes some parameters of my perlin noise shape to a new shape. But it happens instantaneously and it’s jarring. I’m trying to figure out how I would write my code so that it happens gradually and morphs into the new shape? Can anyone help? Thank you!

Here’s my current click code…

 window.addEventListener("mousedown", function(event){
	    config.shader.time = 1.00;
config.shader.u_noise = 0.74;
		config.shader.decay = 0.46;
		config.shader.turb = 0.10;
		config.shader.scale = 5.0;
		config.shader.waves = 10.0;
		//config.shader.size = 1.0;
		config.shader.displ = 0.0;
		config.shader.broken = true;
		config.shader.invert = true;
		config.shader.color = 0;
		config.shader.complex = 0.1;
		pn.refresh();
	});

		
	window.addEventListener("mouseup", function(event){
		config.shader.time = 0.17;
			config.shader.u_noise = 0.91;
			config.shader.decay = 0.86;
			config.shader.turb = 0.20;
			config.shader.scale = 5.0;
			config.shader.waves = 1.64;
			//config.shader.size = 1.0;
			config.shader.displ = 0.0;
			config.shader.broken = true;
			config.shader.invert = true;
			config.shader.color = 5.0;
			config.shader.complex = 0.1;
			pn.refresh();
		});

And also here’s my current Java script…

const config = {
scene: {
speed: 0.24,
position: 3
},
object: {
speed: 0.25
},
shader: {
time: 0.12,
u_noise: 1.00,
decay: 1.00,
turb: 0.23,
scale: 3.78,
waves: 2.20,
size: 1.0,
displ: 0.0,
broken: true,
invert: true,
complex: 0.1,
}
};

const uniforms = {
turb: {
type: “f”,
value: 0.0
},
time: {
type: “f”,
value: 0.0
},
u_noise: {
type: “f”,
value: 0.0
},
decay: {
type: “f”,
value: 0.0
},
complex: {
type: “f”,
value: 0.0
},
waves: {
type: “f”,
value: 0.0
},
eqcolor: {
type: “f”,
value: 0.0
},
pointscale: {
type: “f”,
value: 0.0
},
scale: {
type: “f”,
value: 0.0
},
displ: {
type: “f”,
value: 0.0
},
fragment: {
type: “i”,
value: true
},
redhell: {
type: “i”,
value: true
}
};

class Control {
constructor(props) {
this.controls = new OrbitControls(props.camera, props.canvas);
this.init();
}
init() {
this.controls.target.set(0, 0, 0);
this.controls.rotateSpeed = 1;
this.controls.enableZoom = true;
this.controls.minDistance = 1;
this.controls.maxDistance = 7;
this.controls.enableDamping = true;

	this.update();
}
update() {
	this.controls.update();
}

}

class Particles {
constructor(props) {
this.scene = props.scene ? props.scene : null;
this.clock = new THREE.Clock();
this.init();
}
init() {
this.p_grp = new THREE.Object3D();
this.p_mat = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById(“vertexShader”).textContent,
fragmentShader: document.getElementById(“fragmentShader”).textContent
});
this.p_geo = new THREE.IcosahedronBufferGeometry(0.5, 80);
this.p_mes = new THREE.Points(this.p_geo, this.p_mat);
this.scene.add(this.p_mes);
}
render() {
this.p_mat.uniforms[“time”].value =
this.clock.getElapsedTime() * config.shader.time;
this.p_mat.uniforms[“turb”].value = config.shader.turb;
this.p_mat.uniforms[“u_noise”].value = config.shader.u_noise * 0.1;
this.p_mat.uniforms[“decay”].value = config.shader.decay * 0.01;
this.p_mat.uniforms[“complex”].value = config.shader.complex;
this.p_mat.uniforms[“waves”].value = config.shader.waves * 3;
this.p_mat.uniforms[“pointscale”].value = config.shader.size;
this.p_mat.uniforms[“eqcolor”].value = config.shader.color;
this.p_mat.uniforms[“fragment”].value = config.shader.broken;
this.p_mat.uniforms[“scale”].value = config.shader.scale;
this.p_mat.uniforms[“displ”].value = config.shader.displ * 0.01;
this.p_mat.uniforms[“redhell”].value = config.shader.invert;
}
}

class Space {
constructor(props) {
this.name = props.name ? props.name : “Null”;
this.canvas = props.canvas ? props.canvas : null;
this.main();
}
main() {
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,
alpha: true
});
this.clock = new THREE.Clock();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45);
this.camera.position.set(0, 0.5, 3);
this.control = new Control({ camera: this.camera, canvas: this.canvas });
//–
this.axesHelper = new THREE.AxesHelper(2);
this.axesHelper.position.y = -1.5;
//this.scene.add(this.axesHelper);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFShoftSHadowMap;
this.init();
}
init() {
const scene = this.scene;
this.particle = new Particles({ scene });
//–
this.render();
this.loop();
this.resize();
}
resize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);

}

render() {
	this.scene.rotation.y = this.clock.getElapsedTime() * config.scene.speed;
	this.camera.lookAt(this.scene.position);
	this.camera.updateMatrixWorld();
	this.renderer.render(this.scene, this.camera);
	this.control.update();
	this.particle.render();
}
loop() {
	this.render();
	requestAnimationFrame(this.loop.bind(this));
}

}

const canvas = document.querySelector(“canvas”);
const world = new Space({ canvas });
const panel = new Panel();
window.addEventListener(“resize”, () => world.resize());
window.addEventListener(“load”, () => world.resize());