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

Compare commits

base: greg:1a2ec1727527797a5a0098c7165371fa14423568
Branches Tags
greg:master
...
compare: greg:479ca0018c9f44c4de8312f9ac55928c0d9b9d6a
Branches Tags
greg:master

3 Commits
1a2ec17275 ... 479ca0018c

Author SHA1 Message Date
Greg Shuflin
479ca0018c More gravity points work 2023-10-25 03:03:41 -07:00
Greg Shuflin
0b5d5a3755 Try this to avoid freezes 2023-10-25 02:38:03 -07:00
Greg Shuflin
cd8fda29cf Add dat gui 2023-10-25 02:27:29 -07:00
5 changed files with 63 additions and 10 deletions
Show Stats Expand all files Collapse all files

2
justfile
View File

@ -2,4 +2,4 @@ _default:
just --list just --list
parcel: parcel:
pnpm exec parcel src/index.html --no-cache pnpm exec parcel serve --no-hmr

1
package.json
View File

@ -9,6 +9,7 @@
"parcel": "^2.9.3" "parcel": "^2.9.3"
}, },
"dependencies": { "dependencies": {
"dat.gui": "^0.7.9",
"konva": "^9.2.1", "konva": "^9.2.1",
"victor": "^1.1.0" "victor": "^1.1.0"
} }

7
pnpm-lock.yaml
View File

@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
dependencies: dependencies:
dat.gui:
specifier: ^0.7.9
version: 0.7.9
konva: konva:
specifier: ^9.2.1 specifier: ^9.2.1
version: 9.2.1 version: 9.2.1
@ -1256,6 +1259,10 @@ packages:
css-tree: 1.1.3 css-tree: 1.1.3
dev: true dev: true
/dat.gui@0.7.9:
resolution: {integrity: sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==}
dev: false
/detect-libc@1.0.3: /detect-libc@1.0.3:
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
engines: {node: '>=0.10'} engines: {node: '>=0.10'}

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>