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

Continuing work on orbital trails

Browse Source
This commit is contained in:
Greg Shuflin 2023-10-23 03:34:28 -07:00
parent cef99812c9
commit ffd3fa63f7
3 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/orbital-trails/app.js
View File

@ -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();

9
src/orbital-trails/index.html
View File

@ -7,12 +7,9 @@
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</head> </head>
<body> <body>
<div id="control-panel"> <div id="controlPanel">
<p>Click and drag to make more!</p> <h1>Controls</h1>
<label>Trails: </label> <p>Click to add more</p>
<input type="checkbox" id="trail" name="trail" checked />
<button id="clear">Clear</button>
<a href="https://codepen.io/jackrugile/pen/aCzHs" target="_blank">View Version 2</a>
</div> </div>
<canvas id="mainCanvas"></canvas> <canvas id="mainCanvas"></canvas>
</body> </body>

28
src/orbital-trails/style.css
View File

@ -15,34 +15,14 @@ canvas {
width: 100% width: 100%
} }
#control-panel { #controlPanel {
background: rgba(0,0,0,.75); background: rgba(0,0,0,.75);
border: 1px solid #333; border: 1px solid #333;
left: 20px; border-radius: 5px;
padding: 15px 15px; padding: 15px;
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px;
z-index: 2; 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;
}