Создание скрипта “Звездное небо и Орбиты планет вокруг Солнца” на JavaScript, HTML и CSS — это эффективный способ визуализировать движения небесных тел прямо в браузере.
Описание: Узнайте, как создать скрипт анимации орбит планет с помощью JavaScript, HTML и CSS для веб-сайтов, учебных проектов и визуализаций.
Используя современные веб-технологии, можно создать интерактивную анимацию, которая будет отображать движение планет по орбитам, демонстрируя принципы гравитации и космических движений.
В основе этого проекта лежит использование JavaScript для управления движением объектов, HTML для структурирования страницы и CSS для стилизации и анимации. Такой подход позволяет создать реалистичную модель солнечной системы, которая подойдет как для образовательных целей, так и для демонстрации на веб-сайтах, связанных с наукой или астрономией.
Этот скрипт может быть полезен не только начинающим разработчикам, но и тем, кто хочет углубить свои знания в области веб-разработки, анимации и работы с JavaScript. Простая структура и адаптивность позволяют легко добавлять новые элементы и улучшать визуальные эффекты.
Сначала приведем готовый скрипт, а потом разберем как мы его писали.
Готовый скрипт
Создание звездного неба и анимации орбит планет вокруг Солнца с использованием JavaScript, HTML и CSS. Этот скрипт демонстрирует реалистичное движение небесных тел на веб-странице.
В скрипте мы написали звездное небо, затем добавили Солнце и планеты вокруг него – до Марса (4 планеты), У Земли добавили спутник Луну. Также добавили отображение орбит планет, а сами планеты сделаны примерно в реальном соотношении по размерам, но не по удаленности от Солнца, так как это растянуло бы масштабы картинки.
canvas: Это специальный HTML элемент, который используется для рисования графики (например, анимаций, изображений).
display: block;: Делает элемент блоком, чтобы он занимал всю ширину страницы и мог содержать другие элементы.
position: absolute;: Позволяет точно позиционировать элемент на странице. Здесь он будет свободно перемещаться в зависимости от значений top и left.
top: 0; left: 0;: Устанавливает координаты верхнего левого угла элемента в точку (0,0), т.е., он будет находиться в самом углу страницы.
Начало тела HTML-документа и начало написания скрипта-анимации звездного неба и орбит планет вокруг Солнца с использованием элемента <canvas>. Разберем код по частям, чтобы начинающим было понятно, как всё это работает.
<body>
<canvas id="star-canvas"></canvas>
<canvas id="star-canvas"></canvas>: Это специальный HTML элемент, который позволяет рисовать на веб-странице с помощью JavaScript. В данном случае он имеет идентификатор star-canvas. Это как пустой холст, на котором будет отображаться звёздное небо и движение планет.
const canvas = document.getElementById('star-canvas');: Этот код ищет элемент <canvas> на странице по его ID (star-canvas) и сохраняет его в переменную canvas. Теперь мы можем управлять этим холстом с помощью JavaScript.
const ctx = canvas.getContext('2d');: Эта строка создаёт “контекст рисования”, т.е. инструмент для рисования на холсте в двухмерной плоскости. ctx — это сокращение от “context”, который позволяет рисовать фигуры, линии, круги и многое другое.
Теперь давайте рассмотрим создание планет и Солнца.
let stars = [];
let sun = { x: canvas.width / 2, y: canvas.height / 2, radius: 24 };
let stars = [];: Это пустой массив, который в дальнейшем будет содержать звёзды.
let sun = { x: canvas.width / 2, y: canvas.height / 2, radius: 24 };: Здесь создаётся объект, представляющий Солнце. Оно будет расположено в центре холста (половина ширины и высоты) с радиусом 24 пикселя.
Далее создаются объекты для каждой планеты: Меркурий, Венера, Земля и Луна.
Для каждой планеты создаётся объект с несколькими свойствами:
x, y: Координаты планеты.
radius: Радиус (размер) планеты в пикселях.
angle: Текущий угол вращения (используется для расчёта положения на орбите).
semiMajorAxis: Полуось орбиты (расстояние от Солнца).
eccentricity: Степень вытянутости орбиты (насколько орбита вытянута).
speed: Скорость вращения вокруг Солнца.
orbitTrail: Пустой массив для хранения следа орбиты.
color: Цвет планеты в формате RGBA.
Пример: Меркурий имеет радиус 4 пикселя, вращается на расстоянии 75 пикселей от Солнца и движется с небольшой скоростью (speed: 0.03).
Пойдем дальше. Этот кусок кода добавляет Марс к уже существующим планетам и изменяет размеры холста в зависимости от окна браузера. Рассмотрим его подробно.
canvas.height = window.innerHeight;: Устанавливает высоту холста (canvas) равной высоте окна браузера.
sun.x = canvas.width / 2;: Перемещает Солнце в центр холста по оси X (ширина холста делится пополам).
sun.y = canvas.height / 2;: Перемещает Солнце в центр холста по оси Y (высота холста делится пополам).
updatePlanets();: Эта функция (которую нужно определить отдельно) отвечает за обновление координат всех планет, чтобы они правильно отображались после изменения размера окна.
Когда окно браузера изменяет размер, холст автоматически подстраивается под новые размеры, а Солнце перемещается в центр экрана. Это важно, потому что без такой настройки объекты могли бы отображаться не там, где нужно, если размеры окна изменятся.
Перейдем к звездам. Этот код ниже создает анимацию звезд на холсте, имитируя мерцание звезд на ночном небе. Функция создает массив звезд, задавая для каждой звезды случайные координаты, размер и уровень прозрачности.
function createStars() {
stars = []; // Создаем пустой массив для хранения звезд.
for (let i = 0; i < 100; i++) { // Цикл, который создает 100 звезд.
stars.push({
x: Math.random() * canvas.width, // Случайная позиция по оси X на холсте.
y: Math.random() * canvas.height, // Случайная позиция по оси Y на холсте.
size: Math.random() * 2 + 1, // Случайный размер звезды (от 1 до 3 пикселей).
alpha: Math.random() * 0.5 + 0.5, // Случайная прозрачность (от 0.5 до 1).
alphaChange: Math.random() * 0.01 + 0.01 // Скорость изменения прозрачности (мерцания).
});
}
}
stars = [];: Создается пустой массив, который будет содержать информацию обо всех звездах.
Цикл for: Этот цикл выполняется 100 раз, чтобы создать 100 звезд.
x и y: Каждая звезда получает случайные координаты на холсте, чтобы она могла появиться в любом месте экрана.
size: Каждая звезда имеет случайный размер, чтобы сделать их различимыми.
alpha: Уровень прозрачности звезды также выбирается случайно. Это влияет на то, насколько яркой будет каждая звезда.
alphaChange: Это скорость, с которой звезда будет “мерцать”, изменяя свою прозрачность.
Эта функция рисует звезды на холсте и обновляет их прозрачность для создания эффекта мерцания.
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищает весь холст перед рисованием.
ctx.globalCompositeOperation = 'source-over'; // Устанавливает режим наложения для рисования объектов.
stars.forEach(star => {
ctx.beginPath(); // Начинаем рисование новой звезды.
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2); // Рисуем звезду в виде круга.
ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`; // Цвет звезды — белый с изменяющейся прозрачностью.
ctx.fill(); // Заполняем круг, создавая звезду.
// Обновляем прозрачность звезды, чтобы создать эффект мерцания.
star.alpha += star.alphaChange;
if (star.alpha > 1 || star.alpha < 0.5) { // Если звезда становится слишком яркой или слишком тусклой...
star.alphaChange = -star.alphaChange; // Меняем направление изменения прозрачности (она начинает "гаснуть" или "светиться").
}
});
}
ctx.clearRect(...): Очищает холст перед тем, как нарисовать звезды заново, чтобы предотвратить наложение старых изображений на новые.
ctx.arc(...): Рисует звезды в виде кругов в случайных местах и с разными размерами.
rgba(255, 255, 255, ${star.alpha}): Устанавливает цвет звезды. Звезда белая, но уровень прозрачности (alpha) варьируется, что создает эффект мерцания.
star.alpha += star.alphaChange: Изменяет прозрачность каждой звезды, добавляя или уменьшая её.
if (star.alpha > 1 || star.alpha < 0.5): Если прозрачность звезды выходит за пределы (становится слишком яркой или тусклой), её изменение меняется на противоположное, что создаёт плавное мерцание.
Что в итоге:
createStars(): Создает 100 случайных звезд с разными координатами, размерами и прозрачностью.
drawStars(): Рисует звезды на холсте и обновляет их прозрачность, чтобы они мерцали.
Этот код создает красивый анимационный эффект звездного неба с мерцающими звездами.
А что насчет Солнца ? Перейдем и к нему.
Этот код отвечает за рисование солнца на холсте, создавая не только его круглую форму, но и добавляя эффект солнечных протуберанцев — выступов на его поверхности. Давайте разберем его шаг за шагом, чтобы понять, как он работает.
function drawSun() {
const protuberanceCount = 8; // Количество солнечных протуберанцев.
const protuberanceSize = 6; // Размер протуберанцев (не используется в коде).
// Рисуем основное тело солнца.
ctx.beginPath(); // Начинаем новый путь рисования.
ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2); // Рисуем круг, который представляет солнце.
ctx.fillStyle = 'rgba(255, 255, 224, 1)'; // Задаем цвет заполнения солнца (светло-желтый).
ctx.fill(); // Заполняем круг цветом.
// Рисуем контур солнца.
ctx.strokeStyle = 'rgba(255, 255, 224, 1)'; // Задаем цвет обводки (такой же, как и цвет заполнения).
ctx.lineWidth = 2; // Устанавливаем ширину линии обводки.
ctx.stroke(); // Рисуем контур.
// Создаем протуберанцы вокруг солнца.
for (let i = 0; i < protuberanceCount; i++) { // Цикл для рисования протуберанцев.
const angle = Math.random() * Math.PI * 2; // Случайный угол для размещения протуберанца.
const distance = Math.random() * sun.radius * 0.2; // Случайное расстояние от центра солнца для протуберанца.
const length = Math.random() * 20 + 10; // Случайная длина протуберанца (от 10 до 30 пикселей).
// Вычисляем координаты конца протуберанца.
const x = sun.x + Math.cos(angle) * (sun.radius + distance); // Координата X конца протуберанца.
const y = sun.y + Math.sin(angle) * (sun.radius + distance); // Координата Y конца протуберанца.
// Рисуем протуберанец.
ctx.beginPath(); // Начинаем новый путь.
ctx.moveTo(x, y); // Устанавливаем начальную точку протуберанца.
ctx.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length); // Рисуем линию к концу протуберанца.
ctx.lineWidth = 2; // Устанавливаем ширину линии для протуберанца.
ctx.strokeStyle = 'rgba(255, 150, 0, 0.8)'; // Задаем цвет обводки протуберанца (оранжевый).
ctx.stroke(); // Рисуем протуберанцы.
}
}
Объявление переменных:
const protuberanceCount = 8;: Определяет количество протуберанцев, которые будут рисоваться вокруг солнца.
const protuberanceSize = 6;: Эта переменная не используется в коде, но могла бы задавать размер протуберанцев.
Рисование солнца:
ctx.beginPath();: Начинает новый путь рисования. Это важно, чтобы предыдущие фигуры не мешали новой.
ctx.arc(...): Рисует круг с центром в координатах sun.x и sun.y, радиусом sun.radius. Это и есть само солнце.
ctx.fillStyle = 'rgba(255, 255, 224, 1)';: Устанавливает светло-желтый цвет для заполнения солнца.
ctx.fill();: Заполняет круг цветом, создавая солнце.
ctx.strokeStyle = 'rgba(255, 255, 224, 1)';: Устанавливает цвет обводки (такой же, как и цвет заполнения).
ctx.lineWidth = 2;: Устанавливает ширину линии обводки.
Цикл for: Повторяется 8 раз (по количеству протуберанцев).
const angle = Math.random() * Math.PI * 2;: Генерирует случайный угол (от 0 до 2π радиан) для размещения протуберанца.
const distance = Math.random() * sun.radius * 0.2;: Генерирует случайное расстояние, на которое протуберанец будет отдаляться от солнца (до 20% от радиуса солнца).
const length = Math.random() * 20 + 10;: Определяет длину протуберанца (от 10 до 30 пикселей).
Координаты конца протуберанца:
const x и const y: Используют тригонометрические функции (Math.cos и Math.sin) для вычисления положения конца протуберанца на основе угла и расстояния от центра солнца.
ctx.beginPath();: Начинает новый путь рисования для протуберанца.
ctx.moveTo(x, y);: Устанавливает начальную точку в координатах конца протуберанца.
ctx.lineTo(...): Рисует линию от начала до конца протуберанца.
Функция drawSun() создает анимацию солнца, рисуя его круглую форму и добавляя эффект протуберанцев вокруг него, что делает изображение более динамичным и привлекательным. Этот код позволяет визуально представить солнце как источник света и энергии в вашей анимации.
А теперь перейдем к созданию планет на JavaScript.
Этот код реализует функции для рисования планет и их лун, а также орбитальных траекторий на HTML-канвасе. Давайте подробно рассмотрим каждую функцию.
function drawPlanet(planet) {
ctx.beginPath(); // Начинаем новый путь рисования.
ctx.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2); // Рисуем круг, представляющий планету.
ctx.fillStyle = planet.color; // Задаем цвет заполнения планеты.
ctx.fill(); // Заполняем круг цветом планеты.
// Рисуем контур планеты.
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; // Задаем цвет обводки (полупрозрачный белый).
ctx.lineWidth = 2; // Устанавливаем ширину линии обводки.
ctx.stroke(); // Рисуем обводку.
}
Функция drawPlanet:
ctx.beginPath();: Начинает новый путь, чтобы избежать наложения на предыдущие фигуры.
ctx.arc(...): Рисует круг с координатами planet.x и planet.y, радиусом planet.radius. Это представляет планету.
ctx.fillStyle = planet.color;: Устанавливает цвет заполнения планеты, взятый из объекта planet.
ctx.fill();: Заполняет круг цветом.
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';: Устанавливает цвет обводки для планеты (полупрозрачный белый).
ctx.lineWidth = 2;: Устанавливает ширину линии обводки.
ctx.stroke();: Рисует контур круга.
function drawMoon() {
moon.angle += moon.speed; // Обновляем угол луны, чтобы она двигалась по орбите.
moon.x = earth.x + moon.distance * Math.cos(moon.angle); // Вычисляем координату X луны.
moon.y = earth.y + moon.distance * Math.sin(moon.angle); // Вычисляем координату Y луны.
ctx.beginPath(); // Начинаем новый путь для рисования луны.
ctx.arc(moon.x, moon.y, moon.radius, 0, Math.PI * 2); // Рисуем круг, представляющий луну.
ctx.fillStyle = moon.color; // Устанавливаем цвет луны.
ctx.fill(); // Заполняем круг цветом луны.
// Рисуем контур луны.
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; // Задаем цвет обводки.
ctx.lineWidth = 2; // Устанавливаем ширину линии обводки.
ctx.stroke(); // Рисуем обводку.
}
Функция drawMoon:
moon.angle += moon.speed;: Увеличивает угол луны на значение её скорости, чтобы создать эффект вращения вокруг Земли.
Координаты луны:
moon.x: Вычисляет координату X луны, основываясь на позиции Земли и расстоянии до луны.
moon.y: Вычисляет координату Y луны аналогично.
Рисование луны:
ctx.beginPath();: Начинает новый путь для луны.
ctx.arc(...): Рисует круг для луны.
ctx.fillStyle = moon.color;: Устанавливает цвет заполнения для луны.
ctx.fill();: Заполняет луну цветом.
ctx.strokeStyle и ctx.stroke();: Устанавливают цвет и рисуют контур луны.
function drawOrbit(planet) {
ctx.beginPath(); // Начинаем новый путь рисования.
const orbitTrailLength = planet.orbitTrail.length; // Получаем длину орбитальной траектории.
// Проходим по каждому элементу орбитальной траектории.
for (let i = 0; i < orbitTrailLength; i++) {
const [x, y, alpha] = planet.orbitTrail[i]; // Деструктурируем координаты и прозрачность.
ctx.lineTo(x, y); // Добавляем линию к текущим координатам.
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`; // Устанавливаем цвет обводки с учетом прозрачности.
ctx.lineWidth = 1; // Устанавливаем ширину линии для орбит.
}
ctx.stroke(); // Рисуем орбиту.
}
Функция drawOrbit:
ctx.beginPath();: Начинает новый путь для рисования орбиты.
const orbitTrailLength = planet.orbitTrail.length;: Получает количество точек в орбитальной траектории.
Цикл for: Проходит по всем точкам в орбитальной траектории:
const [x, y, alpha]: Извлекает координаты и уровень прозрачности для каждой точки.
ctx.lineTo(x, y);: Добавляет линию к текущей координате.
ctx.strokeStyle = rgba(255, 255, 255, ${alpha});: Устанавливает цвет обводки, делая её полупрозрачной.
ctx.lineWidth = 1;: Устанавливает ширину линии для орбит.
ctx.stroke();: Рисует орбиту
В итоге получается, что этот код отвечает за рисование планет, их лун и орбитальных траекторий на канвасе, создавая эффект динамичной солнечной системы. Функция drawPlanet визуализирует планеты, drawMoon — их луны, а drawOrbit показывает траектории, по которым они движутся, добавляя эффект движения и глубины к сцене.
И, завершим написание нашего JS кода.
Код ниже Он отвечает за обновление позиций планет и их орбит, а также за анимацию всей сцены. Код написан на JavaScript и работает в HTML5-канвасе, что позволяет визуализировать движение планет вокруг Солнца.
Эта функция отвечает за обновление положения планет в Солнечной системе. Она вычисляет, где должны находиться планеты в зависимости от их текущих углов и орбит.
1. Что такое mercury.x и mercury.y?
mercury.x и mercury.y — это координаты Меркурия по осям X и Y.
Каждая планета имеет свои параметры, например, радиус своей орбиты (semiMajorAxis), угол (angle), скорость вращения (speed) и эксцентриситет (eccentricity), который показывает, насколько ее орбита отклоняется от круга.
2. Как вычисляются координаты?
Чтобы узнать, где находится планета, мы используем тригонометрические функции (Math.cos и Math.sin).
Math.cos(angle) и Math.sin(angle) помогают вычислить позицию на круговой орбите:
Math.cos(angle) определяет, насколько далеко планета находится по оси X.
Math.sin(angle) определяет, насколько далеко планета находится по оси Y.
После обновления углов вызываем функцию updatePlanets, чтобы пересчитать координаты планет на основе новых углов.
3. Следы орбит
Для создания визуального эффекта движения, мы сохраняем след каждой планеты в массиве orbitTrail:
planet.orbitTrail.push([planet.x, planet.y, 1.0]);
if (planet.orbitTrail.length > 100) {
planet.orbitTrail.shift(); // Удаляем старую точку, если их больше 100
}
Каждый элемент массива — это координаты планеты и их прозрачность (1.0 означает полностью непрозрачный).
Применяем затухание для следа: trail[2] *= 0.98, чтобы следы становились менее заметными со временем.
4. Рисование объектов
В функции update вызываются функции для рисования звёзд, Солнца, орбит и планет:
Эта строка добавляет обработчик события resize для объекта window (окно браузера).
Этот обработчик срабатывает каждый раз, когда пользователь изменяет размер окна браузера (например, когда он растягивает или сжимает окно).
Когда это событие происходит, вызывается функция resizeCanvas(), которая, вероятно, предназначена для обновления размеров канваса (полотна), на котором рисуются планеты и другие элементы.
Инициализация размеров канваса:
resizeCanvas();
Эта строка вызывает функцию resizeCanvas() сразу после загрузки страницы или скрипта.
Это гарантирует, что канвас будет иметь правильные размеры, соответствующие текущему размеру окна, сразу же, как только страница будет загружена. Это важно для обеспечения правильного отображения графики и элементов на экране.
Создание звезд:
createStars();
Эта строка вызывает функцию createStars().
Хотя мы не видим содержимого функции createStars() в вашем коде, можно предположить, что она отвечает за создание звезд на канвасе. Это может включать установку их начальных координат, размеров и, возможно, даже их анимацию.
Запуск анимации
update();
Эта строка вызывает функцию update().
Как мы обсуждали ранее, функция update() отвечает за обновление положения планет, движение Луны, рисование объектов на канвасе и создание анимации. Это запускает основной цикл анимации, который будет выполняться постоянно, чтобы обновлять и перерисовывать сцены.
В итоге имеем код, который создает простую анимацию Солнечной системы, где планеты движутся вокруг Солнца, оставляя за собой следы, а Луна вращается вокруг Земли. Каждая планета имеет свои характеристики, и все они обновляются и рисуются на канвасе, что создает эффект живого движения.
Добро пожаловать на Poznayu.com! Меня зовут Александр, и я создал этот сайт, собрав команду профессионалов, чтобы делиться полезными сведениями, интересными фактами и глубокими обзорами на самые разные темы, написанными нашей же командой авторов. Мы стремимся сделать каждый день насыщенным новыми знаниями и открытиями.
Вдохновленные страстью к исследованию мира и технологий, мы пишем статьи, которые помогут вам расширить кругозор и найти ответы на вопросы.
Присоединяйтесь к нашему сообществу и узнавайте новое каждый день вместе с нами! Оставляйте свои комментарии под текстом, все поля не обязательны !
