More gravity points work
This commit is contained in:
parent
0b5d5a3755
commit
479ca0018c
@ -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);
|
||||
|
@ -2,9 +2,8 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Fizzy Sparks</title>
|
||||
<title>Gravity Points</title>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
|
||||
<script type="module" src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
Loading…
Reference in New Issue
Block a user