Программируем скринсейвер для Илона — Журнал «Код» программирование без снобизма

Попробуем новую для нас библиотеку в JavaScript — p5. Её используют, чтобы расширить стандартные возможности рисования в JavaScript и писать для этого более крутые скрипты.

Сегодняшний проект — полёт в космосе к звёздам, как будто мы летим на ракете:

Логика работы

Чтобы всё это нарисовать, нам нужно:

Подготовить страницу так, чтобы содержимое занимало весь размер окна браузера.
Запрограммировать общее поведение для звёзд — разлетаться к краю экрана, постепенно увеличиваясь в размере.
Предусмотреть такое: если звезда улетела за границы окна — создать новую звезду с таким же поведением.
Создать много звёзд с разными координатами.
Запустить анимацию.

Большинство функций реализуем с помощью библиотеки p5 — в ней много готовых команд, которые упрощают разработку и отрисовку любых объектов.

Что за P5 и зачем она нужна

Библиотека P5.js — это продвинутая библиотека для рисования чего угодно в браузере. Она основана на фреймворке Processing — а он, в свою очередь, создавался, чтобы помочь художникам использовать для своих художественных дел инструменты программирования.

Короче: P5.js — это удобная рисовалка. Сейчас увидите.

Подготовка

Используем для проекта стандартный HTML-шаблон. Единственное, что мы добавим нового в шаблон — пропишем название проекта.

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Полёт в космос</title>
 
  <style type="text/css">

  </style>

</head>
<body>

	<!-- основной скрипт -->
	<script type="text/javascript">
	
	</script>

</body>
</html>

Подготавливаем стили

Чтобы во всех браузерах наши звёзды выглядели одинаково, подключим нормализатор стилей:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Задача нормализатора — привести все стили по умолчанию во всех браузерах к одному общему виду.

Зачем нужен нормализатор CSS

Ещё нам нужно поменять настройку управления размерами во всех элементах на странице. Сделаем так, чтобы мы могли задавать размеры всех элементов в разных единицах одновременно, например, высоту в пикселях, а ширину в процентах. Это поможет нам гибко обрабатывать положения и размеры звёзд.

Последнее, что осталось из стилей, — общие настройки страницы: убрать все отступы и растянуть содержимое на всю ширину окна. Но визуально на странице не поменяется ничего — она так же будет выглядеть пустой страницей.

<style type="text/css">
  	*{
  		/* сделаем так, чтобы мы могли задавать размеры всех элементов в разных единицах одновременно, например, высоту в пикселях, а ширину в процентах */
		box-sizing: border-box;
	}
	html, body{
		/* убираем границы и отступы */
		margin: 0;
		padding: 0;
		/* разворачиваем космос на всю ширину окна браузера */
		width: 100%;
		height: 100vh;
		/* не отображаем звёзды, которые вылетели за пределы окна*/
		overflow: hidden;
	}
  </style>

Подключаем библиотеку p5 и создаём основной скрипт

Для подключения библиотеки просто добавляем её вызов в тело страницы:

<!— подключаем p5 — библиотеку для рисования в JavaScrpt —>

<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script>

После этого создаём основной скрипт, который будет отвечать за всё, что происходит на экране. Всё остальное будем писать внутри него.

<!— основной скрипт —>

<script type="text/javascript">

</script>

Программируем звёзды

Чтобы не описывать каждую звезду отдельно, а задать для них общее поведение, будем использовать классы и методы. Если вы не знаете, что это такое, — почитайте наш мини-цикл про объектно-ориентированное программирование.

Вот что мы сделаем с помощью класса:

Пропишем общую логику создания звезды — где именно она появится и как близко к виртуальной передней границе экрана. За это в классах отвечает конструктор — в нём пишутся команды, что именно нужно сделать при создании новой звезды.
Запрограммируем, как будут меняться координаты звезды во время движения. Чтобы изменения произошли, нужно создать новый метод и вызвать его в нужный момент.
Добавим возможность отрисовки звезды по текущим координатам. За это тоже будет отвечать свой метод.

