2024-06-18 17:38:35 +00:00
import { _ as e , c as i , o as s , a5 as a } from "./chunks/framework.BIC8H_hJ.js" ; const g = JSON . parse ( '{"title":"Particles","description":"","frontmatter":{},"headers":[],"relativePath":"public/kronos/docs/particles.md","filePath":"public/kronos/docs/particles.md"}' ) , t = { name : "public/kronos/docs/particles.md" } , l = a ( ` <h1 id="particles" tabindex="-1">Particles <a class="header-anchor" href="#particles" aria-label="Permalink to "Particles""> </a></h1><p>Particles are free-floating elements that can move and have many different behaviors. They can also interact with the mouse.</p><p>To make particles, use <code>makeParticles(particle, amount)</code>. <code>particle</code> is a particle-defining object, with features as explained below. There is also <code>makeShinies</code>, which uses different defaults and creates stationary particles at a random location. There are also a few other useful things listed at the end.</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
2024-06-17 04:46:30 +00:00
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > const < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > m y P a r t i c l e < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > image < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 3 2 F 6 2 ; - - s h i k i - d a r k : # 9 E C B F F ; " > & q u o t ; o p t i o n s _ w h e e l . p n g & q u o t ; < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > spread < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 2 0 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > gravity < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 2 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > time < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > : < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 3 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#6F42C1;--shiki-dark:#B392F0;" > speed < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > ( ) { < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 6 A 7 3 7 D ; - - s h i k i - d a r k : # 6 A 7 3 7 D ; " > / / R a n d o m i z e s p e e d a b i t < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#D73A49;--shiki-dark:#F97583;" > return < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > ( M a t h . < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 6 F 4 2 C 1 ; - - s h i k i - d a r k : # B 3 9 2 F 0 ; " > r a n d o m < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > ( ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # D 7 3 A 4 9 ; - - s h i k i - d a r k : # F 9 7 5 8 3 ; " > + < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 1 . 2 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > ) < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # D 7 3 A 4 9 ; - - s h i k i - d a r k : # F 9 7 5 8 3 ; " > * < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 0 0 5 C C 5 ; - - s h i k i - d a r k : # 7 9 B 8 F F ; " > 8 < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 E ; - - s h i k i - d a r k : # E 1 E 4 E 8 ; " > < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } , < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > etc < / s p a n > < s p a n s t y l e = " - - s h i k i - l i g h t : # D 7 3 A 4 9 ; - - s h i k i - d a r k : # F 9 7 5 8 3 ; " > . . . < / s p a n > < / s p a n >
< span class = "line" > < span style = "--shiki-light:#24292E;--shiki-dark:#E1E4E8;" > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > F e a t u r e s c a n b e f u n c t i o n s o r c o n s t a n t . T h e s e f e a t u r e s w i l l b e c a l l e d w h e n e a c h p a r t i c l e i s m a d e , w i t h a n < c o d e > i d < / c o d e > a r g u m e n t , w h i c h i s a s s i g n e d b a s e d o n w h i c h o f t h e < c o d e > a m o u n t < / c o d e > p a r t i c l e s b e i n g s p a w n e d t h i s i s . < s t r o n g > A l l o f t h e s e a r e o p t i o n a l < / s t r o n g > , w i t h a d e f a u l t v a l u e . < / p > < p > A l l d i s t a n c e s a r e i n p i x e l s a n d a n g l e s a r e i n d e g r e e s , w i t h 0 b e i n g u p a n d g o i n g c l o c k w i s e . < / p > < u l > < l i > < p > t i m e : T h e a m o u n t o f t i m e , i n s e c o n d s , t h a t t h e p a r t i c l e w i l l l a s t . D e f a u l t i s 3 . < / p > < / l i > < l i > < p > f a d e O u t T i m e : T h e a m o u n t o f s e c o n d s t h a t f a d i n g o u t a t t h e e n d s h o u l d t a k e ( p a r t o f t h e t o t a l l i f e t i m e ) . D e f a u l t i s 1 . < / p > < / l i > < l i > < p > f a d e I n T i m e : T h e a m o u n t o f s e c o n d s t h a t f a d i n g i n s h o u l d t a k e ( p a r t o f t h e t o t a l l i f e t i m e ) . D e f a u l t i s 0 . < / p > < / l i > < l i > < p > i m a g e : T h e i m a g e t h e p a r t i c l e s h o u l d d i s p l a y . < c o d e > & q u o t ; & q u o t ; < / c o d e > w i l l d i s p l a y n o i m a g e . D e f a u l t i s a g e n e r i c p a r t i c l e . < / p > < / l i > < l i > < p > t e x t : D i s p l a y s t e x t o n t h e p a r t i c l e . C a n u s e b a s i c H T M L . < / p > < / l i > < l i > < p > s t y l e : L e t s y o u a p p l y o t h e r C S S s t y l i n g t o t h e p a r t i c l e . < / p > < / l i > < l i > < p > w i d t h , h e i g h t : T h e d i m e n s i o n s o f t h e p a r t i c l e . D e f a u l t i s 3 5 a n d 3 5 . < / p > < / l i > < l i > < p > c o l o r : S e t s t h e c o l o r o f t h e i m a g e t o t h i s c o l o r . < / p > < / l i > < l i > < p > a n g l e : T h e a n g l e t h a t t h e p a r t i c l e s h o u l d f a c e . D e f a u l t i s 0 . < / p > < / l i > < l i > < p > d i r : T h e i n i t i a l a n g l e t h a t t h e p a r t i c l e s s h o u l d m o v e i n , b e f o r e s p r e a d i s f a c t o r e d i n . D e f a u l t i s w h a t e v e r a n g l e i s . < / p > < / l i > < l i > < p > s p r e a d : I f t h e r e a r e s e v e r a l p a r t i c l e s , t h e y w i l l b e s p r e a d o u t b y t h i s m a n y d e g r e e s , c e n t e r e d o n d i r . D e f a u l t i s 3 0 . < / p > < / l i > < l i > < p > r o t a t i o n : T h e a m o u n t t h a t t h e ( v i s u a l ) a n g l e o f t h e p a r t i c l e s h o u l d c h a n g e b y . D e f a u l t i s 0 . < / p > < / l i > < l i > < p > s p e e d : T h e s t a r t i n g s p e e d o f t h e p a r t i c l e . D e f a u l t i s 1 5 . < / p > < / l i > < l i > < p > g r a v i t y : T h e a m o u n t t h e p a r t i c l e s h o u l d a c c e l e r a t e d o w n w a r d s . D e f a u l t i s 0 . < / p > < / l i > < l i > < p > x , y : T h e s t a r t i n g c o o r d i n a t e s o f t h e p a r t i c l e . D e f a u l t i s a t t h e m o u s e p o s i t i o n . < / p > < / l i > < l i > < p > o f f s e t : H o w f a r f r o m t h e s t a r t e a c h p a r t i c l e s h o u l d a p p e a r . D e f a u l t i s 1 0 . < / p > < / l i > < l i > < p > x V e l , y V e l : S e t i n i t i a l l y b a s e d o n o t h e r p r o p e r t i e s , t h e n u s e d t o u p d a t e m o v e m e n t . < / p > < / l i > < l i > < p > l a y e r : W h e n c h a n g i n g t a b s , i f l e a v i n g t h e < c o d e > l a y e r < / c o d e > t a b , t h i s p a r t i c l e w i l l b e e r a s e d . < / p > < / l i > < l i > < p > Y o u c a n a d d o t h e r f e a t u r e s t o p a r t i c l e s , b u t y o u m u s t i m p l i m e n t t h e i r e f f e c t s y o u r s e l f . < / p > < / l i > < / u l > < p > F u n c t i o n f e a t u r e s : T h e s e s t a y a s f u n c t i o n s a n d a r e f o r m o r e a d v a n c e d t h i n g s . T h e y a r e o p t i o n a l . < / p > < u l > < l i > u p d a t e ( ) : C a l l e d e a c h t i c k . L e t s y o u d o m o r e a d v a n c e d v i s u a l a n d m o v e m e n t b e h a v i o r s b y c h a n g i n g o t h e r p r o p e r t i e s . < / l i > < l i > o n C l i c k ( ) , o n M o u s e O v e r ( ) , o n M o u s e L e a v e ( ) : C a l l e d w h e n t h e p a r t i c l e i s i n t e r a c t e d w i t h . < / l i > < / u l > < p > O t h e r u s e f u l t h i n g s t h a t a r e n o t f e a t u r e s o f t h e p a r t i c l e o b j e c t : < / p > < u l > < l i > s e t D i r ( p a r t i c l e , d i r ) , s e t S p e e d ( p a r t i c l e , s p e e d ) : S e t t h e s p e e d / d i r e c t i o n o n a p a r t i c l e . < / l i > < l i > c l e a r P a r t i c l e s ( c h e c k ) : F u n c t i o n t o d e l e t e p a r t i c l e s . W i t h n o c h e c k , i t d e l e t e s a l l p a r t i c l e s . C h e c k i s a f u n c t i o n t h a t t a k e s a p a r t i c l e , a n d r e t u r n s t r u e i f t h a t p a r t i c l e s h o u l d b e d e l e t e d . < / l i > < l i > Y o u c a n u s e V u e . d e l e t e ( p a r t i c l e s , t h i s . i d ) t o m a k e a p a r t i c l e d e l e t e i t s e l f . < / l i > < l i > m o u s e X a n d m o u s e Y a r e v a r i a b l e s t h a t t r a c k t h e m o u s e p o s i t i o n . < / l i > < l i > s i n ( x ) , c o s ( x ) , t a n ( x ) : f u n c t i o n s t h a t d o t h e s e o p e r a t i o n s , w i t h x i n d e g r e e s . ( I n s t e a d o f r a d i a n s ) . < / l i > < l i > a s i n ( x ) , a c o s ( x ) , a t a n ( x ) : f u n c t i o n s t h a t d o t h e s e o p e r a t i o n s , w i t h t h e r e t u r n e d v a l u e i n d e g r e e s . ( i n s t e a d o f r a d i a n s ) . < / l i > < / u l > ` , 1 1 ) , n = [ l ] ; f u n c t i o n h ( p , r , o , d , c , k ) { r e t u r n s ( ) , i ( " d i v " , n u l l , n ) } c o n s t f = e ( t , [ [ " r e n d e r " , h ] ] ) ; e x p o r t { g a s _ _ p a g e D a t a , f a s d e f a u l t } ;