Управляем пучком волос на HTML5 Canvas — Уникальные скрипты и готовые решения

Возможно, вы давно мечтали о чём-то подобном, наверняка эта штука снилась вам в самых необычных снах и вот, наконец, она существует! Воплощение самых глючных и упоротых мыслей шизофреника: управление курсором мышки каким-то пучком седых волос! Я даже не знаю, как это можно использовать на своём сайте, поэтому просто оставлю это здесь!

P.S. Отведите курсор и эта хреновина сама начнёт бездумно блуждать по экрану

Для начала посмотрите ДЕМО

Установка:

1#: На нужных страницах (если такие вообще найдутся) сразу после <body> вставьте:

<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js'></script>
<script>
new p5();
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;
document.body.appendChild(canvas);
class particle {
constructor(coun, ind, reso) {
// this.x = Math.floor(ind%(w/reso))*reso;
// this.y = Math.floor(ind/(w/reso))*reso;
this.x = Math.random() * w;
this.y = Math.random() * h;
this.opacity = 1; //Math.random();
this.dif = Math.random() * 40 + Math.random() * 40;
}
show(mx, my) {
this.midx = this.x - (this.x - mx) / 2;
this.midy = this.y - (this.y - my) / 2;

// c.beginPath();
// c.lineTo(this.midx,this.midy);
// c.lineTo(mx,my);
// c.strokeStyle="rgba(255,255,255,"+this.opacity+")";
// c.lineWidth="0.04";
// c.stroke();

this.dist = Math.sqrt(Math.pow(this.x - mx, 2) + Math.pow(this.y - my, 2));
c.beginPath();
//for more effects divide this.dist by bigger or smaller number.
c.arc(this.midx, this.midy, Math.abs(this.dist / 2 - this.dif), 0, 2 * Math.PI);
c.strokeStyle = "rgba(255,255,255," + this.opacity + ")";
c.lineWidth = "0.05";
c.stroke();
}}


var res = 30,
count = Math.round(w * h / (res * res)),
p = new Array(count),
x = w / 2,
y = h / 2,
x2 = w / 2,
y2 = h / 2,
ex = 0,
ey = 0,
t = 0,
r1 = 10,
dist = 0,
q = 20;

for (var i = 0; i < p.length; i++) {
p[i] = new particle(count, i, res);
}

function draw1() {
t += 0.05;
x2 =
w / 2 +
(h / 2 - q) * Math.sqrt(2) * Math.cos(t) / (Math.pow(Math.sin(t), 2) + 1);
y2 =
h / 2 +
(h / 2 - q) *
Math.sqrt(2) *
Math.cos(t) *
Math.sin(t) / (
Math.pow(Math.sin(t), 2) + 1);

if (mouse.x && mouse.y) {
tx = mouse.x;
ty = mouse.y;
} else {
tx = x2;
ty = y2;
}

dist = Math.sqrt(ex * ex + ey * ey);

ex = tx - x;
ey = ty - y;

x += ex / (w / dist);
y += ey / (w / dist);

for (var i = 0; i < p.length; i++) {
p[i].show(x, y);
}
}

var mouse = { x: false, y: false };
var last_mouse = { x: w / 2, y: h / 2 };

canvas.addEventListener(
"mousemove",
function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},
false);


canvas.addEventListener("mouseleave", function (e) {
mouse.x = false;
mouse.y = false;
});

window.requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
});

}();

function loop1() {
setTimeout(function () {
window.requestAnimFrame(loop1);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
draw1();
}, 1000 / 60);
}

window.addEventListener("resize", function () {
window.requestAnimFrame(loop1);
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
});

loop1();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

new p5();

var canvas = document.createElement("canvas"),

c = canvas.getContext("2d");

var w = canvas.width = window.innerWidth,

h = canvas.height = window.innerHeight;

document.body.appendChild(canvas);

class particle {

constructor(coun, ind, reso) {

// this.x = Math.floor(ind%(w/reso))*reso;

// this.y = Math.floor(ind/(w/reso))*reso;

this.x = Math.random() * w;

this.y = Math.random() * h;

this.opacity = 1; //Math.random();

this.dif = Math.random() * 40 + Math.random() * 40;

}

show(mx, my) {

this.midx = this.x - (this.x - mx) / 2;

this.midy = this.y - (this.y - my) / 2;

// c.beginPath();

// c.lineTo(this.midx,this.midy);

// c.lineTo(mx,my);

// c.strokeStyle="rgba(255,255,255,"+this.opacity+")";

// c.lineWidth="0.04";

// c.stroke();

this.dist = Math.sqrt(Math.pow(this.x - mx, 2) + Math.pow(this.y - my, 2));

c.beginPath();

//for more effects divide this.dist by bigger or smaller number.

c.arc(this.midx, this.midy, Math.abs(this.dist / 2 - this.dif), 0, 2 * Math.PI);

c.strokeStyle = "rgba(255,255,255," + this.opacity + ")";

c.lineWidth = "0.05";

c.stroke();

}}

var res = 30,

count = Math.round(w * h / (res * res)),

p = new Array(count),

x = w / 2,

y = h / 2,

x2 = w / 2,

y2 = h / 2,

ex = 0,

ey = 0,

t = 0,

r1 = 10,

dist = 0,

q = 20;

for (var i = 0; i < p.length; i++) {

p[i] = new particle(count, i, res);

}

function draw1() {

t += 0.05;

x2 =

w / 2 +

(h / 2 - q) * Math.sqrt(2) * Math.cos(t) / (Math.pow(Math.sin(t), 2) + 1);

y2 =

h / 2 +

(h / 2 - q) *

Math.sqrt(2) *

Math.cos(t) *

Math.sin(t) / (

Math.pow(Math.sin(t), 2) + 1);

if (mouse.x && mouse.y) {

tx = mouse.x;

ty = mouse.y;

} else {

tx = x2;

ty = y2;

}

dist = Math.sqrt(ex * ex + ey * ey);

ex = tx - x;

ey = ty - y;

x += ex / (w / dist);

y += ey / (w / dist);

for (var i = 0; i < p.length; i++) {

p[i].show(x, y);

}

var mouse = { x: false, y: false };

var last_mouse = { x: w / 2, y: h / 2 };

canvas.addEventListener(

"mousemove",

function (e) {

last_mouse.x = mouse.x;

last_mouse.y = mouse.y;

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

false);

canvas.addEventListener("mouseleave", function (e) {

mouse.x = false;

mouse.y = false;

});

window.requestAnimFrame = function () {

return (

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (callback) {

window.setTimeout(callback, 1000 / 60);

});

}();

function loop1() {

setTimeout(function () {

window.requestAnimFrame(loop1);

c.fillStyle = "rgba(30,30,30,1)";

c.fillRect(0, 0, w, h);

draw1();

}, 1000 / 60);

}

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

window.requestAnimFrame(loop1);

w = canvas.width = window.innerWidth,

h = canvas.height = window.innerHeight;

c.fillStyle = "rgba(30,30,30,1)";

c.fillRect(0, 0, w, h);

});

loop1();

</script>

Возможно, Вас заинтересуют:

Вращающаяся звёздная система на Tree Canvas и HTML5 Canvas

Система частиц на HTML5 Canvas

Интересный анимированный загрузчик (Preloader) на…

Птицы, парящие в небе на HTML5 Canvas

Летающие светящиеся шары на HTML5 Canvas

Нейронная сеть на HTML5 Canvas

Добавить комментарий Отменить ответ