<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>