Compare commits
3 Commits
1a2ec17275
...
479ca0018c
| Author | SHA1 | Date |
|---|---|---|
Greg Shuflin
|
479ca0018c | |
|
Greg Shuflin
|
0b5d5a3755 | |
|
Greg Shuflin
|
cd8fda29cf |
2
justfile
2
justfile
|
|
@ -2,4 +2,4 @@ _default:
|
|||
just --list
|
||||
|
||||
parcel:
|
||||
pnpm exec parcel src/index.html --no-cache
|
||||
pnpm exec parcel serve --no-hmr
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"parcel": "^2.9.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"dat.gui": "^0.7.9",
|
||||
"konva": "^9.2.1",
|
||||
"victor": "^1.1.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ settings:
|
|||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
dat.gui:
|
||||
specifier: ^0.7.9
|
||||
version: 0.7.9
|
||||
konva:
|
||||
specifier: ^9.2.1
|
||||
version: 9.2.1
|
||||
|
|
@ -1256,6 +1259,10 @@ packages:
|
|||
css-tree: 1.1.3
|
||||
dev: true
|
||||
|
||||
/dat.gui@0.7.9:
|
||||
resolution: {integrity: sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==}
|
||||
dev: false
|
||||
|
||||
/detect-libc@1.0.3:
|
||||
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
|
||||
engines: {node: '>=0.10'}
|
||||
|
|
|
|||
|
|
@ -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