** index2
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
cx = cw / 2;
var ch = canvas.height = window.innerHeight,
cy = ch / 2;
ctx.fillStyle = "#000";
var circlesRy = [];
var circlesNum = 15;
var requestId = null;
function Circle() {
this.r = randomIntFromInterval(25, 170);
this.x = randomIntFromInterval(this.r, cw - this.r);
this.y = randomIntFromInterval(this.r, ch - this.r);
this.vx = randomIntFromInterval(25, 100) / 100;
this.vy = randomIntFromInterval(25, 100) / 100;
this.update = function () {
this.edges();
this.x += this.vx;
this.y += this.vy;
}
this.edges = function () {
if (this.x < this.r || this.x > cw - this.r) {
this.vx *= -1;
}
if (this.y < this.r || this.y > ch - this.r) {
this.vy *= -1;
}
}
this.draw = function () {
ctx.strokeStyle = "#ccc";
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.stroke();
}
}
for (var i = 0; i < circlesNum; i++) {
var circle = new Circle();
circlesRy.push(circle);
}
function Draw() {
requestId = window.requestAnimationFrame(Draw);
ctx.clearRect(0, 0, cw, ch);
for (var i = 0; i < circlesRy.length; i++) {
var c = circlesRy[i];
c.update();
c.draw();
}
for (var i = 0; i < circlesRy.length; i++) {
var c = circlesRy[i];
for (var j = i + 1; j < circlesRy.length; j++) {
var c1 = circlesRy[j];
var d = dist(c, c1);
if ((d < c.r + c1.r) && (d > Math.abs(c.r - c1.r))) {
getIntersection(c, c1, d);
}
}
}
}
function Init() {
circlesRy.length = 0;
for (var i = 0; i < circlesNum; i++) {
var circle = new Circle();
circlesRy.push(circle);
}
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = null;
}
cw = canvas.width = window.innerWidth,
cx = cw / 2;
ch = canvas.height = window.innerHeight,
cy = ch / 2;
Draw();
};
setTimeout(function () {
Init();
addEventListener('resize', Init, false);
}, 15);
function getIntersection(p1, p2, d) {
var p3 = {}; // middle point
var p4 = {}; // intersection 1
var p5 = {}; // intersection 2
var a = (Math.pow(p1.r, 2) - Math.pow(p2.r, 2) + Math.pow(d, 2)) / (2 * d)
var h = Math.sqrt(Math.pow(p1.r, 2) - Math.pow(a, 2));
p3.x = p1.x + a * (p2.x - p1.x) / d;
p3.y = p1.y + a * (p2.y - p1.y) / d;
p4.x = p3.x + h * (p2.y - p1.y) / d;
p4.y = p3.y - h * (p2.x - p1.x) / d;
p5.x = p3.x - h * (p2.y - p1.y) / d;
p5.y = p3.y + h * (p2.x - p1.x) / d;
markPoint(p4);
markPoint(p5);
}
function dist(p1, p2) {
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
return Math.sqrt(dx * dx + dy * dy);
}
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn)
}
function markPoint(p) {
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
ctx.fill();
}