Монетка
Ты включила песенку, можно начинать рисовать след от монетки!
Что я хотел сделать, чтобы в центре штрихи были больше, чем сверху и снизу!
А эти штрихи, это же синус! Только сплюснутый! Вообще, все в анимациях синус, к этому надо привыкнуть!) Даже круг - это синус(и косинус)!
Так вот, штрихи это синусоида, со значением от -1 до +1! А теперь, нужно эти значения умножить на нужный параметр, чтобы сначала были маленькие значения, на средине большие, и в конце опять маленькие! И еще нужно рисовать это все по центру канваса!
А какой график на средине может быть большим, а на краях маленьким! Правильно, парабола(я не умный, просто загуглил). Только ее нужно развернуть в обратную сторону.
Только тут хуйня, она все равно на средине движется к нулю, а это все равно мне не подходит) Получается же так!
А все из-за того, что по центру у нас нолик, на нолик мне не нравится умножать!
Нужно еще отнять половину размера канваса)) Ой, надеюсь ты поймешь меня. В общем, когда отнять половину ширины, то график будет таким.
Я только что понял, что ты сейчас подумала: "так сейчас как раз оно и в ноль по средине заходит" Но ты забыла, что мы до этого выровняли по центру наш график, и если рисовать тупо прямую, она будет здесь:
А не здесь:
На этом этапе, у нас уже есть нормальный параметр, на который можно умножать синусоиду, чтобы она была такой.
Без параболы, синусоида была бы обычной.
А теперь, нужно развернуть канвас, когда мы рисуем линии, и повернуть обратно, когда рисуем картинку. Для начала первое.
Там снизу будет еще `ctx.restore()`. Это нужно для того, чтобы руками не вращать обратно, мы сохраняем состояния канваса, делаем с ним трансформации, рисуем, и при resore() возвращаем сохраненное значение, без этих трансформаций, удобно же!
А еще, чтобы повернуть относительно центра, нужно было сначала сместить канвас))
Дальше нужно в этом контуре, нарисовать картинку. Для этого есть параметры наложения. Я указал, что рисовать нужно только там, где есть что-то. И опять я сохранил состояние и после отрисовки вернулся к исходному.
Про анимашку не буду писать😜