CodingTrain / CodingTrain/Suggestion-Box

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

Offen
#767 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
Keine Sprachdaten
Sterne
570
Forks
85
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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);
}
```

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Keine Zieldatei oder kein Test wird genannt. Beginne mit dem vorgeschlagenen JavaScript-Beispiel und definiere das Tutorial rund um lerp(), fließende Bewegung, Wertänderungen, Dämpfung und Easing; es ist abgeschlossen, wenn das auf Anfänger ausgerichtete Tutorial diese Themen erklärt und demonstriert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.