Этими свойствами и возможностями будут обладать все звёзды на основе этого класса — в этом и смысл ООП. Даже если мы создадим миллион звёзд, нам не придётся прописывать логику каждой звезды — за нас это сделает класс.

// сколько звёзд может быть одновременно на экране
var starsCount = 800;
// на старте массив со звёздами будет пустой
var stars = [];
// класс, на основе которого будут сделаны все звёзды
class Star{
	// конструктор, который вызывается при создании каждого объекта на основе этого класса
	constructor(){
		// у новой звезды будут случайные координаты
		this.x = random(-width, width);
		this.y = random(-height, height);
		// глубина — насколько виртуально близко к экрану появится звезда
		this.z = random(width);
	}
	// метод, который обновляет координаты звезды
	update(){
		// скорость полёта
		var speed = 12;
		// приближаем звезду к краю экрана, уменьшая глубину на значение скорости
		this.z -= speed;
		// если звезда вылетела за край экрана — делаем из неё новую звезду, для этого меняем координаты
		if(this.z < 1){
			this.x = random(-width, width);
			this.y = random(-height, height);
			// для новой звезды вместо старой глубину появления теперь выбираем не случайным образом, а задаём прямо
			this.z = width;
		}
	}

	// метод, который отрисовывает звезду на экране
	drawStar(){
		// каждая звезда — белого цвета
		fill(255);
		// и без контура
		noStroke();

		// с помощью функции map() из библиотеки p5.js получаем новые координаты для отрисовки звезды 
		var sx = map(this.x / this.z, 0, 1, 0, width);
		var sy = map(this.y / this.z, 0, 1, 0, height);

		// чем ближе к краю экрана (чем меньше глубина z) — тем больше радиус 
		var r = map(this.z, 0, width, 10, 0);
		// рисуем звезду в новых координатах и новым размером
		ellipse(sx, sy, r, r);
	}
}

Готовимся к запуску

В библиотеке p5 есть специальная функция setup() — код, который в ней написан, выполнится сразу после загрузки страницы со скриптом. Сделаем такую функцию в нашем скрипте, чтобы в ней запрограммировать создание холста и всех звёзд.

// подготавливаем всё к запуску — то, что написано здесь выполнится автоматически сразу после загрузки
function setup(){
	// создаём холст, на котором будем рисовать
	createCanvas(innerWidth, innerHeight);
	// размещаем сразу все звёзды на холсте
	for (var i = 0; i < starsCount; i++) {
		// каждая новая звезда — объект класса Star и умеет то же самое, что и все остальные звёзды
		stars[i] = new Star();
	}
}

Рисуем и запускаем анимацию

Ещё одна специальная функция из той же библиотеки — draw(). Она отвечает за рисование и анимацию. Всё, что написано внутри этой функции, будет выполняться раз за разом, по кругу, пока мы не закроем страницу. Используем это, чтобы сделать анимацию для звёзд.

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

/ пока мы не закроем страницу, постоянно будет выполняться функция drw() 
function draw(){
	// ставим чёрный фон и указываем скорость обновления фона — чем меньше второе число, тем больший шлейф будут оставлять звёзды
	background(0, 180);
	// формируем центр экрана, куда «полетим» сквозь звёзды
	translate(width/2, height/2);

	// отрисовываем каждый раз все звёзды и меняем их положение
	for (var i = 0; i < starsCount; i++) {
		stars[i].drawStar();
		stars[i].update();
	}
}

Следим за размерами экрана

Чтобы у нас полёт рисовался пропорционально экрану даже при изменении размера окна, добавим обработчик этого события. Он сработает при каждом изменении размеров окна и сразу изменит размер холста.

// если поменяется размер окна браузера — сразу меняем размер холста

addEventListener('resize', () => {

resizeCanvas(innerWidth, innerHeight);

})

