Javascript.RU

Система частиц силами jquery.

Вам не приходила в голову мысль, что было бы забавно рисовать что нибудь html элементами ? А мне вдруг пришла! Благодаря обсолютному позиционированию и div, на свет появился первый псевдо пиксель Забавно оказалось то что анимация jquery вполне способна превратить эти пикселы в некое подобие системы частиц.

Хотя если уж говорить о системе частиц, тут наверное эффективнее будет один таймер чем множество, но опять же об этом позже.

Нужен был механизьм работы с псевдо графикой - graph.
Суть его проста как валенок, функция point создаёт div с указанными характеристиками, и возвращает созданный экземпляр через return.
К характеристикам относятся

  • x,y - координаты, при отображении они умножаются на множетель r
  • R- это размер матрицы пикселей, точнее размер пикселя. Если R=1 то все псевдо пиксели соответствуют пикселям, если двум то размер обьектов и координаты обьекта умножаются на 2 и тд
  • color - св во в котором хранится текущий цвет
  • setRGB - метод упрощающий установку значений в формате rgb, так как мы можем играться цветом оперировать rgb нам удобнее чем hex
graph = {
        // размер точки, в реальных пикселах
        r:4,
        // текущий цвет
        color:"#abc",                
        // установить текущий цвет в формате rgb
        setRGB:function(r,g,b){
            this.color="rgb("+ r +","+ g +","+ b +")";                     
        },
        // рисуем точку текущим цветом.
            point:function(x,y){
                   $("body").append("<div class='point'></div>"); 
                   //позиционируем
                   ob=$(".point:last").offset({top: y*this.r,left:x*this.r});             
                   //Устанавливаем фон
                   ob.css("background-color",this.color);
                   //Устанавливаем размер
                   ob.css("width",this.r).css("height",this.r);
            return ob;
        }
    };

Суть работы надеюсь будет понятна из ремарок.
===========================================
Тестировать есть смысл только под ХРОМ.
У остальных браузеров нехватает производительности

===========================================

Переменная R задаёт размерность координатной сетки, чем выше R тем больше сетка, и крупнее псевдо пиксели.

<!-- 
jquery след от мыши
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">

.point {
    position:absolute; 
    width:14px; 
    height:14px;
    margin:5px; 
}

</style>  

 </head>


<script>
	graph = {
		// размер точки, в реальных пикселах
		r:4,
		// текущий цвет 
		color:"#abc",                 

		// установить текущий цвет в формате rgb
		setRGB:function(r,g,b){
			this.color="rgb("+ r +","+ g +","+ b +")";						
		},

		// рисуем точку текущим цветом.
	        point:function(x,y){
                        //добавим div к body
			$("body").append("<div class='point'></div>");	

                        //от позиционируем последний добавленный div 
			ob=$(".point:last").offset({top: y*this.r,left:x*this.r}); 			    

                        // зададим цвет и размеры
                        ob.css("background-color",this.color);			
			ob.css("width",this.r).css("height",this.r);
			return ob;
		}
	};

//====================== Основная часть ======================//

$(document).ready(function(){
        $("body").css("background-color","#000000");
       //задаём точке цвет
        graph.setRGB(255,150,0);		           

       //событие перемещения мыши
        $(document).mousemove(function(e){
             //рисуем точку
             //координаты, приходится переводить из стандартных в координаты псевдо пикселей           
             graph.point(e.pageX/graph.r,e.pageY/graph.r).hide(500,function(){$(this).remove()});
             //точка скроется после 500 мс, после чего будет удалена.
	});
});

</script>
   </body>
</html>

Оставляет цветной шлейф при нажатой левой кнопки мыши.

Цикл внутри mousemove определяет сколькол пикселей генерится за один мышиный шаг

Запускать только под ХРОМ !
Зажмите лувую кнопку мышки, и водите из стороны в сторону.

<!-- 
jquery частицы
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">

.point {
    position:absolute; 

    width:14px; 
    height:14px;
    margin:5px; 
}

</style>  

 </head>


<script>
        
	graph = {
		// размер точки, в реальных пикселах
		r:2,
		// текущий цвет 
		color:"#abc",                 

		// установить текущий цвет в формате rgb
		setRGB:function(r,g,b){
			this.color="rgb("+ r +","+ g +","+ b +")";						
		},

		// рисуем точку текущим цветом.
		point:function(x,y){
			$("body").append("<div class='point'></div>");	
			ob=$(".point:last").offset({top: y*this.r,left:x*this.r}); 			    
			ob.css("background-color",this.color);
			//==================================================//
			ob.css("width",this.r).css("height",this.r);
			return ob;
		}		
	};
var blueColor=0;
var trig=0;
$(document).ready(function(){
	graph.setRGB(100,0,0);		
       $("body").css("background-color","#000000");
        
       $(document).mousedown(function(e){
        $(document).mousemove(function(e){

         // цикл определяет сколько частиц можно генеририруется за шаг  
	   for (var i=0;i<2;i++) {
		
                blueColor=blueColor+1;
		if (blueColor>256)blueColor=0;

		rx=Math.random()*30-15;
		ry=Math.random()*30-15;
		rxs=Math.random()*4-2;
		rys=Math.random()*4-2;

                graph.setRGB(e.pageX,e.pageY,blueColor);

		graph.point(e.pageX/graph.r+rxs,e.pageY/graph.r+rys).animate({left:e.pageX+rx,top:e.pageY+ry},1000).hide(500,function(){$(this).remove()});
	   }
	  
	});
      } );
  
     $(document).mouseup(function(){$(document).unbind('mousemove');});

});


