Added particle documentation

docs/particles.md

@@ -1,5 +1,59 @@
-Don't forget
-- layer
-- style
-- make text particles
--fade in?
+# Particles
+
+Particles are free-floating elements that can move and have many different behaviors. They can also interact with the mouse.
+
+To create particles, use `createParticles(particle, amount)`. `particle` is a particle-defining object, with features as explained below. There are also a few useful functions listed at the end.
+
+```js
+
+const myParticle {
+    image:"options_wheel.png",
+    spread: 20,
+    gravity: 2,
+    time: 3,
+    speed() { // Randomize speed a bit
+        return (Math.random() + 1.2) * 8 
+    },
+    etc...
+}
+```
+
+Features can be functions or constant. These features will be called when each particle is made, with an `id` argument, which is assigned based on which of the `amount` particles being spawned this is. **All of these are optional**, with a default value.
+
+All distances are in pixels and angles are in degrees, with 0 being up and going clockwise.
+
+- time: The amount of time, in seconds, that the particle will last. Default is 3.
+- fadeTime: The amount of seconds that fading out at the end should take (part of the total lifetime). Default is 1.
+- fadeTime: The amount of seconds that fading in should take (part of the total lifetime). Default is 0.
+
+- image: The image the particle should display. `""` will display no image. Default is a generic particle.
+- text: Displays text on the particle. Can use basic HTML.
+- style: Lets you apply other CSS styling to the particle.
+- width, height: The dimensions of the particle. Default is 35 and 35.
+
+- angle: The angle that the particle should face. Default is 0.
+- dir: The angle that the particles should move in, before spread is factored in. Default is whatever angle is.
+- spread: If there are several particles, they will be spread out by this many degrees, centered on dir. Default is 30.
+
+- rotation: The amount that the (visual) angle of the particle should change by. Default is 0.
+- speed: The starting speed of the particle. Default is 15.
+- gravity: The amount the particle should accelerate downwards. Default is 0.
+
+- x, y: The starting coordinates of the particle. Default is at the mouse position.
+- offset: How far from the start each particle should appear. Default is 10.
+
+- layer: When changing tabs, if leaving the `layer` tab, this particle will be erased.
+
+
+Function features: These stay as functions and are for more advanced things. They are optional.
+
+- update(): Called each tick. Lets you do more advanced visual and movement behaviors by changing other properties.
+- onClick(), onMouseOver(), onMouseLeave(): Called when the particle is interacted with.
+
+
+Other useful things that are not features of the particle object:
+
+- clearParticles(check): Function to delete particles. With no check, it deletes all particles. Check is a function that takes a particle, and returns true if that particle should be deleted.
+- You can use Vue.delete(particles, this.id) to make a particle delete itself.
+- mouseX and mouseY are variables that track the mouse position.
+- sin(x), cos(x): functions that do these operations, with x in degrees. (Instead of radians).

js/technical/particleSystem.js

@@ -1,10 +1,8 @@
-// Variables that must be defined to display popups
 var particles = {};
 var particleID = 0;
 var mouseX = 0;
 var mouseY = 0;
 
-// Function to show popups
 function makeParticles(data, amount=1) {
     for (let x = 0; x < amount; x++) {
         let particle = getNewParticle()
@@ -69,7 +67,7 @@ function updateParticles(diff) {
 function getNewParticle() {
     particleID++
     return {
-        time: 3333,
+        time: 3,
         id: particleID,
         x: mouseX,
         y: mouseY,
@@ -105,7 +103,6 @@ function getOpacity(particle) {
 }   
 
 function constructParticleStyle(particle){
-    console.log(getOpacity(particle))
     return {
         left: (particle.x  - particle.height/2) + 'px',
         top: (particle.y - particle.height/2) + 'px',