greg/Spazer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More gravity points work

Browse Source
This commit is contained in:
Greg Shuflin 2023-10-25 03:03:41 -07:00
parent 0b5d5a3755
commit 479ca0018c
2 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/gravity-points/app.js
View File

@ -1,4 +1,5 @@
const Victor = require("victor"); const Victor = require("victor");
const dat = require("dat.gui");
// TODO cycle this bkg color // TODO cycle this bkg color
const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)'; const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
@ -8,11 +9,60 @@ const G_POINT_RADIUS_LIMITS = 65;
const canvas = document.getElementById("mainCanvas"); const canvas = document.getElementById("mainCanvas");
const bufferCvs = document.createElement("canvas"); const bufferCvs = document.createElement("canvas");
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
const bufferCtx = bufferCvs.getContext('2d'); const bufferCtx = bufferCvs.getContext('2d');
const screenWidth = canvas.width = window.innerWidth; let screenWidth = canvas.width = window.innerWidth;
const screenHeight = canvas.height = window.innerHeight; 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"); console.log("Finished initting");
@ -26,10 +76,6 @@ const loop = (timestamp) => {
context.fillStyle = BACKGROUND_COLOR; context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, screenWidth, screenHeight); 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.fillStyle = grad;
context.fillRect(0, 0, screenWidth, screenHeight); context.fillRect(0, 0, screenWidth, screenHeight);

3
src/gravity-points/index.html
View File

@ -2,9 +2,8 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Fizzy Sparks</title> <title>Gravity Points</title>
<link href="style.css" rel="stylesheet" /> <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> <script type="module" src="app.js"></script>
</head> </head>
<body> <body>