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

Gravity points: render some color

Browse Source
This commit is contained in:
Greg Shuflin 2023-10-25 02:25:29 -07:00
parent 89d217562f
commit 1a2ec17275
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,40 @@
const Victor = require("victor");
// TODO cycle this bkg color
const BACKGROUND_COLOR = 'rgba(11, 51, 56, 1)';
const PARTICLE_RADIUS = 1;
const G_POINT_RADIUS = 10;
const G_POINT_RADIUS_LIMITS = 65;
const canvas = document.getElementById("mainCanvas");
const bufferCvs = document.createElement("canvas");
const context = canvas.getContext('2d');
const bufferCtx = bufferCvs.getContext('2d');
const screenWidth = canvas.width = window.innerWidth;
const screenHeight = canvas.height = window.innerHeight;
console.log("Finished initting");
const loop = (timestamp) => {
window.requestAnimationFrame(loop);
const cx = canvas.width / 2;
const cy = canvas.height / 2;
context.save();
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);
context.restore();
};
loop();

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

@ -8,7 +8,7 @@
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</head> </head>
<body> <body>
<canvas id="c"></canvas> <canvas id="mainCanvas"></canvas>
<div class="info">Click to add gravity point.</div> <div class="info">Click to add gravity point.</div>
</body> </body>
</html> </html>