Записи

<table width="504" height="500" border="0" align="center" class="colorborder">
 <tr>
 <td width="500" height="500" style="cursor:pointer; border: 1px solid blue">
 <canvas id="v42myCanvas1" width="500" height="500"></canvas>
</td>
 </tr>
 <tr><td align="center">
 <span style="color: rgb(255,0,0);">количество: </span><input type="range" id="ver42param1" max="500" min="1" value="10"
 oninput="{document.getElementById('ver42spanparam1').innerHTML = document.getElementById('ver42param1').value; v42ArLen = document.getElementById('ver42param1').value; ver42MouseCalcF();}" />
 <span id="ver42spanparam1" style="color: rgb(255,0,0);">10</span>
</td></tr> 
</table> 

<script>
//положение
function getOffset(elem) {
 if (elem.getBoundingClientRect) {
 // "правильный" вариант
 return getOffsetRect(elem)
 } else {
 // пусть работает хоть как-то
 return getOffsetSum(elem)
 }
}
function getOffsetSum(elem) {
 var top=0, left=0
 while(elem) {
 top = top + parseInt(elem.offsetTop)
 left = left + parseInt(elem.offsetLeft)
 elem = elem.offsetParent
 }
 return {top: top, left: left}
}
function getOffsetRect(elem) {
 var box = elem.getBoundingClientRect()
 var body = document.body
 var docElem = document.documentElement
 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0
 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft
 return { top: Math.round(top), left: Math.round(left) }
}
//end add

 var v42canvas1 = document.querySelector("#v42myCanvas1");
 var v42context1 = v42canvas1.getContext("2d");

 var v42xSh=[];
 var v42ySh=[];
 var v42xRE=[];
 var v42yRE=[];
 var v42signxSh=[];
 var v42signySh=[];
 var v42stepxSh=[];
 var v42stepySh=[];
 var v42ArLen = 10;
 
 var v42timer = setInterval(fAnimv42, 50);
 
 function v42update() {
 v42context1.clearRect(0, 0, v42canvas1.width, v42canvas1.height);
 v42context1.lineWidth = 2;
 v42context1.fillStyle = "#0000FF";
 v42context1.strokeStyle = "#0000FF";
//
 for (var i=0; i<v42ArLen; i+=1){
 v42context1.beginPath();
 v42context1.arc(v42xSh[i], v42ySh[i], 6, 0, 2 * Math.PI, false);
 v42context1.fillStyle = 'red';
 v42context1.fill();
 v42context1.lineWidth = 1;
 v42context1.strokeStyle = '#003300';
 v42context1.stroke();
 v42context1.closePath();
 }
//
 for (var i=0; i<v42ArLen; i+=1){
 v42context1.beginPath();
 v42context1.arc(v42xRE[i], v42yRE[i], 6, 0, 2 * Math.PI, false);
 v42context1.fillStyle = 'yellow';
 v42context1.fill();
 v42context1.lineWidth = 1;
 v42context1.strokeStyle = '#003300';
 v42context1.stroke();
 v42context1.closePath();
 }
//
 requestAnimationFrame(v42update);
 }
v42update();

function roundNumber(number, digits) {
 var multiple = Math.pow(10, digits);
 var rndedNum = Math.round(number * multiple) / multiple;
 return rndedNum;
 }
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
} 

function ver42MouseCalcF() {
 var v42parX1=[];
 var v42parX2=[];
 var v42parY1=[];
 var v42parY2=[];

 for (var i=0; i<v42ArLen; i+=1){
 v42xSh[i] = getRandomInt(100, 400);
 v42ySh[i] = getRandomInt(100, 400);
 v42xRE[i] = getRandomInt(100, 400);
 v42yRE[i] = getRandomInt(100, 400);
 v42signxSh[i] = 1;
 v42signySh[i] = 1;
 v42stepxSh[i] = 1.0;
 v42stepySh[i] = 1.0;
 //
 v42parX1[i] = getRandomInt(100, 400);
 v42parX2[i] = getRandomInt(100, 400);
 v42parY1[i] = getRandomInt(100, 400);
 v42parY2[i] = getRandomInt(100, 400);
 //
 if (v42parX2[i] < v42parX1[i]) {v42signxSh[i] = -1} else {v42signxSh[i] = 1};
 if (v42signxSh[i] > 0) 
 {v42stepxSh[i] = (v42parX2[i] - v42parX1[i])/30.0;}
 else
 {v42stepxSh[i] = (v42parX1[i] - v42parX2[i])/30.0;}
 //
 if (v42parY2[i] < v42parY1[i]) {v42signySh[i] = -1} else {v42signySh[i] = 1};
 if (v42signySh[i] > 0) 
 {v42stepySh[i] = (v42parY2[i] - v42parY1[i])/30.0;}
 else
 {v42stepySh[i] = (v42parY1[i] - v42parY2[i])/30.0;}
 }
};

