TwiddleLab / Математика / Векторы и матрицы

Проект: преобразователь пиксель-арта

Урок 12 из 12 · 8 мин · Бесплатно, без аккаунта

Что ты узнаешь

• Каждое перемещение спрайта это матрица 2 на 2: читай её столбцы, чтобы её построить.
• Цепочка перемещений это одна матрица-произведение, и порядок важен.
• Определитель предупреждает, когда спрайт сплющится; обратная возвращает его домой.

Начать урок

Как идёт урок

1. Заставь спрайт крутиться, сплющиваться и отражаться, всего по четыре числа на перемещение.

   Нажимай на каждую карточку перемещения, чтобы увидеть его.

2. Нарисуй свой спрайт.

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

3. Построй поворот: четверть оборота влево.

   Заполни матрицу так, чтобы спрайт попал в пунктирный контур.

   Столбец 1 это то, куда идёт (1, 0), (0, 1). Столбец 2 это то, куда идёт (0, 1), (-1, 0).

4. Построй сплющивание: вдвое шире, вдвое ниже.

   Тяни два конца стрелок, пока спрайт не заполнит пунктирный контур.

   Растяжение по горизонтали удваивает i с крышкой; сплющивание по вертикали вдвое уменьшает j с крышкой.

5. Построй отражение: зеркало слева направо.

   Отражение слева направо отправляет (1, 0) в (-1, 0) и сохраняет (0, 1).

6. Сцепи три перемещения в пунктирную позу.

   Нажимай на перемещения, чтобы добавить их на шкалу времени, нажми «Пуск», потом «Проверить».

   Произведение читается справа налево: сначала поворот, потом сплющивание, потом отражение. Поворот должен идти первым, потому что сплющивание, потом отражение это не то же самое, что отражение после поворота.

7. Чему равен определитель твоего сплющивания [[2, 0], [0, 0.5]]?

   det = ad - bc = 2 × 0,5 - 0 = 1, значит, площадь сохраняется.

8. Насколько плоским может стать спрайт, прежде чем исчезнет?

   Опускай k. Остановись на самом плоском спрайте, у которого det всё ещё не меньше 0,25.

   det [[1, 1], [0, k]] = k, поэтому самое плоское допустимое k = 0,25.

9. Испытание: верни спрайт домой.

   Поворот, отражение и перекос перемешали его. Заполни одну матрицу, которая отменит всю цепочку.

10. В коде картинка это список пикселей, и один цикл двигает их все.

    Пройди цикл по шагам с матрицей поворота.

11. Какой спрайт даёт [[1, 0], [0, -1]]?

    [[1, 0], [0, -1]] сохраняет (1, 0) и отправляет (0, 1) в (0, -1): отражение вверх ногами.

12. Твой преобразователь пиксель-арта.

    Твой спрайт исполняет твои три перемещения по кругу.

Предыдущий урок: Отменяем матрицу · Часть курса: Векторы и матрицы

Уроки интерактивные и работают на JavaScript. Включи его, чтобы играть.