Introduction

A 3D engine built completely from scratch. Written in vanilla Javascript, and uses the canvas API to draw individual lines to represent vectors (which represent the points/vertices of all the objects in the engine).

It features a camera, which when turned, drives the vectors in our world through a series of transformations that track it's X,Y coordinates relative to the camera screen. A process called projection.

Technical Aspects

In regard to rendering, there are 2 main features:

• Standard Projection: Where we calculate the projection of our vectors based on the camera's bearing.
• Refraction: Where we displace our existing projected points by considering rays from the vectors to shoot through the screen and converge at a point behind it. This is what creates the perception of depth.

Introduction

This is a page I have built which features 2 autonomous moving spotlights which are created entirely out HTML elements.

• A set of divs (with radial-gradients that have a diffusing opacity) to simulate the halos.
• A dynamically morphing SVG path for the ray.
• A clip path that travels along with the halos to unravel the cloaked text at the center of the page

Usage Context: It serves as a "Main Lobby" or "Home Base" for all my other pages.

Technical Aspects

This was an unexpectedly challening project! Mainly because of the method used to create the animations. In a traditional interactive animated environment (such as a game), all of the elements would update themselves in real time. But not here. All of the animations of the spotlights are precalculated CSS animations! Special care is taken to:

• ensure that the halos and clip paths are always aligned together
• align the points of the SVG ray so that it always tracks the edges of the halos
• calculate an acceleration pattern for the spotlight's rotation, as well as the internal halo's extension/retraction so that it always maintains alignment with the moving halo