From ffd3fa63f784929d4110b92c7199603fc9b3e2a1 Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Mon, 23 Oct 2023 03:34:28 -0700 Subject: [PATCH] Continuing work on orbital trails --- src/orbital-trails/app.js | 35 +++++++++++++++++++++++++++++++++++ src/orbital-trails/index.html | 9 +++------ src/orbital-trails/style.css | 28 ++++------------------------ 3 files changed, 42 insertions(+), 30 deletions(-) diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index e69de29..1ed1be9 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -0,0 +1,35 @@ +console.log("Initializing animation"); + +const canvas = document.getElementById('mainCanvas'); +const ctx = canvas.getContext('2d'); +const dpr = window.devicePixelRatio; +const cw = window.innerWidth; +const ch = window.innerHeight; +canvas.width = cw * dpr; +canvas.height = ch * dpr; +ctx.scale(dpr, dpr); + +const orbs = []; + +const createOrb = (mx, my) => { + console.log(`Creating orb at ${mx} ${my}`); + const dx = (cw/2) - mx; + const dy = (ch/2) - my; + const dist = Math.sqrt(dx * dx + dy * dy); + const angle = Math.atan2(dy, dx); +}; + + +const initialOrbCount = 100; +for (let n = initialOrbCount; n >= 0; n--) { + createOrb(cw/2, ch/2+(n*2)); +} + +const loop = (timestamp) => { + window.requestAnimationFrame(loop); + //console.log(timestamp); + + +}; + +loop(); diff --git a/src/orbital-trails/index.html b/src/orbital-trails/index.html index 772137f..484e8e7 100644 --- a/src/orbital-trails/index.html +++ b/src/orbital-trails/index.html @@ -7,12 +7,9 @@ -
-

Click and drag to make more!

- - - - View Version 2 +
+

Controls

+

Click to add more

diff --git a/src/orbital-trails/style.css b/src/orbital-trails/style.css index a291b9a..2961cbc 100644 --- a/src/orbital-trails/style.css +++ b/src/orbital-trails/style.css @@ -15,34 +15,14 @@ canvas { width: 100% } -#control-panel { +#controlPanel { background: rgba(0,0,0,.75); border: 1px solid #333; - left: 20px; - padding: 15px 15px; + border-radius: 5px; + padding: 15px; position: absolute; top: 20px; + left: 20px; z-index: 2; } -p { - font-size: 12px; - margin: 0 0 5px; -} - -label { - font-size: 12px; - font-weight: bold; -} - -button { - display: block; - margin: 10px 0 5px; -} - -a { - border-bottom: 1px dotted #444; - color: #fff; - font-size: 12px; - text-decoration: none; -}