Click event - how to make click event revert back to original gradually

Questions
, , ,
1

Hello,

So I have worked hard to get this code correct thus far. Basically my click event makes my shapes DECAY gradually start being affected. It works perfectly as I wanted. But my question is when I let go of holding down my mouse or finger it automatically jumps back to the original frame. Can I please get some help on how to make it gradually go back (or gradually end) like how it starts? that way its a fluid animation from start to finish.

Here’s my Click event code

	decaybackup = config.shader.decay;
	world.resize()
});
let interval='';
let myshape = document.getElementById('shapeId');

myshape.addEventListener('pointerdown', function(event) { 
	interval = setInterval(()=>{		
		config.shader.decay += .001;
	},1)
});
myshape.addEventListener('pointerup', function(event) {
	config.shader.decay = decaybackup;
	clearInterval(interval)
  interval = '';
});

also here is a read only link to my site if you need a visual of what im talking about and can also see any code I have added…

enter link description here

THANK YOU!!!

2

you normally shouldn’t have intervals in a pointer event. this is all just how you make race conditions and spaghetti code. timeout, intervals in general, good to avoid that like the plague. your animation should happen exclusively in the frameloop. there you can lerp the decay.

const state = {
  decay: 0
}

myshape.addEventListener('pointerdown', (e) => state.decay = 1)
myshape.addEventListener('pointerup', (e) => state.decay = 0)

loop() {
  config.shader.decay = THREE.MathUtils.lerp(
    config.shader.decay, state.decay, 0.1
  )

i also don’t understand the += .001, not only will this run at varying speeds on different clients depending on the refresh rate (60 vs 120 fps), it would also mean i can, like, press it an hour long?

PS, the lerp is still not free from refresh-rate, always prefer damp, for that you need a delta which you can get from THREE.Clock: maath/packages/maath at main · pmndrs/maath · GitHub it’s worth it because damp looks beautiful, it’s fast, and the experience will be the same on any device.

1 Like
3

Hey there! Thank you so much for this! Unfortunately I couldn’t get it to work for my site or Codepen. I copied what you wrote straight to the codepen and site but neither are working. Unfortunately I’m not really good with code yet. :persevere:

I don’t know if it helps but this is the exact codepen I’m using.

https://codepen.io/vcomics/pen/RwQgXzv