Имеется такой код на paper.js
#canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height 100%;
border: 1px solid red;
}
Оригинал "цепи"
Что-то никак не выходит конвертировать его в обычный JS. Сложность заключается в самом path. Не получается его создать и разделить на сегменты(части), а после анимировать при событии mousemove
Ответ
Почти, но "почти" не считается, в общем вот:
var canvas = document.querySelector("#canvas"),
context = canvas.getContext("2d"),
target = {
x: 0.0,
y: 0.0
},
mouse = {
x: 0.0,
y: 0.0
},
chain = null;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var Segment = function(size, head, tail) {
this.size = size;
this.head = head || {
x: 0.0,
y: 0.0
};
this.tail = tail || {
x: this.head.x + size,
y: this.head.y + size
};
this.update = function() {
var dx = this.head.x - this.tail.x,
dy = this.head.y - this.tail.y,
dist = Math.sqrt(dx * dx + dy * dy),
force = 0.5 - this.size / dist * 0.5,
strength = 0.998;
force *= 0.99;
var fx = force * dx,
fy = force * dy;
this.tail.x += fx * strength * 2.0;
this.tail.y += fy * strength * 2.0;
this.head.x -= fx * (1.0 - strength) * 2.0;
this.head.y -= fy * (1.0 - strength) * 2.0;
};
};
var Chain = function(size, interval) {
this.links = new Array(size);
this.update = function(target) {
var link = this.links[0];
link.head.x = target.x;
link.head.y = target.y;
for (var i = 0, n = this.links.length; i < n; ++i) {
link = this.links[i];
link.update();
}
};
var point = {
x: 0,
y: 0
};
for (var i = 0, n = this.links.length; i < n; ++i) {
link = this.links[i] = new Segment(interval, point);
link.head.x = Math.random() * 500;
link.head.y = Math.random() * 500;
link.tail.x = Math.random() * 500;
link.tail.y = Math.random() * 500;
point = link.tail;
}
};
function update() {
target.x += (mouse.x - target.x) * 0.1;
target.y += (mouse.y - target.y) * 0.1;
chain.update(target);
}
function draw() {
canvas.width = canvas.width,
link = chain.links[0],
p1 = link.head,
p2 = link.tail;
context.beginPath();
context.moveTo(p1.x, p1.y);
context.strokeStyle = "red";
context.lineWidth = 3;
context.lineJoin = "round";
context.lineCap = "round";
for (var i = 0, n = chain.links.length; i < n; ++i) {
link = chain.links[i];
p1 = link.head;
p2 = link.tail;
context.lineTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
}
context.stroke();
}
function init() {
chain = new Chain(100, 2);
setInterval(function() {
update();
draw();
}, 5);
}
canvas.onmousemove = function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
};
function resize() {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
}
window.onresize = resize;
init();
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
cursor: none;
}
canvas {
border: 1px solid;
}
