From 1ec9c8ad99d2c9d7469c06533179701ebf4d3169 Mon Sep 17 00:00:00 2001 From: Bruce Thomas Date: Sat, 12 Mar 2022 07:20:26 +0000 Subject: [PATCH 1/2] Added space furniture --- app/index.html | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/app/index.html b/app/index.html index 0f1914f..7bda94b 100644 --- a/app/index.html +++ b/app/index.html @@ -3,30 +3,34 @@ Ably Arcade - - + + - + - + + -

Ably arcade

+
+
- +
-

- 3..2..1..GO! -

+

3..2..1..GO!

@@ -36,17 +40,21 @@

Ably arcade

-
Let me spectate
+ + + + +
Let me spectate
@@ -57,5 +65,6 @@

High Scores

+ From 354a9d21f08b4a860a7b537e16e73b717ab8cde2 Mon Sep 17 00:00:00 2001 From: Bruce Thomas Date: Sat, 12 Mar 2022 08:43:07 +0000 Subject: [PATCH 2/2] Make something to invade --- app/space.css | 37 +++++++++++++++++++++++ app/space.js | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 app/space.css create mode 100644 app/space.js diff --git a/app/space.css b/app/space.css new file mode 100644 index 0000000..aa30053 --- /dev/null +++ b/app/space.css @@ -0,0 +1,37 @@ +header { + background-image: url("/assets/topgrid.png"); + background-position: top left; + background-repeat: no-repeat; + background-size: cover; + z-index: 1; + left: 0; + right: 0; + top: 0; + height: 26vh; + position: fixed; +} + +footer{ + position: fixed; + background-image: url("/assets/bottomgrid.png"); + background-position: bottom; + background-repeat: no-repeat; + background-size: cover; + z-index: 1; + bottom: 0; + left: 0; + right: 0; + height: 30vh; +} + +#final-frontier { + position: fixed; + height: 100%; + width: 100%; + z-index: 0; +} + +h1 { + position: relative; + z-index: 3; +} diff --git a/app/space.js b/app/space.js new file mode 100644 index 0000000..66f4073 --- /dev/null +++ b/app/space.js @@ -0,0 +1,82 @@ +const canvas = document.getElementById("final-frontier"); +const c = canvas.getContext("2d"); + +let w, h, notNow; +let universe = celestialBodies(10000); + +setCanvasExtents(); +requestAnimationFrame(letThereBeLight); +window.onresize = setCanvasExtents; + +function letThereBeLight(time) { + notNow = time; + requestAnimationFrame(pulse); +} + +function pulse(time) { + const elapsed = time - notNow; + notNow = time; + + hyperjump(elapsed); + clear(); + + const cx = w / 2; + const cy = h / 2; + + universe.forEach((star) => { + const x = cx + star.x / (star.z * 0.001); + const y = cy + star.y / (star.z * 0.001); + const offScreen = x < 0 || x >= w || y < 0 || y >= h; + + if (offScreen) return; + + const distance = star.z / 1000.0; + const z = 1 - distance * distance; + + createStar(x, y, z); + }); + + requestAnimationFrame(pulse); +} + +function celestialBodies(count) { + const { random } = Math; + const { clientWidth, clientHeight } = document.body; + return [...Array(count)].map(() => ({ + x: random() * clientWidth - clientWidth / 2, + y: random() * clientHeight - clientHeight / 2, + z: random() * 1000, + })); +} + +function setCanvasExtents() { + const { clientWidth, clientHeight } = document.body; + w = clientWidth; + h = clientHeight; + canvas.width = clientWidth; + canvas.height = clientHeight; +} + +function clear() { + c.fillStyle = "black"; + c.fillRect(0, 0, canvas.width, canvas.height); +} + +function createStar(x, y, z, px = 4) { + const intensity = 0.6; + const alpha = z * intensity; + const size = px * z; + c.fillStyle = `rgba(255,255,255,${alpha})`; + c.fillRect(x, y, size, size); +} + +function hyperjump(epoc) { + const warpspeed = 0.03; + const velocity = epoc * warpspeed; + + // update the star position on z axis + universe.forEach((s) => { + s.z -= velocity; + s.z += s.z <= 1 ? 1000 : 0; + }); +}