Adding what I'll call... giggle gravity

kaliumxyz · Apr 20, 2017 · 2af081c · 2af081c
1 parent 7872402
commit 2af081c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,12 @@
 <html>
 <head>
     <title>ASAP</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
     <link href='style.css' rel='stylesheet'>
 </head>
 <body>
-<canvas width="1000" height="1000">If you can read this, your browser does not support HTML5 canvas.</canvas>
+    <h1>press space</h1>
+    <canvas width="1000" height="1000">If you can read this, your browser does not support HTML5 canvas.</canvas>
 </body>
 <script src='load.js'></script>
 </html>
diff --git a/load.js b/load.js
@@ -6,10 +6,12 @@ const loadScript = _ => {
 	let script = document.createElement("script")
 	script.setAttribute("src","main.js")
 	select("head").appendChild(script)
+	select('h1').innerText = "A Simple Aestetic Particle engine"
 }
 
 const canvas = select('canvas')
 
+
 window.onresize = _ => {
     canvas.width = window.innerWidth
     canvas.height = window.innerHeight

diff --git a/main.js b/main.js
@@ -29,16 +29,20 @@ window.onkeydown = e => e.keyCode===32?start():e
 
 
 const mouse = {
-    emit : ev => particleArr.push(particle(ev.clientX,ev.clientY)),
-    pew : ev => {
-        let i = 10
+    emit : ev => {
+        let i = 1
         while (i--){
             particleArr.push(particle(ev.clientX,ev.clientY))
+        }},
+    pew : ev => {
+        let i = 1000
+        while (i--){
+            particleArr[i] = (particle(ev.clientX,ev.clientY))
         }
     },
 }
 
-window.onclick = mouse.pew
+window.onclick = mouse.emit
 
 const rand = i => {
     i = i || 1
@@ -87,20 +91,32 @@ const render = {
 
 // Moving stuff here.
 
-const gravity = (particle, entity) => {
+const gravity = entity => {
     const force = 9.81
-    const distance = {
-        x: particle.coords.x - entity.coords.x,
-        y: particle.coords.y - entity.coords.y,
-    }
-    // logic here :p.
+    particleArr.forEach(particle => {
+
+        let x = particle.coords.x - entity.coords.x
+        let y = particle.coords.y - entity.coords.y
+
+        if (particle !== entity){
+        particle.acc.x += 1 / x  
+        particle.acc.y += 1 / y
+        }
+        // actually implement gravity pl0x
+    })
 }
 
 const move = particle => {
     particle.coords.x += particle.acc.x
     particle.coords.y += particle.acc.y
 }
 
+// collision stuff here.
+
+const checkWithinBounds = entity => {
+
+}
+
 const collide = entity => {
     particleArr.forEach(particle => entity.coords == particle.coords ? particle.color = "": "" )
 }
@@ -130,7 +146,9 @@ const main = _ => {
     context.fillStyle='#FFF'
     context.fillRect(0,0,canvas.width,canvas.height)
     particleArr.forEach( particle => {
+        gravity(particle)
         move(particle)
+        checkWithinBounds(particle)
         render.square(particle)
     })
 }

diff --git a/style.css b/style.css
@@ -2,4 +2,11 @@ html, body, canvas {
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
+	font-family: 'Roboto Mono', monospace;
+}
+h1 {
+	width: 100%;
+	top: 80px;
+	position: fixed;
+	text-align: center;
 }