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

Initialize starfield animation

Browse Source
This commit is contained in:
Greg Shuflin 2023-10-25 03:17:05 -07:00
parent 479ca0018c
commit 8a0240f91f
3 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/index.html
View File

@ -7,16 +7,23 @@
</head>
<body>
<h1>Spazer</h1>
<h2>Animations</h2>
<ul>
<li> <a href="./konva-ball/index.html">Konva-ball</a>
<li> <a href="./flow-fields/index.html">Flow-fields</a>
<li> <a href="./orbital-trails-extern/index.html">Orbital Trails (theirs)</a>
<li> <a href="./orbital-trails-extern-2/index.html">Orbital Trails 2 (theirs)</a>
<li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
<li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
<li> <a href="./starfield/index.html">Starfield</a>
</ul>
<h2>Reference Animations</h2>
<ul>
<li> <a href="./gravity-points-extern/index.html">Gravity Points (theirs)</a>
<li> <a href="./bokeh/index.html">Bokeh effect (their)</a>
<li> <a href="./sparks/index.html">Sparks (theirs)</a>
<li> <a href="./gravity-points-extern/index.html">Gravity Points (theirs)</a>
<li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
<li> <a href="./orbital-trails-extern/index.html">Orbital Trails (theirs)</a>
<li> <a href="./orbital-trails-extern-2/index.html">Orbital Trails 2 (theirs)</a>
</ul>
</body>
</html>

21
src/starfield/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Starfield</title>
<script type="module" src="starfield.ts"></script>
<style>
canvas {
display: block;
}
body {
background: black;
margin: 0px;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
</body>
</html>

16
src/starfield/starfield.ts Normal file
View File

@ -0,0 +1,16 @@
const canvas = document.querySelector("#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);
function resize() {
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
}
window.addEventListener('resize', resize, false);