ver42MouseCalcF();

function fAnimv42() {
for (var i=0; i<v42ArLen; i+=1){
 var tmpxSh = v42xSh[i];
 v42xSh[i] = v42xSh[i] + v42stepxSh[i]*v42signxSh[i];
 if (v42xSh[i] > 500) v42xSh[i] = 0;
 if (v42xSh[i] < 0) v42xSh[i] = 500;
//
 var tmpySh = v42ySh[i];
 v42ySh[i] = v42ySh[i] - v42stepySh[i]*v42signySh[i];
 if (v42ySh[i] > 500) v42ySh[i] = 0;
 if (v42ySh[i] < 0) v42ySh[i] = 500;
//
 for (var j=0; j<v42ArLen; j+=1){
 if (i != j) if ((v42ySh[i] > (v42ySh[j] - 12))&&(v42ySh[i] < (v42ySh[j] + 12))&&(v42xSh[i] > (v42xSh[j] - 12))&&(v42xSh[i] < (v42xSh[j] + 12))) {v42ySh[i] = tmpySh+1; v42xSh[i] = tmpxSh+1;};
 }
//
 var tmpxRE = v42xRE[i];
 var tmpstepxRE = (v42xSh[i]-v42xRE[i])/20;
 if ((tmpstepxRE > 0)&&(tmpstepxRE < 2)) v42xRE[i] = v42xRE[i] + 2;
 if ((tmpstepxRE < 0)&&(tmpstepxRE > -2)) v42xRE[i] = v42xRE[i] - 2;
 if (tmpstepxRE === 0 ) v42xRE[i] = v42xRE[i] + 2
 if ((tmpstepxRE > 2)||(tmpstepxRE < -2)) v42xRE[i] = v42xRE[i] + tmpstepxRE;
// 
 if (v42xRE[i] > 500) v42xRE[i] = 0;
 if (v42xRE[i] < 0) v42xRE[i] = 500;
//
 var tmpyRE = v42yRE[i];
 var tmpstepyRE = (v42ySh[i]-v42yRE[i])/20;
 if ((tmpstepyRE > 0)&&(tmpstepyRE < 2)) v42yRE[i] = v42yRE[i] + 2;
 if ((tmpstepyRE < 0)&&(tmpstepyRE > -2)) v42yRE[i] = v42yRE[i] - 2;
 if (tmpstepyRE === 0 ) v42yRE[i] = v42yRE[i] + 2;
 if ((tmpstepyRE > 2)||(tmpstepyRE < -2)) v42yRE[i] = v42yRE[i] + tmpstepyRE;
// 
 if (v42yRE[i] > 500) v42yRE[i] = 0;
 if (v42yRE[i] < 0) v42yRE[i] = 500;
//
 for (var j=0; j<v42ArLen; j+=1){
 if (i != j) if ((v42yRE[i] > (v42yRE[j] - 12))&&(v42yRE[i] < (v42yRE[j] + 12))&&(v42xRE[i] > (v42xRE[j] - 12))&&(v42xRE[i] < (v42xRE[j] + 12))) {v42yRE[i] = tmpyRE+1; v42xRE[i] = tmpxRE+1;};
 }
//
 if ((tmpstepxRE > -0.5)&&(tmpstepxRE < 0.5)&&(tmpstepyRE > -0.5)&&(tmpstepyRE < 0.5)) {
v42xSh[i] = getRandomInt(50, 450);
v42ySh[i] = getRandomInt(50, 450);
 }
 }
}
</script>