tldr

float exp_smooth(float speed, float dt) { return 1.0f - expf(-speed * dt); }

// todo frame:
curr = lerp(curr, target, exp_smooth(speed, dt));

bora adicionar o clássico tween por coroutine

Vector2 pos;
float duration = 0.2f;

void Update() {
	if (Input.GetKey(KeyCode.Left)) StartCoroutine(MoveTo(pos + Vector2.left * 100.0f));
	// etc..
}

IEnumerator MoveTo(Vector2 to) {
	Vector2 from = pos;
	for (float t = 0.0f; t < duration; t += Time.deltaTime) {
		float blend = EaseInoutQuad(t / duration);
		pos = Vector2.Lerp(from, to, blend);
		yield return null;
	}
	pos = to;
}

consertar o tween por coroutine

Vector2 pos;
float duration = 0.2f;
Coroutine currCoroutine = null; // <--

void Update() {
	if (Input.GetKey(KeyCode.Left)) BeginMoveTo(pos + Vector2.left * 100.0f);
	// etc..
}

void BeginMoveTo(Vector2 to) { // <--
	if (currCoroutine != null) {
		StopCoroutine(currCoroutine);
	}
	currCoroutine = StartCoroutine(MoveTo(to));
}

IEnumerator MoveTo(Vector2 to) {
	// ...
}

movimentação exp_smooth (js)

// every frame
if (0) {}
else if (ctx.key == "ArrowLeft")  { target_x -= 100; }
else if (ctx.key == "ArrowRight") { target_x += 100; }
else if (ctx.key == "ArrowUp")    { target_y -= 100; }
else if (ctx.key == "ArrowDown")  { target_y += 100; }

const speed = ...;
x = lerp(x, target_x, exp_smooth(speed, ctx.dt));
y = lerp(y, target_y, exp_smooth(speed, ctx.dt));

