diff --git a/src/gravity-points/app.js b/src/gravity-points/app.js
index 5644a35..da13bd7 100644
--- a/src/gravity-points/app.js
+++ b/src/gravity-points/app.js
@@ -1,4 +1,5 @@
const Victor = require("victor");
+const dat = require("dat.gui");
// TODO cycle this bkg color
const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
@@ -8,11 +9,60 @@ const G_POINT_RADIUS_LIMITS = 65;
const canvas = document.getElementById("mainCanvas");
const bufferCvs = document.createElement("canvas");
-const context = canvas.getContext('2d');
+const context = canvas.getContext('2d');
const bufferCtx = bufferCvs.getContext('2d');
-const screenWidth = canvas.width = window.innerWidth;
-const screenHeight = canvas.height = window.innerHeight;
+let screenWidth = canvas.width = window.innerWidth;
+let screenHeight = canvas.height = window.innerHeight;
+
+
+let grad = null;
+
+const resize = (e) => {
+ screenWidth = canvas.width = window.innerWidth;
+ screenHeight = canvas.height = window.innerHeight;
+ bufferCvs.width = screenWidth;
+ bufferCvs.height = screenHeight;
+
+ // create circular gradient that fills the screen
+ const cx = canvas.width / 2;
+ const cy = canvas.height / 2;
+
+ grad =context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
+ grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+ grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
+};
+
+window.addEventListener('resize', resize, false);
+resize(null);
+
+
+const particles = [];
+const addParticle = (num) => {
+
+};
+
+const removeParticle = (num) => {
+
+};
+
+const controls = {
+ particleNum: 100
+};
+
+const gui = new dat.GUI();
+gui.add(controls, "particleNum").min(0).max(500).step(1).name("Particle Num").onChange(function() {
+ var n = (controls.particleNum | 0) - particles.length;
+ if (n > 0) {
+ addParticle(n);
+ } else if (n < 0) {
+ removeParticle(-n);
+ }
+});
+//gui.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
+gui.close();
+
+
console.log("Finished initting");
@@ -26,10 +76,6 @@ const loop = (timestamp) => {
context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, screenWidth, screenHeight);
- // create circular gradient that fills the screen
- const grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
- grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
- grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
context.fillStyle = grad;
context.fillRect(0, 0, screenWidth, screenHeight);
diff --git a/src/gravity-points/index.html b/src/gravity-points/index.html
index e03f8ab..1db1f71 100644
--- a/src/gravity-points/index.html
+++ b/src/gravity-points/index.html
@@ -2,9 +2,8 @@
- Fizzy Sparks
+ Gravity Points
-