Easing(失敗)

Processing とp5jsという表記があるのは知っていたんですが、なんでみんな同じものを違う名前で呼ぶのだろう?と不思議に思っていました。

別のものでした。p5jsの方が変数を全部一緒くたにできる(!)と、最近聞いてすぐに乗り換えました。void がfunctionになったりはするみたいだけど基本一緒で行けそう。

で。前にやっていてよくわからなかったイージングを学び直してみようかと思ったのです。


let x; // 元はfloat
let easing = 0.01; //同上
function setup(){ //元はvoid
createCanvas(220, 120); // 元はsize
}
function draw(){ //元はvoid
background(150);
let targetX = mouseX; //元はfloat
x += (targetX - x) * easing;
ellipse(x, 40, 12, 12);
}

これは本にのっていたもの(Processing)をいま、習いたてのp5jsの言葉に少し直したものです。

書き換えりゃうまくいくだろ。と思ったら。

全然動かない!

いろいろ試してみてどうやら x += (targetX - x)*easing の部分が悪さをしているみたいなんですが何がどう悪いのか全くわからない。。。。。

p5js何が違うんだ。。。。。

この記事が気に入ったらサポートをしてみませんか?