Просто ещё одни звёздочки
Нужен был простой "полноэкранник" на белом фоне, с функцией-самовызывалкой как здесь. Так как просто белый экран это скучно, пусть что-нибудь движется.
Аналоги уже были тут (с внешней библиотекой) и там (другой эффект, через setInterval).
На изменение размеров окна браузера скрипт реагирует, для перехода в полноэкранный режим можно просто нажимать клавишу F11.
Ниже приводятся ссылка на работающий скрипт и полный исходник на момент написания (файл .html в кодировке UTF-8).
Открыть скрипт stars.html в текущем окне/вкладке (4 Кб)
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Звёзды</title>
<style>
*{
border: none;
margin: 0;
padding: 0;
}
#container{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #fff;
}
html, body{
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<canvas id="renderCanvas"></canvas>
</div>
<script>
(function(renderCanvas,container) { //id канвы, id обрамляющего раздела
let objects = [];
let World = { allPoints: 600 }; //всего звёзд
let canvas = document.getElementById(renderCanvas);
canvas.width = document.getElementById(container).offsetWidth;
canvas.height = document.getElementById(container).offsetHeight;
let context = canvas.getContext("2d");
window.onresize = function() { //изменение размеров окна
canvas.width = document.getElementById("container").offsetWidth;
canvas.height = document.getElementById("container").offsetHeight;
};
function rotateAndRender() { //основной метод
for (let i = 0; i < 5; i++){
objects.push( {
type: "point", x: Math.random() * canvas.width * 2,
y: 0, z: Math.random() * canvas.width * 2 - (canvas.width - canvas.height) }
);
transform(objects[objects.length-1], [0-canvas.width/2, World.allPoints, 0-canvas.height/2]);
}
let i = objects.length;
while(i--) {
if(objects[i].y < 0) { objects.splice(i, 1); }
}
context.fillStyle = "rgba(255, 255, 255, 0.6)"; //цвет фона
context.fillRect(0, 0, canvas.width, canvas.height);
for(let i in objects){
rotate(objects[i], [0, (Math.PI/800), 0], [canvas.width/2, 400, canvas.height/2]);
transform(objects[i], [0, -2, 0]);
render(objects[i], canvas);
}
window.requestAnimationFrame(rotateAndRender);
}
function render (object, canvas) {
if (object.type == "point") {
if (object.y < World.allPoints && object.y > 0) {
let c = minmax (Math.round(255 * (object.y / World.allPoints)), 0, 255);
context.fillStyle = "rgb("+(255-c)+", "+(c)+", "+(c)+")"; //цвет звёзд
context.fillRect (
(object.x + (1-(1/(4*(object.y / World.allPoints)))) * (canvas.width/2 - object.x)) - 1,
(object.z + (1-(1/(4*(object.y / World.allPoints)))) * (canvas.height/2 - object.z)) - 1,
2, 2);
}
}
}
function rotate(object, angles, center) {
let vector = { x: object.x - center[0], y: object.y - center[1], z: object.z - center[2]};
//ось x
vector.y = vector.y * Math.cos(angles[0]) - vector.z * Math.sin(angles[0]);
vector.z = vector.y * Math.sin(angles[0]) + vector.z * Math.cos(angles[0]);
//ось y
vector.z = vector.z * Math.cos(angles[1]) - vector.x * Math.sin(angles[1]);
vector.x = vector.z * Math.sin(angles[1]) + vector.x * Math.cos(angles[1]);
//ось z
vector.x = vector.x * Math.cos(angles[2]) - vector.y * Math.sin(angles[2]);
vector.y = vector.x * Math.sin(angles[2]) + vector.y * Math.cos(angles[2]);
object.x = center[0] + vector.x;
object.y = center[1] + vector.y;
object.z = center[2] + vector.z;
}
function transform (object, coords) {
object.x += coords[0];
object.y += coords[1];
object.z += coords[2];
return object;
}
function minmax (number, min, max) {
if (number < min) number = min;
if (number > max) number = max;
return number;
}
rotateAndRender();
}('renderCanvas','container'));
</script>
<noscript><p>Включите Javascript для работы приложения</p></noscript>
</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
<title>Звёзды</title>
<style>
*{
border: none;
margin: 0;
padding: 0;
}
#container{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #fff;
}
html, body{
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<canvas id="renderCanvas"></canvas>
</div>
<script>
(function(renderCanvas,container) { //id канвы, id обрамляющего раздела
let objects = [];
let World = { allPoints: 600 }; //всего звёзд
let canvas = document.getElementById(renderCanvas);
canvas.width = document.getElementById(container).offsetWidth;
canvas.height = document.getElementById(container).offsetHeight;
let context = canvas.getContext("2d");
window.onresize = function() { //изменение размеров окна
canvas.width = document.getElementById("container").offsetWidth;
canvas.height = document.getElementById("container").offsetHeight;
};
function rotateAndRender() { //основной метод
for (let i = 0; i < 5; i++){
objects.push( {
type: "point", x: Math.random() * canvas.width * 2,
y: 0, z: Math.random() * canvas.width * 2 - (canvas.width - canvas.height) }
);
transform(objects[objects.length-1], [0-canvas.width/2, World.allPoints, 0-canvas.height/2]);
}
let i = objects.length;
while(i--) {
if(objects[i].y < 0) { objects.splice(i, 1); }
}
context.fillStyle = "rgba(255, 255, 255, 0.6)"; //цвет фона
context.fillRect(0, 0, canvas.width, canvas.height);
for(let i in objects){
rotate(objects[i], [0, (Math.PI/800), 0], [canvas.width/2, 400, canvas.height/2]);
transform(objects[i], [0, -2, 0]);
render(objects[i], canvas);
}
window.requestAnimationFrame(rotateAndRender);
}
function render (object, canvas) {
if (object.type == "point") {
if (object.y < World.allPoints && object.y > 0) {
let c = minmax (Math.round(255 * (object.y / World.allPoints)), 0, 255);
context.fillStyle = "rgb("+(255-c)+", "+(c)+", "+(c)+")"; //цвет звёзд
context.fillRect (
(object.x + (1-(1/(4*(object.y / World.allPoints)))) * (canvas.width/2 - object.x)) - 1,
(object.z + (1-(1/(4*(object.y / World.allPoints)))) * (canvas.height/2 - object.z)) - 1,
2, 2);
}
}
}
function rotate(object, angles, center) {
let vector = { x: object.x - center[0], y: object.y - center[1], z: object.z - center[2]};
//ось x
vector.y = vector.y * Math.cos(angles[0]) - vector.z * Math.sin(angles[0]);
vector.z = vector.y * Math.sin(angles[0]) + vector.z * Math.cos(angles[0]);
//ось y
vector.z = vector.z * Math.cos(angles[1]) - vector.x * Math.sin(angles[1]);
vector.x = vector.z * Math.sin(angles[1]) + vector.x * Math.cos(angles[1]);
//ось z
vector.x = vector.x * Math.cos(angles[2]) - vector.y * Math.sin(angles[2]);
vector.y = vector.x * Math.sin(angles[2]) + vector.y * Math.cos(angles[2]);
object.x = center[0] + vector.x;
object.y = center[1] + vector.y;
object.z = center[2] + vector.z;
}
function transform (object, coords) {
object.x += coords[0];
object.y += coords[1];
object.z += coords[2];
return object;
}
function minmax (number, min, max) {
if (number < min) number = min;
if (number > max) number = max;
return number;
}
rotateAndRender();
}('renderCanvas','container'));
</script>
<noscript><p>Включите Javascript для работы приложения</p></noscript>
</body>
</html>
02.02.2024, 13:44 [162 просмотра]