Сделать это дождь 🌧 в HTML Canvas

Эй, ребята, я вернулся с другим веселым экспериментом, который я создал когда-нибудь назад, когда мне было скучно. Это был горячий летний день И я так надеялся, что это дождь. Так как мне было так скучно, я хотел сделать это дождь. Поэтому я сделал это дождь, а не снаружи, а в моем коде.

Вот что я достиг

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

Прежде всего, это не анимация CSS. Только молния представляет собой анимацию на основе CSS. Мне пришлось использовать векторную математику для дождя, так что каждая дождь падает с увеличением скорости. Расчеты – все математические и физические на основе.

Это было сделано с помощью HTML Canvas и некоторых ванильных JavaScript.

Шаги я следовал

1. Каждая Raindrop является классовым объектом со своими свойствами.
2. При загрузке страницы «n» количество объектов Raindrop создается случайным образом и нажимается на любой массив.
3. ProwelsimationFrame использовался для анимации для оптимизации анимации браузера.
4. Ни один новый объект Raindrop не добавляется после того, как дождь дождь упал на пол.
5. Мне пришлось делать 2 вещи, когда дождь попал на пол (обнаружение столкновения).
6. Во-первых – сбросить его положение, скорость и ускорение. Это сделало так, будто никогда не заканчиваю дождь. Это также убедилось, что массив не переполнен значениями со значениями, и объекты были повторно использованы для лучшей производительности.
7. Во-вторых, используя его последнюю известную позицию и скорость/ускорение и создать противоположную коллекцию капли дождя, которые выглядят брызгими. Вы знаете, как когда капли дождь попадает на пол, он теряет свой импульс и движется в отрицательном направлении, пока он не упадет. Та же принцип здесь.
8. Кроме этого, я также добавил некоторые пресеты и глобальную среду, на всякий случай, если я собирался сделать другие объекты взаимодействовать с дождем

const raintype = {
  drizzle: { count: 30, speed: 0.27 },
  light: { count: 100, speed: 0.3 },
  medium: { count: 250, speed: 0.4 },
  downpour: { count: 500, speed: 0.5 },
  afteshower: { count: 3, speed: 0.4 }
}

var environment = {
  wind: createVector(-0.05, 0),
  raintype: raintype.medium,
}

Это был еще один из моих веселых экспериментов с JavaScript, Math и некоторым воображением. Время от времени мне нравится выходить от моих официальных проектов и делать некоторые творческие и веселые проекты. И я узнал все эти вышеупомянутые концепции из этого проекта.

Надеюсь, тебе понравится это:)

Кодепен ссылка https://codepen.io/soorajsnblz/pen/dygzkpe.

Оригинал: “https://dev.to/soorajsnblaze333/make-it-rain-in-html-canvas-1fj0”