</script>
   </body>
</html>
<!-- 
jquery частицы
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">



.point {
    position:absolute; 

    width:14px; 
    height:14px;
    margin:5px; 
}

</style>  
 </head>

<script>        
	graph = {
		// размер точки, в реальных пикселах
		r:2,
		// текущий цвет 
		color:"#abc",                 

		// установить текущий цвет в формате rgb
		setRGB:function(r,g,b){
			this.color="rgb("+ r +","+ g +","+ b +")";						
		},

		// рисуем точку текущим цветом.
		point:function(x,y){
			$("body").append("<div class='point'></div>");	
			ob=$(".point:last").offset({top: y*this.r,left:x*this.r}); 			    
			ob.css("background-color",this.color);
			//==================================================//
			ob.css("width",this.r).css("height",this.r);
			return ob;
		}		
	};


// ======================  основная часть ====================//
var blueColor=0;
$(document).ready(function(){
	graph.setRGB(100,0,0);		
       $("body").css("background-color","#000000");
        
       $(document).mousedown(function(e){
        $(document).mousemove(function(e){

         // цикл определяет сколько частиц можно генеририруется за шаг  
         for (var i=0;i<2;i++) {
                blueColor=blueColor+1;
                if (blueColor>256)blueColor=0;

                rx=Math.random()*30-15;
                ry=Math.random()*50-15;
                rxs=Math.random()*4-2;
                rys=Math.random()*4-2;

               graph.setRGB(e.pageX,e.pageY,blueColor);

// анимация заключается в перемещении к нулю по координате X, координата y-смещается на пару пикселей.
		                      graph.point(e.pageX/graph.r+rxs,e.pageY/graph.r+rys).animate({left:0,top:e.pageY+ry},1000,function(){$(this).remove()});
	   }
	  
	});
      } );
  
     $(document).mouseup(function(){$(document).unbind('mousemove');});

});


</script>
   </body>
</html>

Данный пример более менее кросс браузерный
вполне сносно работает даже в ie 7.0

<!-- 
jquery Loading
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">



.point {
    position:absolute; 

    width:14px; 
    height:14px;
    margin:5px; 
}
.textL{
    position:absolute;  
    color:#666666;
    font-family: "Times roman", courier, serif
	
}

</style>  

 </head>

<body>
    <div class="textL">Loading</div>

<script>
        
	graph = {
		// размер точки, в реальных пикселах
		r:1,
		// текущий цвет 
		color:"#abc",                 

		// установить текущий цвет в формате rgb
		setRGB:function(r,g,b){
			this.color="rgb("+ r +","+ g +","+ b +")";						
		},

		// рисуем точку текущим цветом.
		point:function(x,y){
			$("body").append("<div class='point'></div>");	
			ob=$(".point:last").offset({top: y*this.r,left:x*this.r}); 			    
			ob.css("background-color",this.color);
			//==================================================//
			ob.css("width",this.r).css("height",this.r);
			return ob;
		}		
	};

// ======================  основная часть ====================//

$(document).ready(function(){
	graph.setRGB(100,0,0);		
       $("body").css("background-color","#000000");

      // координаты
      e={};
      e.layerY=50;
      e.layerX=0;

      //характеристики области отображения 
      paramScreen={
         body:$("body"),
         width:$("body").width(),
         height:($(document).height()/100)*80
      }

      $(".textL").offset({top: (paramScreen.height/2+55).toFixed(0),left:(paramScreen.width/2 - ( $(".textL").width()/2) ).toFixed(0)});

      f=function(){         
                //вычислим конечную точку полёта звёздочки
                randX =(Math.random()*paramScreen.width).toFixed(0);
                randY =(Math.random()*paramScreen.height).toFixed(0);                		

                graph.setRGB(155,155,155);
                //добавим пиксель (звёздочку)
                graph.point((paramScreen.width/2)/graph.r,(paramScreen.height/2)/graph.r)
                //отправим её в координаты randX,randY
                .animate({left:randX ,top:randY,opacity:0,width:10,height:10},1000,function(){$(this).remove()});

                //вызовем метод снова
                setTimeout(f,10);	 	  
      };
        
     f();

});


</script>
   </body>
</html>

Забавно, в предыдущей версии примеров я брал координаты мыши из layerX, layerY, и всё было хорошо. Но в первых числах ноября примеры внезапно перестали работать. Когда начал копать оказалась что теперь не с того, не с сего, layerX возвращает undefined. Причины такого поведения одному богу известны, либо баг в jquery, либо убрали эту возможность в новой версии. Сижу чешу репу, пришлось заменить layerX/layerY на pageX/pageY

7.11.2011

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>

<body>
    <script>        
	$(document).ready(function(){        
	       $(document).click(function(e){        
	               alert("pageX="+e.pageX);
	               alert("layerX="+e.layerX);
	       })
	});
    </script>
</body>
</html>
+5

Автор: nasdaq, дата: 10 ноября, 2011 - 19:49
#permalink

красиво


Автор: PeaceCoder, дата: 18 ноября, 2011 - 16:30
#permalink

Понравился эффект загрузки


Автор: Гость (не зарегистрирован), дата: 15 апреля, 2022 - 23:32
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:52
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
15 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum