CodingTrain / CodingTrain/Suggestion-Box

Beginner tutorial: Smooth variable changes (lerp, damping, easing)

Abierto
#767 0 comentarios 1 reacción 0 asignados Ver en GitHub
Lenguaje dominante
Sin datos de lenguaje
Estrellas
570
Forks
85
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Hi! I think a lot of beginners would appreciate a simple tutorial on using the lerp() function to achieve smooth motion and value changes.

I think something like this example would be pretty good:

```javascript
let rndBg = 0;
let newRndBg = 0;

let ellipseCol = 0;
let newEllipseCol = 0;

let d = 100;
let newD = 100;

let x = 0;
let y = 0;

let bigCircle = false;

function lerpVariables() {
rndBg = lerp(rndBg, newRndBg, 0.05);
ellipseCol = lerp(ellipseCol, newEllipseCol, 0.05);
x = lerp(x, mouseX, 0.05);
y = lerp(y, mouseY, 0.05);
d = lerp(d, newD, 0.05);
}

function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSL);
}

function draw() {
lerpVariables();

background(rndBg, 50, 30);
fill(ellipseCol, 50, 70);
ellipse(x, y, d);
}

function mousePressed() {
bigCircle = !bigCircle;
bigCircle ? newD = 300 : newD = 50;
newRndBg = random(360);
newEllipseCol = random(360);
}
```

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

No se indica ningún archivo objetivo ni ninguna prueba. Comienza con el ejemplo de JavaScript propuesto y define el tutorial en torno a lerp(), el movimiento suave, los cambios de valor, la amortiguación y el easing; estará terminado cuando el tutorial orientado a principiantes explique y demuestre esos temas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
documentation
Tipo de issue
Documentación
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.