Летающие светлячки на HTML5 Canvas

Разместил: Apocalypse
14 мая 2016

Вроде ничего необычного, но, если включить капельку воображения, эти, то плавно появляющиеся, то стремительно уносящиеся в пустоту, точки, станут очень похожи на светлячков в ночи Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: В любое место на нужных страницах вставьте:

<script>
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var MAX_FLIES = 15;
var FLY_XSPEED_RANGE = [-1, 1];
var FLY_YSPEED_RANGE = [-0.5, 0.5];
var FLY_SIZE_RANGE = [1, 5];
var FLY_LIFESPAN_RANGE = [75, 150];
var flies = [];

function randomRange(min, max) {
return Math.random() * (max - min) + min;
}

function Fly(options) {
if (!options) {
options = {};
}
this.x = options.x || randomRange(0, canvas.width);
this.y = options.y || randomRange(0, canvas.height);
this.xSpeed = options.xSpeed || randomRange(FLY_XSPEED_RANGE[0], FLY_XSPEED_RANGE[1]);
this.ySpeed = options.ySpeed || randomRange(FLY_YSPEED_RANGE[0], FLY_YSPEED_RANGE[1]);
this.size = options.size || randomRange(FLY_SIZE_RANGE[0], FLY_SIZE_RANGE[1]);
this.lifeSpan = options.lifeSpan || randomRange(FLY_LIFESPAN_RANGE[0], FLY_LIFESPAN_RANGE[1]);
this.age = 0;
this.colors = options.colors || {
red: 207,
green: 255,
blue: 4,
alpha: 0
};
}

function fitToScreen(element) {
element.width = window.innerWidth;
element.height = window.innerHeight;
}

function clearScreen() {
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
}

function createFlies() {
if (flies.length !== MAX_FLIES) {
flies.push(new Fly());
}
}

function moveFlies() {
flies.forEach(function(fly) {
fly.x += fly.xSpeed;
fly.y += fly.ySpeed;
fly.age++;
if (fly.age < fly.lifeSpan / 2) {
fly.colors.alpha += 1 / (fly.lifeSpan / 2);
if (fly.colors.alpha > 1) {
fly.colors.alpha = 1;
}
} else {
fly.colors.alpha -= 1 / (fly.lifeSpan / 2);
if (fly.colors.alpha < 0) {
fly.colors.alpha = 0;
}
}
});
}

function removeFlies() {
var i = flies.length;
while (i--) {
var fly = flies[i];
if (fly.age >= fly.lifeSpan) {
flies.splice(i, 1);
}
}
}

function drawFlies() {
flies.forEach(function(fly) {
ctx.beginPath();
ctx.fillStyle = 'rgba(' + fly.colors.red + ', ' + fly.colors.green + ', ' + fly.colors.blue + ', ' + fly.colors.alpha + ')';
ctx.arc(fly.x, fly.y, fly.size, 0, Math.PI * 2, false);
ctx.fill();
});
}

function render() {
clearScreen();
createFlies();
moveFlies();
removeFlies();
drawFlies();
}
window.addEventListener('resize', function() {
fitToScreen(canvas);
});
document.querySelector('body').appendChild(canvas);
fitToScreen(canvas);
(function animationLoop() {
window.requestAnimationFrame(animationLoop);
render();
})();
</script>

100

101

102

103

104

105

106

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var MAX_FLIES = 15;

var FLY_XSPEED_RANGE = [-1, 1];

var FLY_YSPEED_RANGE = [-0.5, 0.5];

var FLY_SIZE_RANGE = [1, 5];

var FLY_LIFESPAN_RANGE = [75, 150];

var flies = [];

function randomRange(min, max) {

return Math.random() * (max - min) + min;

}

function Fly(options) {

if (!options) {

options = {};

}

this.x = options.x || randomRange(0, canvas.width);

this.y = options.y || randomRange(0, canvas.height);

this.xSpeed = options.xSpeed || randomRange(FLY_XSPEED_RANGE[0], FLY_XSPEED_RANGE[1]);

this.ySpeed = options.ySpeed || randomRange(FLY_YSPEED_RANGE[0], FLY_YSPEED_RANGE[1]);

this.size = options.size || randomRange(FLY_SIZE_RANGE[0], FLY_SIZE_RANGE[1]);

this.lifeSpan = options.lifeSpan || randomRange(FLY_LIFESPAN_RANGE[0], FLY_LIFESPAN_RANGE[1]);

this.age = 0;

this.colors = options.colors || {

red: 207,

green: 255,

blue: 4,

alpha: 0

};

}

function fitToScreen(element) {

element.width = window.innerWidth;

element.height = window.innerHeight;

}

function clearScreen() {

ctx.beginPath();

ctx.fillStyle = 'rgb(0, 0, 0)';

ctx.rect(0, 0, canvas.width, canvas.height);

ctx.fill();

}

function createFlies() {

if (flies.length !== MAX_FLIES) {

flies.push(new Fly());

}

function moveFlies() {

flies.forEach(function(fly) {

fly.x += fly.xSpeed;

fly.y += fly.ySpeed;

fly.age++;

if (fly.age < fly.lifeSpan / 2) {

fly.colors.alpha += 1 / (fly.lifeSpan / 2);

if (fly.colors.alpha > 1) {

fly.colors.alpha = 1;

}

} else {

fly.colors.alpha -= 1 / (fly.lifeSpan / 2);

if (fly.colors.alpha < 0) {

fly.colors.alpha = 0;

}

});

}

function removeFlies() {

var i = flies.length;

while (i--) {

var fly = flies[i];

if (fly.age >= fly.lifeSpan) {

flies.splice(i, 1);

}

function drawFlies() {

flies.forEach(function(fly) {

ctx.beginPath();

ctx.fillStyle = 'rgba(' + fly.colors.red + ', ' + fly.colors.green + ', ' + fly.colors.blue + ', ' + fly.colors.alpha + ')';

ctx.arc(fly.x, fly.y, fly.size, 0, Math.PI * 2, false);

ctx.fill();

});

}

function render() {

clearScreen();

createFlies();

moveFlies();

removeFlies();

drawFlies();

}

window.addEventListener('resize', function() {

fitToScreen(canvas);

});

document.querySelector('body').appendChild(canvas);

fitToScreen(canvas);

(function animationLoop() {

window.requestAnimationFrame(animationLoop);

render();

})();

</script>

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: Canvas Firefly HTML5 Particles Летающие Светлячки Частицы Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

1 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Участник

iadarch

2 лет назад

Добрый день! А если нужно вставить "светлячков" поверх хедера с фоновым изображением? Как поступить тогда? Сколько не пыталась сделать, но ничего не выходит, вставляется на сером фоне после контейнера

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться