]> git.r.bdr.sh - rbdr/lissajous/commitdiff
Add a few comments main
authorRuben Beltran del Rio <redacted>
Wed, 8 May 2024 16:37:48 +0000 (18:37 +0200)
committerRuben Beltran del Rio <redacted>
Wed, 8 May 2024 16:37:48 +0000 (18:37 +0200)
21 files changed:
eslint.config.js
lib/components/color.js
lib/components/configuration.js
lib/components/radius.js
lib/components/triple_amplitude.js
lib/components/triple_frequency.js
lib/components/triple_phase.js
lib/components/up.js
lib/config.js
lib/factories/curves.js
lib/factories/global.js
lib/factories/ui.js
lib/systems/amplitude_adjuster.js
lib/systems/camera_adjuster.js
lib/systems/camera_rotator.js
lib/systems/frequency_adjuster.js
lib/systems/global_adjuster.js
lib/systems/lissajous_position_updater.js
lib/systems/phase_adjuster.js
lib/systems/webgl_renderer.js
lib/webgl_utils.js

index d66512c002c3689776729da5c618dd82b6667fe7..982dda81da6dabb714117ab8bd0473eb6724bdaa 100644 (file)
@@ -5,7 +5,11 @@ export default [{
     globals: {
       document: true,
       window: true,
-      console: true
+      console: true,
+      Event: true,
+      EventTarget: true,
+      fetch: true,
+      MutationObserver: true
     }
   },
   plugins: {
index a9877bf66e5e7108d3a020d524e40fa13a7931b6..9be7ff15f1b5bea07bcd81e86c6790237d10e155 100644 (file)
@@ -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) {
 
index 78065c3a82343f03e979f5981d3bace73973d3d5..f5787ab0f72220bf17598319bf672848273ff902 100644 (file)
@@ -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) {
 
index 2aa29a83d8a6fdc6f1e62bff94a0cfe77c395628..0efd094ade8bf69719705af4312a7e956a664f1f 100644 (file)
@@ -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) {
 
index 376c321d478f3bc51810a884f85f3f1d19762969..8362c82f64c6ae2b1dd4be2a28be6fe30dc54b15 100644 (file)
@@ -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) {
 
index e98410e22f8da8e88c5cc469a1e0ec14319e6d0a..a67f1cd0d6f032afc014eb0dfd183caee3ba2327 100644 (file)
@@ -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) {
 
index 66b874b9e8f7f946cd9950c0a6e312d42ac49d61..99416d2a1cdb635ed4b3e42f94c8b3e9f1113c46 100644 (file)
@@ -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) {
 
index f28cc20d242436d0d38775b2636cddaa696d113b..585b4b521c3b1d271371cccba77c5775d729ac60 100644 (file)
@@ -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) {
 
index e8fa3c9c7eb54e61c088358aded7cefaaf6fc6ed..9e060f70ed47c3bf671774172173106ddd9ecfee 100644 (file)
@@ -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;
index f6db460d0374894f8f5b12a178126c9a4c8dcbb9..b5d6c84673056df185e591d7cf0d750ad0ddad17 100644 (file)
@@ -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();
index bf0360df980e7e604f3b3936f723290f63c6edfc..4f36a8e3bc96619926ecab859360a7c7ddf547fb 100644 (file)
@@ -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();
index cc34579f55ba06d6089c9129d2d1df7a89eac8c0..167c618a0ffe96dbb86a31491ea9ac08c1031410 100644 (file)
@@ -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,
index 04f271a17275ce288a755e3b0454f6a3455359f7..aed78483b6cd643c06211083bdb8f432dc478cc7 100644 (file)
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the amplitude of any compatible object
+  */
 export default class AmplitudeAdjuster extends System {
 
   constructor(container) {
index 9182343c54122348c451597717300d1f5e3a741d..21d391ece70eeb92413137341b2d5782fd4caa34 100644 (file)
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the parameters of the camera
+  */
 export default class CameraAdjuster extends System {
 
   constructor(container) {
index eccef0dd4006b32d07c0ec5f8031eac0232246dc..5cf66df656db5c2a15baa1180de6cead05546b63 100644 (file)
@@ -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() {
index b92bab6af4ad665e1add2dd1755bfdc812cba996..eefe00e22cf6f893538f3db363f6660d641e4a4b 100644 (file)
@@ -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: '𝛼',
index f7433ca1e3c58e2867452ad990ea019dcaf05f20..c1c188d360c3b1f8bfe843e8d3b690d85311e3a8 100644 (file)
@@ -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) {
index da90fb26631a34000ea67c0f9c1d6c307dfd3577..030d9bab44be5391cc9060a384fe70e9728500e3 100644 (file)
@@ -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() {
index 120b05d8a854595d0bb36c40159cb8185a6eb3f3..06ff870cc62726cfeac6d551ed3509aa597b8e89 100644 (file)
@@ -10,6 +10,9 @@ const internals = {
   }
 };
 
+/**
+  * UI that adjusts the phase of any compatible object
+  */
 export default class PhaseAdjuster extends System {
 
   constructor(container) {
index 3a92552f0dc5e5d91ef7afd6d4b86ee737f0ba20..b677c6c19456625c4d56757c71d4ba61c39624b9 100644 (file)
@@ -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) {
index 42bd8b6630d2266fca2328da4084eeb3a575e560..b594050e57ddcdbc3b80fbc4b3bb1dced17a6578 100644 (file)
@@ -35,6 +35,9 @@ export function initializeBuffers(gl) {
 }
 
 
+/**
+  * Loads and compiles a shader
+  */
 function loadShader(gl, type, source) {
 
   const shader = gl.createShader(type);