Монетка

Монетка


Ты включила песенку, можно начинать рисовать след от монетки!

Что я хотел сделать, чтобы в центре штрихи были больше, чем сверху и снизу!

Типа так!

А эти штрихи, это же синус! Только сплюснутый! Вообще, все в анимациях синус, к этому надо привыкнуть!) Даже круг - это синус(и косинус)!

Так вот, штрихи это синусоида, со значением от -1 до +1! А теперь, нужно эти значения умножить на нужный параметр, чтобы сначала были маленькие значения, на средине большие, и в конце опять маленькие! И еще нужно рисовать это все по центру канваса!

А какой график на средине может быть большим, а на краях маленьким! Правильно, парабола(я не умный, просто загуглил). Только ее нужно развернуть в обратную сторону.

Второй график, почти то, что мне нужно.

Только тут хуйня, она все равно на средине движется к нулю, а это все равно мне не подходит) Получается же так!

А все из-за того, что по центру у нас нолик, на нолик мне не нравится умножать!

Нужно еще отнять половину размера канваса)) Ой, надеюсь ты поймешь меня. В общем, когда отнять половину ширины, то график будет таким.

Я только что понял, что ты сейчас подумала: "так сейчас как раз оно и в ноль по средине заходит" Но ты забыла, что мы до этого выровняли по центру наш график, и если рисовать тупо прямую, она будет здесь:

А не здесь:

На этом этапе, у нас уже есть нормальный параметр, на который можно умножать синусоиду, чтобы она была такой.

Без параболы, синусоида была бы обычной.

я тут схитрил, и уменьшил толщину линии)

А теперь, нужно развернуть канвас, когда мы рисуем линии, и повернуть обратно, когда рисуем картинку. Для начала первое.

Там снизу будет еще `ctx.restore()`. Это нужно для того, чтобы руками не вращать обратно, мы сохраняем состояния канваса, делаем с ним трансформации, рисуем, и при resore() возвращаем сохраненное значение, без этих трансформаций, удобно же!

А еще, чтобы повернуть относительно центра, нужно было сначала сместить канвас))

На этом этапе, у нас уже такая штука.

Дальше нужно в этом контуре, нарисовать картинку. Для этого есть параметры наложения. Я указал, что рисовать нужно только там, где есть что-то. И опять я сохранил состояние и после отрисовки вернулся к исходному.

Про анимашку не буду писать😜





Report Page