Add a few commentsHEADmain

21 files changed, 101 insertions, 1 deletions

diff --git a/eslint.config.js b/eslint.config.js
index d66512c..982dda8 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,7 +5,11 @@ export default [{
     globals: {
       document: true,
       window: true,
-      console: true
+      console: true,
+      Event: true,
+      EventTarget: true,
+      fetch: true,
+      MutationObserver: true
     }
   },
   plugins: {
diff --git a/lib/components/color.js b/lib/components/color.js
index a9877bf..9be7ff1 100644
--- a/lib/components/color.js
+++ b/lib/components/color.js
@@ -1,5 +1,10 @@
 import { Component } from '@serpentity/serpentity';
 
+/*
+  * Stores an RGBA color. NOTE: Currently unused as color depends on the
+  * position of the vertex. This is intended to change once we add multiple
+  * curves in a single render.
+  */
 export default class Color extends Component {
   constructor(config) {
 
diff --git a/lib/components/configuration.js b/lib/components/configuration.js
index 78065c3..f5787ab 100644
--- a/lib/components/configuration.js
+++ b/lib/components/configuration.js
@@ -1,5 +1,9 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores global behavior configuration that can be adjusted on the go. For
+  * static configuration see lib/config.js instead.
+  */
 export default class Configuration extends Component {
   constructor(config) {
 
diff --git a/lib/components/radius.js b/lib/components/radius.js
index 2aa29a8..0efd094 100644
--- a/lib/components/radius.js
+++ b/lib/components/radius.js
@@ -1,5 +1,8 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores the radius of a circle or sphere
+  */
 export default class Radius extends Component {
   constructor(config) {
 
diff --git a/lib/components/triple_amplitude.js b/lib/components/triple_amplitude.js
index 376c321..8362c82 100644
--- a/lib/components/triple_amplitude.js
+++ b/lib/components/triple_amplitude.js
@@ -1,5 +1,8 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores three values of amplitude, intended for a 3D parametric curve.
+  */
 export default class TripleAmplitude extends Component {
   constructor(config) {
 
diff --git a/lib/components/triple_frequency.js b/lib/components/triple_frequency.js
index e98410e..a67f1cd 100644
--- a/lib/components/triple_frequency.js
+++ b/lib/components/triple_frequency.js
@@ -1,5 +1,8 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores three values of frequency, intended for a 3D parametric curve.
+  */
 export default class TripleFrequency extends Component {
   constructor(config) {
 
diff --git a/lib/components/triple_phase.js b/lib/components/triple_phase.js
index 66b874b..99416d2 100644
--- a/lib/components/triple_phase.js
+++ b/lib/components/triple_phase.js
@@ -1,5 +1,8 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores three values of phase, intended for a 3D parametric curve.
+  */
 export default class TriplePhase extends Component {
   constructor(config) {
 
diff --git a/lib/components/up.js b/lib/components/up.js
index f28cc20..585b4b5 100644
--- a/lib/components/up.js
+++ b/lib/components/up.js
@@ -1,5 +1,8 @@
 import { Component } from '@serpentity/serpentity';
 
+/**
+  * Stores an up vector. Intended for the camera in the scene.
+  */
 export default class Up extends Component {
   constructor(config) {
 
diff --git a/lib/config.js b/lib/config.js
index e8fa3c9..9e060f7 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -1,4 +1,14 @@
+/**
+  * The ID of the main canvas
+  */
 export const canvasId = 'lissajous';
+
+/**
+  * The ID of the settings container
+  */
 export const settingsId = 'settings';
 
+/**
+  * The target FPS of the application
+  */
 export const fps = 30;
diff --git a/lib/factories/curves.js b/lib/factories/curves.js
index f6db460..b5d6c84 100644
--- a/lib/factories/curves.js
+++ b/lib/factories/curves.js
@@ -5,6 +5,13 @@ import TriplePhase from '../components/triple_phase';
 import TripleAmplitude from '../components/triple_amplitude';
 import Color from '../components/color';
 
+/**
+  * This file is a factory for curves.
+  */
+
+/**
+  * Creates a lissajous curve entity
+  */
 export function lissajousCurve() {
 
   const entity = new Entity();
diff --git a/lib/factories/global.js b/lib/factories/global.js
index bf0360d..4f36a8e 100644
--- a/lib/factories/global.js
+++ b/lib/factories/global.js
@@ -6,6 +6,15 @@ import Radius from '../components/radius';
 import Up from '../components/up';
 import Configuration from '../components/configuration';
 
+/**
+  * This file is a factory for global objects. It doesn't enforce it, but
+  * there should be only one of these entities in the engine at a given
+  * time.
+  */
+
+/**
+  * Creates a data entity that holds the configuration.
+  */
 export function configuration() {
 
   const entity = new Entity();
@@ -14,6 +23,9 @@ export function configuration() {
   return entity;
 }
 
+/**
+  * Creates a camera, used to modify the 3D view.
+  */
 export function camera() {
 
   const entity = new Entity();
diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index cc34579..167c618 100644
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -1,3 +1,10 @@
+/**
+  * This file is a factory for DOM UI elements.
+  */
+
+/**
+  * Returns a settings container that includes a section and a heading.
+  */
 export function settingsContainer({id, label, level=2}) {
 
   const container = document.createElement('section');
@@ -6,6 +13,11 @@ export function settingsContainer({id, label, level=2}) {
   return container;
 };
 
+/**
+  * Returns a slider that includes a label, and can optionally be set to
+  * "shift" to a different step. (eg. we use this for π mode, where frequency
+  * and amplitude are mapped to π/8 increments.
+  */
 export function slider({
   id,
   min,
diff --git a/lib/systems/amplitude_adjuster.js b/lib/systems/amplitude_adjuster.js
index 04f271a..aed7848 100644
--- a/lib/systems/amplitude_adjuster.js
+++ b/lib/systems/amplitude_adjuster.js
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the amplitude of any compatible object
+  */
 export default class AmplitudeAdjuster extends System {
 
   constructor(container) {
diff --git a/lib/systems/camera_adjuster.js b/lib/systems/camera_adjuster.js
index 9182343..21d391e 100644
--- a/lib/systems/camera_adjuster.js
+++ b/lib/systems/camera_adjuster.js
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the parameters of the camera
+  */
 export default class CameraAdjuster extends System {
 
   constructor(container) {
diff --git a/lib/systems/camera_rotator.js b/lib/systems/camera_rotator.js
index eccef0d..5cf66df 100644
--- a/lib/systems/camera_rotator.js
+++ b/lib/systems/camera_rotator.js
@@ -2,6 +2,9 @@ import { mat4, vec3 } from 'gl-matrix';
 import { System } from '@serpentity/serpentity';
 import Cameras from '../nodes/cameras';
 
+/**
+  * Rotates the camera around a "sphere"
+  */
 export default class CameraRotator extends System {
 
   constructor() {
diff --git a/lib/systems/frequency_adjuster.js b/lib/systems/frequency_adjuster.js
index b92bab6..eefe00e 100644
--- a/lib/systems/frequency_adjuster.js
+++ b/lib/systems/frequency_adjuster.js
@@ -2,6 +2,9 @@ import { System } from '@serpentity/serpentity';
 import Frequent from '../nodes/frequent';
 import { settingsContainer, slider } from '../factories/ui';
 
+/**
+  * UI that adjusts the frequency of any compatible object
+  */
 const internals = {
   symbols: {
     a: '𝛼',
diff --git a/lib/systems/global_adjuster.js b/lib/systems/global_adjuster.js
index f7433ca..c1c188d 100644
--- a/lib/systems/global_adjuster.js
+++ b/lib/systems/global_adjuster.js
@@ -2,6 +2,9 @@ import { System } from '@serpentity/serpentity';
 import Frequent from '../nodes/configurable';
 import { settingsContainer, slider } from '../factories/ui';
 
+/**
+  * UI that adjusts global configuration settings for the scene.
+  */
 export default class GlobalAdjuster extends System {
 
   constructor(container) {
diff --git a/lib/systems/lissajous_position_updater.js b/lib/systems/lissajous_position_updater.js
index da90fb2..030d9ba 100644
--- a/lib/systems/lissajous_position_updater.js
+++ b/lib/systems/lissajous_position_updater.js
@@ -6,6 +6,12 @@ const internals = {
   kPeriod: Math.PI * 12000000
 };
 
+/**
+  * Calculates the lissajous curve over time
+  * NOTE: This shouldn't store data, I should have a different entity for
+  * the actual drawable vertices. Either put the storage in the curve, or
+  * create a separate entity.
+  */
 export default class WebGLRenderer extends System {
 
   constructor() {
diff --git a/lib/systems/phase_adjuster.js b/lib/systems/phase_adjuster.js
index 120b05d..06ff870 100644
--- a/lib/systems/phase_adjuster.js
+++ b/lib/systems/phase_adjuster.js
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the phase of any compatible object
+  */
 export default class PhaseAdjuster extends System {
 
   constructor(container) {
diff --git a/lib/systems/webgl_renderer.js b/lib/systems/webgl_renderer.js
index 3a92552..b677c6c 100644
--- a/lib/systems/webgl_renderer.js
+++ b/lib/systems/webgl_renderer.js
@@ -45,6 +45,10 @@ const internals = {
   `
 };
 
+/**
+  * Does all the WebGL rendering. I'm not super familiar with WebGL so I need
+  * to revisit this in a while and see how I would restructure this.
+  */
 export default class WebGLRenderer extends System {
 
   constructor(canvas) {
diff --git a/lib/webgl_utils.js b/lib/webgl_utils.js
index 42bd8b6..b594050 100644
--- a/lib/webgl_utils.js
+++ b/lib/webgl_utils.js
@@ -35,6 +35,9 @@ export function initializeBuffers(gl) {
 }
 
 
+/**
+  * Loads and compiles a shader
+  */
 function loadShader(gl, type, source) {
 
   const shader = gl.createShader(type);