movimentação exp_smooth (c#)

Vector2 pos;
Vector2 target;
float speed;

void Update() {
	if (Input.GetKey(KeyCode.Left)) target += Vector2.left * 100.0f;
	if (Input.GetKey(KeyCode.Right)) target += Vector2.right * 100.0f;
	if (Input.GetKey(KeyCode.Up)) target += Vector2.up * 100.0f;
	if (Input.GetKey(KeyCode.Down)) target += Vector2.down * 100.0f;

	float blend = ExpSmooth(speed, Time.deltaTime);
	pos = Vector2.Lerp(pos, target, blend);
}

ui fade

let menu_open = false;

// every frame
const target_menu_alpha = menu_open ? 1.0 : 0.0;
const speed = ...;
menu_canvas_group.alpha = lerp(
	menu_canvas_group.alpha,
	target_menu_alpha,
	exp_smooth(speed, ctx.dt)
);

ui anim

const rects = [...];
const y_offsets = [];

// every frame
if (menu_just_opened) {
	for (const i in rects) {
		y_offsets.push(rand(20, 60));
	}
}

let speed = slider.valueAsNumber;
speed = menu_open ? speed : speed * 2;
const target_menu_alpha = menu_open ? 0.8 : 0.0;
const target_rect_alpha = menu_open ? 1.0 : 0.0;
menu_alpha = lerp(menu_alpha, target_menu_alpha, exp_smooth(speed, ctx.dt));
rects_alpha = lerp(rects_alpha, target_rect_alpha, exp_smooth(speed, ctx.dt));

for (const i in rects) {
	y_offsets[i] = lerp(y_offsets[i], 0.0, exp_smooth(speed / 1.5, ctx.dt));
}

hierarquia smooth

function update_node_pos(node, tx, ty, speed, dt) {
	node.tx = tx;
	node.ty = ty;

	node.x = lerp(node.x, node.tx, exp_smooth(speed, dt));
	node.y = lerp(node.y, node.ty, exp_smooth(speed, dt));

	let x = node.x - node.total_width / 2;
	let y = node.y + node.h + NODE_GAP;
	for (const child of node.children) {
		const half_total_width = child.total_width / 2;
		x += half_total_width;
		update_node_pos(child, x, y, speed, dt);
		x += half_total_width + NODE_GAP;
	}
}

inquebrável

o sistema sempre faz progresso em direção ao 'target'

ui fade (novamente)

// estado canônico ("source of truth")
let menu_open = false;

///////////////////
// every frame

// estado *transiente* derivado de `menu_open`!!
const target_menu_alpha = menu_open ? 1.0 : 0.0;

// apenas config
const speed = ...;

// estado *persistente* derivado de `menu_open`!!
// SEMPRE faz progresso em direção ao target (que também depende de `menu_open`)
menu_canvas_group.alpha = lerp(
	menu_canvas_group.alpha,
	target_menu_alpha,
	exp_smooth(speed, ctx.dt)
);

ex: lerp de paths

let path_blend = 0.0;
let path_pos_blend = 0.0;
let target_path_blend = 0.0;
let target_path_pos_blend = 1.0;

// every frame
if (0) {}
else if (ctx.key == "ArrowLeft")  { target_path_blend = 0.0; }
else if (ctx.key == "ArrowRight") { target_path_blend = 1.0; }
else if (ctx.key == "ArrowUp")    { target_path_pos_blend = 0.0; }
else if (ctx.key == "ArrowDown")  { target_path_pos_blend = 1.0; }

const speed = ...;
path_blend =     lerp(path_blend,     target_path_blend,     exp_smooth(speed * 2.0, ctx.dt));
path_pos_blend = lerp(path_pos_blend, target_path_pos_blend, exp_smooth(speed, ctx.dt));

const [p0x, p0y] = hermite_lerp(...path0, path_pos_blend);
const [p1x, p1y] = hermite_lerp(...path1, path_pos_blend);

const x = lerp(p0x, p1x, path_blend);
const y = lerp(p0y, p1y, path_blend);

ex: imgui

// a existência do botão é estado derivado do próprio código
// => se esse código não executa, botão não existe!
if (GUI.Button("Click Me!"))
{
	// qualquer coisa dentro do `if` TAMBÉM é diretamente derivado do botão
	// => código executa apenas quando há interação
	DoTheThing();
}

ex: rendering

// rendering em geral *pode* seguir esse estilo também
foreach (Bullet bullet in bullets) {
	if (bullet.isAlive && bullet.isVisible) {
		// ao invés de criar algo tipo um componente `Renderer`
		// cujo estado de habilitado/desabilitado precisa ser sincronizado
		// com o estado canônico da bala,

		// a gente apenas condicionalmente (e manualmente) renderiza as balas
		// observando *diretamente* seu estado (isAlive && isVisible)

		graphics.renderBullet(bullet);
	}
}

ex: shape overlap

// igualmente para deteção de overlap de shape

spellRadius = Mathf.Lerp(spellRadius, 0.0f, ExpSmooth(spellRadiusDecay, dt));
foreach (Enemy enemy in enemies) {
	if (Vector3.Distance(enemy.pos, spellPos) < spellRadius) {
		// ao invés de criar ago tipo um componente `SphereTrigger`
		// cujo estado de 'radius' precisa ser sincronizado com o estado do spell
		// que possui spellRadius dinâmico

		DamageEnemy(enemy, spellDamage);
	}
}

nota sobre callbacks

callbacks são a antítese das técnicas apresentadas.

Afinal, quando armazenados, eles são estado que necessariamente precisam ser sincronizados com o estado canônico do sistema.

.........

Bugs costumam morar justamente em códigos que precisam de sincronização de estado.

obrigado!

espero que seja útil pra vocês!

float exp_smooth(float speed, float dt) { return 1.0f - expf(-speed * dt); }

// todo frame:
curr = lerp(curr, target, exp_smooth(speed, dt));

referências

• my favourite animation trick: exponential smoothing
• making lerp smoothing framerate independent
• critically damped spring smoothing
• easing functions

............................................

• upstream & downstream

esse post explora mais a ideia de estados derivados de forma mais ampla (vale a pena ler múltiplas vezes)

............................................

• Immediate-Mode Graphical User Interfaces - 2005

mais específico a respeito de imgui, porém brevemente menciona como esse estilo de api pode ser aplicado em outras áreas como física por exemplo