From 1a2ec1727527797a5a0098c7165371fa14423568 Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Wed, 25 Oct 2023 02:25:29 -0700 Subject: [PATCH] Gravity points: render some color --- src/gravity-points/app.js | 40 +++++++++++++++++++++++++++++++++++ src/gravity-points/index.html | 2 +- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/src/gravity-points/app.js b/src/gravity-points/app.js index e69de29..5644a35 100644 --- a/src/gravity-points/app.js +++ b/src/gravity-points/app.js @@ -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(); diff --git a/src/gravity-points/index.html b/src/gravity-points/index.html index 28147b8..e03f8ab 100644 --- a/src/gravity-points/index.html +++ b/src/gravity-points/index.html @@ -8,7 +8,7 @@ - +
Click to add gravity point.