Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.
Спасибо за статью. Я не Ваш студент. Но мне она помогла написать функцию для Канторова множества на Python для черепашки: import turtle def kanter(x, y, d):     if d > 1:         turtle...
Как реализовать в данном примере границы расчёта?

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Язык программирования: 
Javascript
Среда программирования: 
webshtorm

<!doctype html>
<html>
    <head>
        <title>Fun dots</title>
        <meta charset='utf-8' />
    </head>
    <body style="margin:0px;">
        <canvas id="canvas" style="background-color:black;width:500px;height:500px;position:absolute;left:50%;margin-left:-250px;top:50%;margin-top:-250px;">Обновите браузер</canvas>
 
        <script>			
			var ctx = document.getElementById('canvas').getContext('2d');
			var canvas = document.getElementById('canvas');
			var sizeCanvas = 500;     //РАзмер канваса
			canvas.width = sizeCanvas; // присваеваем длинну и ширину 
			canvas.height = sizeCanvas;
			var radius = 10; // радиус 1 шарика			
			var otstupx = 30; // отступ от шариков по х кординатам
			var otstupy = 15; // по у кординатам отступ
			var strokeWidth =7; // ширина рамки шарика
			var speed = 1.3; // скорость мигания
			var rectX = parseInt(sizeCanvas/(radius*2+otstupx)+1,10); // сколько шариков надо на размер канваса по х
			var rectY = parseInt(sizeCanvas/(radius*2+otstupy)+1,10); // тоже самое по у
 
 
 
 
 
 
			var c = new Array(); // делаем ассоциативный массив в котором будут хранится все кординаты каждого шарика
			var ccX =0; // изменяемая переменная содержит коодинаты анимированых кругов
			var colori=0; // итая переменная для изменения цвета для мигания например: color[colori]
			var str = strokeWidth; // изменяемая переменная для рамки шарика
			var color = ['#64C6DC','#F1BE41','#C94C44'];		// сам массив с цветами для анимации
			initCircles(); // задаем координаты всем шарикам и записываем их в ассоциативный массив
			/*
			в массиве в каждом итом элементе - объект который содержит 
			х-кординату у-кординату итый и житый номер, так если бы они были в матрице
			и цвет
			*/
 
 
 
			setInterval(function(){		// задаем интервал для анимации 	
				ccX+=speed; // изменяемая переменная
				draw(color[colori]); //функция для прорисовки анимированых кружков передаем в нее цвет тех кружков которые надо анимировать
 
				if(ccX>otstupx){ // если ширина анимированого кружка больше чем отступ то обнулем изменяемую переменную и обнуляем ширину рамки
					ccX=radius;
					str=strokeWidth;
					if(colori<color.length-1) // тут идем дальше по цвету массив колор
						colori++;
					else
						colori=0;
				}
				if(ccX>otstupx-strokeWidth && ccX<otstupx){ // при подходе к концу анимации ширина рамки изменяется в этом if мы вычисляем ее ширину
					str=otstupx-ccX;
				}
			},30);
 
			function initCircles(){
				var colormas1 = ['#64C6DC','#F1BE41','#C94C44']; // массив на четную строку шариков
				var colormas2 = ['#64C6DC','#F1BE41','#C94C44']; // на нечетную
				y=0;
 
				for(var i=0; i<rectY; i++, y+=radius*2+otstupy){
					var color = 0; // переменная выступает как итый элемент для массива колор
					if(i%2==0){ // четная или нечетная строка
						x=0;
						for(var j=0; j<rectX; j++, x+=radius*2+otstupx){					
							c.push({"x":x,"y":y,"color":colormas1[color]}); // запушиваем в массив с шариками новый шарик
							color++; // цвет меняем на другой
							if(color>=colormas1.length){ // если массив с цветом подходит к концу то его обнуляем
								color=0;
							}
						}
					}else{
						//x=0;
						x=0-((radius+otstupx/2)*3); // тут делаем отступ в 2,5 шарика чтоб нечетная строка была со смещением
						for(var j=0; j<rectX+radius+otstupx; j++, x+=radius*2+otstupx){					
							c.push({"x":x,"y":y,"color":colormas2[color],"i":i,"j":j}); // так же запушиваем и проверяем
							color++;
							if(color>=colormas2.length){
								color=0;
							}
						}
					}		
 
				}
			}
			function drawCircles(){				//тут рисуем шарики без анимации
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				for(var i=0; i < c.length; i++){ // каждый элемент масива с шариками прорисовываем
					ctx.beginPath();
					ctx.arc(c[i].x, c[i].y, radius, 0, 2*Math.PI, false);								
					ctx.lineWidth = 1;
					ctx.fillStyle =  c[i].color;
					ctx.fill();
					ctx.strokeStyle = c[i].color;
					ctx.stroke();
				}				
			}
 
 
 
			function draw(color) { // функция для прорисовки анимации каждого шарика
				ctx.fillStyle = 'black';
				ctx.fill(); // заливаем все черным
				ctx.clearRect(0,0,500,500);		 //очищаем		
				drawCircles(); // функция для прориросвки обычных шариков которые без анимации
				for(var i=0; i < c.length; i++){
					if(c[i].color == color){ // т.к. в функцию передается цвет к шарикам котрые надо анимировать тут мы выполняем проверку подходит шарик или нет
						ctx.beginPath();
						ctx.arc(c[i].x, c[i].y, ccX, 0, 2*Math.PI, false);
						ctx.lineWidth = str;
						ctx.strokeStyle = c[i].color;
						ctx.stroke();
					}					
				}
			}	
 
        </script>
    </body>
</html>

Прикрепленный файлРазмер
Fun dots.zip4.23 кб