Результат

Посмотреть, что получилось с новой библиотекой, можно на странице проекта. Если вы хотите запустить такое у себя на компьютере, скопируйте готовый код и откройте HTML-страницу в браузере.

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Полёт в космос</title>
  <!-- сделаем так, чтобы в каждых браузерах результат выглядел одинаково — подключим нормализатор стилей -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style type="text/css">
  	*{
  		/* сделаем так, чтобы мы в блоке управляли размерами не контента, а самого блока — это понадобится для звёзд */
		box-sizing: border-box;;
	}
	html, body{
		/* убираем границы и отступы */
		margin: 0;
		padding: 0;
		/* разворачиваем космос на всю ширину окна браузера */
		width: 100%;
		height: 100vh;
		/* не отображаем звёзды, которые вылетели за пределы окна*/
		overflow: hidden;
	}
  </style>

</head>
<body>
	<!-- подключаем p5 — библиотеку для рисования в JavaScrpt -->
	<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script>
	<!-- основной скрипт -->
	<script type="text/javascript">
	// сколько звёзд может быть одновременно на экране
	var starsCount = 800;
	// на старте массив со звёздами будет пустой
	var stars = [];
	// класс, на основе которого будут сделаны все звёзды
	class Star{
		// конструктор, который вызывается при создании каждого объекта на основе этого класса
		constructor(){
			// у новой звезды будут случайные координаты
			this.x = random(-width, width);
			this.y = random(-height, height);
			// глубина — насколько виртуально близко к экрану появится звезда
			this.z = random(width);
		}
		// метод, который обновляет координаты звезды
		update(){
			// скорость полёта
			var speed = 12;
			// приближаем звезду к краю экрана, уменьшая глубину на значение скорости
			this.z -= speed;
			// если звезда вылетела за край экрана — делаем из неё новую звезду, для этого меняем координаты
			if(this.z < 1){
				this.x = random(-width, width);
				this.y = random(-height, height);
				// для новой звезды вместо старой глубину появления теперь выбираем не случайным образом, а задаём прямо
				this.z = width;
			}
		}

		// метод, который отрисовывает звезду на экране
		drawStar(){
			// каждая звезда — белого цвета
			fill(255);
			// и без контура
			noStroke();

			// с помощью функции map() из библиотеки p5.js получаем новые координаты для отрисовки звезды 
			var sx = map(this.x / this.z, 0, 1, 0, width);
			var sy = map(this.y / this.z, 0, 1, 0, height);

			// чем ближе к краю экрана (чем меньше глубина z) — тем больше радиус 
			var r = map(this.z, 0, width, 10, 0);
			// рисуем звезду в новых координатах и новым размером
			ellipse(sx, sy, r, r);
		}
	}

	// подготавливаем всё к запуску — то, что написано здесь выполнится автоматически сразу после загрузки
	function setup(){
		// создаём холст, на котором будем рисовать
		createCanvas(innerWidth, innerHeight);
		// размещаем сразу все звёзды на холсте
		for (var i = 0; i < starsCount; i++) {
			// каждая новая звезда — объект класса Star и умеет то же самое, что и все остальные звёзды
			stars[i] = new Star();
		}
	}

// пока мы не закроем страницу, постоянно будет выполняться функция drw() 
function draw(){
	// ставим чёрный фон и указываем скорость обновления фона — чем меньше второе число, тем больший шлейф будут оставлять звёзды
	background(0, 180);
	// формируем центр экрана, куда «полетим» сквозь звёзды
	translate(width/2, height/2);

	// отрисовываем каждый раз все звёзды и меняем их положение
	for (var i = 0; i < starsCount; i++) {
		stars[i].drawStar();
		stars[i].update();
	}
}

	// если поменяется размер окна браузера — сразу меняем размер холста
	addEventListener('resize', () => {
		resizeCanvas(innerWidth, innerHeight);
	})	
	</script>

</body>
</html>