From: Ruben Beltran del Rio Date: Wed, 8 May 2024 16:37:48 +0000 (+0200) Subject: Add a few comments X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/commitdiff_plain/32e2eed2a003c9be98f344ae70248139162b6969?ds=inline Add a few comments --- 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);