Pusheen / Пушин

Этот код создаёт векторный рисунок котика Пушина (Pusheen), работающего за ноутбуком. Работа была срисована с оригинальной картинки (https://ru.pinterest.com/pin/883409283138395655/).

В коде были реализованы три функции:

  • drawLaptop() - отрисовка ноутбука;
  • drawPusheen() - отрисовка самого котика и его деталей;
  • drawText() - печать текста "Pusheen" на экране.

Для создания верхней крышки и самого экрана использовался метод roundRect(), который позволяет задавать прямые прямоугольные формы с мягкими скруглениями углов, а веб-камера нарисована с помощью окружности через arc(). Интерактивный интерфейс внутри дисплея построен из простых прямоугольников fillRect(), поверх которых наложен полупрозрачный градиент createLinearGradient() для создания эффекта естественного блика на стекле.

Нижняя платформа ноутбука и основание клавиатуры сформированы сложными контурами с помощью сочетания moveTo() и дуг скругления arcTo(), что позволило передать плавные углы корпуса. Разделительные линии клавиш и сетка клавиатуры нарисованы прямыми отрезками с помощью методов moveTo() и lineTo().

Для создания силуэта Пушина использовались сложные кубические кривые bezierCurveTo(), с помощью которых построен мягкий и пухлый контур тела, ушек и основания. Усы по бокам головы нарисованы плавными изгибами quadraticCurveTo().

Узоры на шерсти выполнены разной техникой: полоски на лбу созданы прямоугольниками roundRect() со скруглением только нижних углов, широкие полосы на спине нарисованы толстыми линиями через quadraticCurveTo(), сегменты на хвосте были отрисованы так же с помощью quadraticCurveTo().

Для нанесения надписи использовался метод fillText(), который выводит закрашенный текст в заданных координатах холста. С помощью свойства font установлен крупный шрифт Comic Sans MS размером 100px, а цвет текста задан через fillStyle() в едином темном оттенке, совпадающем с контурами рисунка.