CodingTrain / CodingTrain/Suggestion-Box

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

オープン
#767 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る
主要言語
言語のデータがありません
スター
570
フォーク
85
PR マージ指標
30日以内にマージされた PR はありません

説明

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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

対象ファイルもテストも指定されていません。提案された JavaScript の例から始め、lerp()、滑らかな動き、値の変化、減衰、easing を中心にチュートリアルを定義します。初心者向けのチュートリアルがこれらのトピックを説明し、実演した時点で完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
documentation
issue の種類
ドキュメント
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。