Язык программирования:
Javascript
Среда программирования:
Notepad++
var canvas = document.getElementById("canvas");//инициализация канваса var ctx = canvas.getContext("2d"); var r = 10, rad=20, a = 0, sin=0, x1 = r, y1 = r;//инициализация переменных function draw() { rad = r; rad*=Math.abs(Math.sin(sin))+1;//изменение радиуса точек ctx.fillStyle = "rgba(242, 243, 244, 1)"//цвет фона ctx.fillRect(0, 0, 500, 500);//заливка фона for (var j = 0; j < 20; j++) {//прорисовка красных шаров, которые двигаются вправо for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-23*x1+6*r*i + a, y1 + 12*r* j, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(255, 0, 0, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ for (var j = 0; j < 20; j++) {//прорисовка красных шаров, которые двигаются влево for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-41*x1+6*r*i - a, 7*y1 + 12*r* j, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(255, 0, 0, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ for (var j = 0; j < 20; j++) {//прорисовка зеленых шаров, которые двигаются влево-вниз for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-47*x1 + 6 * r * i + 12*r*j - a, y1 + 6 * r *i - a, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(0, 255, 0, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ for (var j = 0; j < 20; j++) {//прорисовка зеленых шаров, которые двигаются вправо-вверх for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-65*x1 + 6 * r * i + 12*r*j + a, -23*y1 + 6 * r *i + a, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(0, 255, 0, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ for (var j = 0; j < 20; j++) {//прорисовка синих шаров, которые двигаются вправо-вниз for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-71*x1 + 6 * r * i + 12*r*j + a, y1 + 6 * r *i - a, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(0, 0, 255, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ for (var j = 0; j < 20; j++) {//прорисовка зеленых шаров, которые двигаются влево-вверх for (var i = 0; i < 20; i++) { ctx.beginPath(); ctx.arc(-113*x1 + 6 * r * i + 12*r*j - a, -23*y1 + 6 * r *i + a, rad, 0, 2 * Math.PI); ctx.fillStyle = "rgba(0, 0, 255, 0.33)" ctx.fill(); ctx.closePath(); } }//*/ a+=1;//переменная, отвечающая за смещение кружков sin+=Math.PI/60;//переменная отвечающая за плавное изменение радиуса кругов if(a > 12*r){ a=1;} if(sin == Math.PI) sin = 0; } draw(); canvas.addEventListener("click", draw); setInterval(draw, 50);