CodingTrain / CodingTrain/Suggestion-Box
Beginner tutorial: Smooth variable changes (lerp, damping, easing)
- Dominant language
- No language data
- Stars
- 570
- Forks
- 85
- PR merge metrics
- No merged PRs in 30d
Description
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);
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.