Простая модель "Солнце, Земля и Луна" на Javascript
Простая - значит, буквально на 3 картинках и одной канве. Правда, Луна, как видно "прячется" в тени Земли от Солнца, это единственное усложнение, чтобы показать принципы дальнейшей модификации примера.
Подход к позиционированию картинок использован "самый современный", то есть, мы не пересчитываем "вручную" полярные координаты в декартовы, а используем возможности яваскрипта по переносу, сдвигу и повороту плоской системы координат. С учётом всего этого, сделать скрипт с вращающимися вокруг Солнца Землёй и Луной не сложнее, чем идущие часики со стрелками.
Размер канвы в теге <canvas>
предполагается квадратным, хотя и не обязательно, картинки также лучше использовать квадратные.
Исходник, который можно сохранить в формате файла .html
, предполагает, что картинки с именами sun.png
, earth.png
и moon.png
находятся в той же папке, что и сам скрипт. Если нужно, это легко изменить.
Числовые константы в скрипте тоже можно менять, но я был бы с этим поосторожнее, ведь мы пересчитываем всё в целые пиксельные координаты и, например, при неудачном сочетании скоростей Земли и Луны последняя может где-то "запрыгать".
Все действия по рисованию Земли подробно закомментированы, остальное, думаю, будет ясно по аналогии :)
<div align="center"> <canvas id="sunSystemCanvas" width="500" height="500" style="background-color: black;"> <font color="#808080">Извините, Ваш браузер не поддерживает тег canvas</font> </canvas> </div> <script type="text/javascript"> var sunImg = new Image(); var moonImg = new Image(); var earthImg = new Image(); function init() { sunImg.src = 'sun.png'; //получить рисунки moonImg.src = 'moon.png'; earthImg.src = 'earth.png'; window.requestAnimationFrame (draw); //запланировать перерисовку и вызвать функцию draw } function draw() { //основной метод var canvas = document.getElementById('sunSystemCanvas'); var ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; //новые фигуры рисуются под уже нарисованными var width = canvas.width; var height = canvas.height; //размеры канвы var cx = Math.floor(width/2); var cy = Math.floor(height/2); //центр канвы var earthDelta = Math.floor(0.35*Math.min(width,height)); //смещение орбиты Земли в долях единицы var moonDelta = Math.floor(0.095*Math.min(width,height)); //смещение орбиты Луны, в долях единицы ctx.clearRect(0, 0, width, height); //очистить канву var time = new Date(); //Текущее время ctx.save(); ctx.translate(cx, cy); //Начало координат смещаем в центр канвы //Земля: var P2 = 2 * Math.PI; //круг = 2 пи :) var earthSpeed = 60; //секунд на оборот ctx.rotate((P2/earthSpeed)*time.getSeconds() + (P2/(earthSpeed*1000))*time.getMilliseconds()); //повернуть систему координат на нужную долю круга ctx.translate(earthDelta, 0); //и сдвинуть по оси X на заданную величину орбиты var halfOfEarth = -1*Math.floor(earthImg.width/2); //пол-Земли, предполагаем, что ширина картинки = высоте ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; //стиль заполнения ctx.fillRect (0, halfOfEarth, moonDelta + moonImg.width, earthImg.width); //тень от Земли на Луну ctx.drawImage(earthImg, halfOfEarth, halfOfEarth); //рисуем Землю //Луна: ctx.save(); var moonSpeed = earthSpeed/12; //на самом деле - 13.37 оборотов Луны вокруг Земли за год ctx.rotate((P2/moonSpeed)*time.getSeconds() + (P2/(moonSpeed*1000))*time.getMilliseconds()); ctx.translate(0, moonDelta); var halfOfMoon = -1*Math.floor(moonImg.width/2); //пол-Луны, предполагаем, что ширина картинки = высоте ctx.drawImage(moonImg, halfOfMoon, halfOfMoon); ctx.restore(); ctx.restore(); //Земная орбита: ctx.strokeStyle = 'rgba(0, 204, 255, 0.45)'; ctx.setLineDash([2, 4]); ctx.beginPath(); ctx.arc(cx, cy, earthDelta, 0, Math.PI * 2, false); ctx.stroke(); //Солнце: ctx.save(); ctx.translate(cx, cy); //Солнце - в центре канвы var halfOfSun = -1*Math.floor(sunImg.width/2); //пол-Солнца, предполагаем, что ширина картинки = высоте ctx.drawImage(sunImg, halfOfSun, halfOfSun); ctx.restore(); window.requestAnimationFrame(draw); } window.onload = init; //запустить функцию init по загрузке содержимого окна </script> <noscript> <div align="center"> Извините, нужен Javascript для работы приложения </div> </noscript>

sun.png

earth.png

moon.png
Помните также, что модель с неподвижным Солнцем в середине имеет к реальности не очень много отношения, а на самом деле наша Солнечная система движется примерно вот так:

движение Солнца и планет в космосе
Какими будут расстояния от Земли до Солнца и ближайшей звезды, если мы решим соблюдать масштабы для объектов и расстояний между ними?
Подсчитать это несложно. Представим, что Землю мы изобразили крошечной пылинкой или маковым зёрнышком с диаметром 0,5 мм (реальный диаметр Земли, напомним, ~12742 км).
Тогда Солнце, имеющее диаметр примерно 1390600 км, будет размером примерно с шар бильярда-американки (диаметр такого шара 57 мм, а диаметр Солнца в этом масштабе станет порядка 54,5 мм). Положить этот бильярдный шар нужно будет почти на 6 метров от пылинки (150000000 км от Земли до Солнца или примерно 5,88 м в нашем масштабе).
Где будет находиться ближайшая к нам звезда Альфа Центавра, имеющая схожий с Солнцем размер и отстоящая от него на ~39900000000000 км? Увы, даже не на соседней улице. Расстояние до неё в нашем масштабе составит около 1565 км и будет соответствовать расстоянию от Новосибирска до Челябинска.

2022. Мир состоит из пустоты. "Вояджеры" обнаружили странности с пространством вскоре после ухода из Солнечной системы
08.02.2018, 13:25 [6654 просмотра]