webglmusti 0.0.0

package/src/WebGL/Matrix/matrix.ts

@@ -0,0 +1,293 @@
+type Float = number;
+
+export class Point2D{
+  x: Float;
+  y: Float;
+  constructor(x: Float=0, y: Float=0){
+    this.x = x;
+    this.y = y;
+  }
+  equals(p: Point2D): boolean{
+    return this.x === p.x && this.y === p.y;
+  }
+}
+
+export class Matrix2x2{
+  protected _matrix: Float32Array;
+  constructor(){
+    this._matrix = new Float32Array(4);
+  }
+  get matrix(): Float32Array{
+    return this._matrix;
+  }
+}
+
+export class Matrix3x3{
+  protected _matrix: Float32Array;
+  constructor(){
+    this._matrix = new Float32Array(9);
+  }
+  get matrix(): Float32Array{
+    return this._matrix;
+  }
+  static new(arr: Float[]): Matrix3x3{
+    const mat = new Matrix3x3();
+    mat.setMatrix(arr);
+    return mat;
+  }
+  setMatrix(mat: Float[]){
+    const lim = Math.min(9, mat.length);
+    for(let i = 0; i < lim; i++){
+      this._matrix[i] = mat[i];
+    }
+  }
+  static identity(): Matrix3x3{
+    const mat = new Matrix3x3();
+    mat._matrix[0] = 1.0;
+    mat._matrix[4] = 1.0;
+    mat._matrix[8] = 1.0;
+    return mat;
+  }
+  multiplyScalar(scalar: Float){
+    for(let i = 0; i < 9; i++){
+      this._matrix[i] *= scalar;
+    }
+  }
+  matrixMinorsCopy(): Matrix3x3{
+    const minors = new Matrix3x3();
+    minors._matrix[0] = this._matrix[4]*this._matrix[8] - this._matrix[5]*this._matrix[7];
+    minors._matrix[1] = this._matrix[3]*this._matrix[8] - this._matrix[5]*this._matrix[6];
+    minors._matrix[2] = this._matrix[3]*this._matrix[7] - this._matrix[4]*this._matrix[6];
+    minors._matrix[3] = this._matrix[1]*this._matrix[8] - this._matrix[2]*this._matrix[7];
+    minors._matrix[4] = this._matrix[0]*this._matrix[8] - this._matrix[2]*this._matrix[6];
+    minors._matrix[5] = this._matrix[0]*this._matrix[7] - this._matrix[1]*this._matrix[6];
+    minors._matrix[6] = this._matrix[1]*this._matrix[5] - this._matrix[2]*this._matrix[4];
+    minors._matrix[7] = this._matrix[0]*this._matrix[5] - this._matrix[2]*this._matrix[3];
+    minors._matrix[8] = this._matrix[0]*this._matrix[4] - this._matrix[1]*this._matrix[3];
+    return minors;
+  }
+  matrixCofactorsCopy(): Matrix3x3{
+    const cof = this.matrixMinorsCopy();
+    cof._matrix[1] *= -1;
+    cof._matrix[3] *= -1;
+    cof._matrix[5] *= -1;
+    cof._matrix[7] *= -1;
+    return cof;
+  }
+  adjugateCopy(): Matrix3x3{
+    const adj = new Matrix3x3();
+    adj._matrix[0] = this._matrix[0];
+    adj._matrix[1] = this._matrix[3];
+    adj._matrix[2] = this._matrix[6];
+    adj._matrix[3] = this._matrix[1];
+    adj._matrix[4] = this._matrix[4];
+    adj._matrix[5] = this._matrix[7];
+    adj._matrix[6] = this._matrix[2];
+    adj._matrix[7] = this._matrix[5];
+    adj._matrix[8] = this._matrix[8];
+    return adj;
+  }
+  determinant(): Float{
+    const a_minor = this._matrix[4]*this._matrix[8] - this._matrix[5]*this._matrix[7];
+    const b_minor = this._matrix[3]*this._matrix[8] - this._matrix[5]*this._matrix[6];
+    const c_minor = this._matrix[3]*this._matrix[7] - this._matrix[4]*this._matrix[6];
+    return this._matrix[0]*a_minor - this._matrix[1]*b_minor + this._matrix[2]*c_minor;
+  }
+
+  invert(){
+    const determinant = this.determinant();
+    const cofactors = this.matrixCofactorsCopy();
+    const inverse = cofactors.adjugateCopy();
+    inverse.multiplyScalar(1/determinant);
+    
+    for(let i = 0; i < 9; i++){
+      this._matrix[i] = inverse._matrix[i];
+    }
+  }
+
+  inverseCopy(): Matrix3x3{
+    const determinant = this.determinant();
+    const cofactors = this.matrixCofactorsCopy();
+    const inverse = cofactors.adjugateCopy();
+    inverse.multiplyScalar(1/determinant);
+    return inverse;
+  }
+
+  copy(): Matrix3x3{
+    const c = new Matrix3x3();
+    for(let i = 0; i < 9; i++){
+      c._matrix[i] = this._matrix[i];
+    }
+    return c;
+  }
+
+  static equals(m1: Matrix3x3, m2: Matrix3x3){
+    for(let i = 0; i < 9; i++){
+      if(m1._matrix[i] !== m2._matrix[i]){
+        return false;
+      }
+    }
+    return true;
+  }
+
+  print(){
+    console.log(`|${this._matrix[0].toFixed(2)} ${this._matrix[1].toFixed(2)} ${this._matrix[2].toFixed(2)}|`);
+    console.log(`|${this._matrix[3].toFixed(2)} ${this._matrix[4].toFixed(2)} ${this._matrix[5].toFixed(2)}|`);
+    console.log(`|${this._matrix[6].toFixed(2)} ${this._matrix[7].toFixed(2)} ${this._matrix[8].toFixed(2)}|`);
+  }
+}
+
+export class TransformationMatrix3x3 extends Matrix3x3{
+  //private _matrix: Float32Array;
+  constructor(){
+    super();
+    //this._matrix = new Float32Array(9);
+  }
+  static new(arr: Float[]): TransformationMatrix3x3{
+    const mat = new TransformationMatrix3x3();
+    mat.setMatrix(arr);
+    return mat;
+  }
+  static newMatrix(cmat: Matrix3x3): TransformationMatrix3x3{
+    const mat = new TransformationMatrix3x3();
+    for(let i = 0; i < 9; i++){
+      mat._matrix[i] = cmat.matrix[i];
+    }
+    return mat;
+  }
+
+  static identity(): TransformationMatrix3x3{
+    const mat = new TransformationMatrix3x3();
+    mat._matrix[0] = 1.0;
+    mat._matrix[4] = 1.0;
+    mat._matrix[8] = 1.0;
+    return mat;
+  }
+
+  static orthographic(left: number, right: number, bottom: number, top: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    mat._matrix[0] = 2/(right-left);
+    mat._matrix[4] = 2/(top-bottom);
+    mat._matrix[6] = (right+left)/(left-right);
+    mat._matrix[7] = (top+bottom)/(bottom-top);
+    return mat;
+  }
+
+  static projection(){
+
+  }
+
+  static translate(tx: number, ty: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    mat._matrix[6] = tx;
+    mat._matrix[7] = ty;
+    return mat;
+  }
+
+  static scale(sx: number, sy: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    mat._matrix[0] = sx;
+    mat._matrix[4] = sy;
+    return mat;
+  }
+
+  static rotate(radians: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    const c = Math.cos(radians);
+    const s = Math.sin(radians);
+    mat._matrix[0] = c;
+    mat._matrix[1] = s;
+    mat._matrix[3] = -s;
+    mat._matrix[4] = c;
+    return mat;
+  }
+
+  static rotateY(radians: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    const c = Math.cos(radians);
+    const s = Math.sin(radians);
+    mat._matrix[0] = c;
+    mat._matrix[6] = s;
+    //mat._matrix[2] = -s;
+    //mat._matrix[8] = c;
+    return mat;
+  }
+
+  static rotateX(radians: number): TransformationMatrix3x3{
+    const mat = TransformationMatrix3x3.identity();
+    const c = Math.cos(radians);
+    const s = Math.sin(radians);
+    mat._matrix[4] = c;
+    //mat._matrix[5] = -s;
+    mat._matrix[7] = s;
+    //mat._matrix[8] = c;
+    return mat;
+  }
+
+  setIdentity(){
+    this._matrix = new Float32Array(9);
+    this._matrix[0] = 1.0;
+    this._matrix[4] = 1.0;
+    this._matrix[8] = 1.0;
+  }
+  //static translate()
+
+  translate(tx: number, ty: number){
+    const tr_matrix = TransformationMatrix3x3.translate(tx, ty);
+    this.multiply(tr_matrix);
+  }
+  scale(sx: number, sy: number){
+    const sc_matrix = TransformationMatrix3x3.scale(sx, sy);
+    this.multiply(sc_matrix);
+  }
+
+  rotate(radians: number){
+    const rotation_matrix = TransformationMatrix3x3.rotate(radians);
+    this.multiply(rotation_matrix);
+  }
+
+  multiply(mat: TransformationMatrix3x3){
+    const temp = this.copy();
+    this._matrix[0] = temp._matrix[0]*mat._matrix[0] + temp._matrix[3]*mat._matrix[1] + temp.matrix[6]*mat._matrix[2];
+    this._matrix[1] = temp._matrix[1]*mat._matrix[0] + temp._matrix[4]*mat._matrix[1] + temp.matrix[7]*mat._matrix[2];
+    this._matrix[2] = temp._matrix[2]*mat._matrix[0] + temp._matrix[5]*mat._matrix[1] + temp.matrix[8]*mat._matrix[2];
+
+    this._matrix[3] = temp._matrix[0]*mat._matrix[3] + temp._matrix[3]*mat._matrix[4] + temp.matrix[6]*mat._matrix[5];
+    this._matrix[4] = temp._matrix[1]*mat._matrix[3] + temp._matrix[4]*mat._matrix[4] + temp.matrix[7]*mat._matrix[5];
+    this._matrix[5] = temp._matrix[2]*mat._matrix[3] + temp._matrix[5]*mat._matrix[4] + temp.matrix[8]*mat._matrix[5];
+
+    this._matrix[6] = temp._matrix[0]*mat._matrix[6] + temp._matrix[3]*mat._matrix[7] + temp.matrix[6]*mat._matrix[8];
+    this._matrix[7] = temp._matrix[1]*mat._matrix[6] + temp._matrix[4]*mat._matrix[7] + temp.matrix[7]*mat._matrix[8];
+    this._matrix[8] = temp._matrix[2]*mat._matrix[6] + temp._matrix[5]*mat._matrix[7] + temp.matrix[8]*mat._matrix[8];
+  }
+
+  multiplyCopy(mat: TransformationMatrix3x3): TransformationMatrix3x3{
+    const cpy = this.copy();
+    cpy._matrix[0] = this._matrix[0]*mat._matrix[0] + this._matrix[3]*mat._matrix[1] + this.matrix[6]*mat._matrix[2];
+    cpy._matrix[1] = this._matrix[1]*mat._matrix[0] + this._matrix[4]*mat._matrix[1] + this.matrix[7]*mat._matrix[2];
+    cpy._matrix[2] = this._matrix[2]*mat._matrix[0] + this._matrix[5]*mat._matrix[1] + this.matrix[8]*mat._matrix[2];
+
+    cpy._matrix[3] = this._matrix[0]*mat._matrix[3] + this._matrix[3]*mat._matrix[4] + this.matrix[6]*mat._matrix[5];
+    cpy._matrix[4] = this._matrix[1]*mat._matrix[3] + this._matrix[4]*mat._matrix[4] + this.matrix[7]*mat._matrix[5];
+    cpy._matrix[5] = this._matrix[2]*mat._matrix[3] + this._matrix[5]*mat._matrix[4] + this.matrix[8]*mat._matrix[5];
+
+    cpy._matrix[6] = this._matrix[0]*mat._matrix[6] + this._matrix[3]*mat._matrix[7] + this.matrix[6]*mat._matrix[8];
+    cpy._matrix[7] = this._matrix[1]*mat._matrix[6] + this._matrix[4]*mat._matrix[7] + this.matrix[7]*mat._matrix[8];
+    cpy._matrix[8] = this._matrix[2]*mat._matrix[6] + this._matrix[5]*mat._matrix[7] + this.matrix[8]*mat._matrix[8];
+    return cpy;
+  }
+
+  transformPoint(point: Point2D): Point2D{
+    const x = this._matrix[0] * point.x + this._matrix[3] * point.y + this._matrix[6]
+    const y = this._matrix[1] * point.x + this._matrix[4] * point.y + this._matrix[7];
+    return new Point2D(x, y);
+  }
+
+  copy(): TransformationMatrix3x3{
+    const c = new TransformationMatrix3x3();
+    for(let i = 0; i < 9; i++){
+      c._matrix[i] = this._matrix[i];
+    }
+    return c;
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/circle.ts

@@ -0,0 +1,49 @@
+import Circle from './../Source/circle.frag?raw';
+import * as Shader from './../../shader';
+
+export class CircleFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(Circle)){
+        console.log('Circle: fragment source not added');
+      }
+    }
+  }
+}
+
+export function CircleShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Circle extends Base{
+    private declare centre_uniform_location: WebGLUniformLocation | null;
+    private declare radius_uniform_location: WebGLUniformLocation | null;
+    private declare circle_colour_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'CircleShader';
+      if(CircleFragmentShader.shader){
+        this.program.addFragment(CircleFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.centre_uniform_location = this.program.getUniformLocation('u_centre');
+      this.radius_uniform_location = this.program.getUniformLocation('u_radius');
+      this.circle_colour_uniform_location = this.program.getUniformLocation('u_circle_colour');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setCentre(a: GLfloat, b: GLfloat){
+      this.program.setFloat2(this.centre_uniform_location!, a, b);
+    }
+    setRadius(a: GLfloat){
+      this.program.setFloat(this.radius_uniform_location!, a);
+    }
+    setCircle_colour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.circle_colour_uniform_location!, a, b, c);
+    }
+    setBackground_colour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.background_colour_uniform_location!, a, b, c);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/circle_only.ts

@@ -0,0 +1,47 @@
+import CircleOnly from './../Source/circle_only.frag?raw';
+import * as Shader from './../../shader';
+import * as WebGL from './../../../globals';
+
+export class CircleOnlyFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(CircleOnly)){
+        console.log('CircleOnly: fragment source not added');
+      }
+    }
+  }
+}
+
+export function CircleOnlyShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class CircleOnly extends Base{
+    private declare centre_uniform_location: WebGLUniformLocation | null;
+    private declare radius_uniform_location: WebGLUniformLocation | null;
+    private declare circle_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'CircleOnlyShader';
+      if(!CircleOnlyFragmentShader.shader){
+        CircleOnlyFragmentShader.load();
+      }
+      this.program.addFragment(CircleOnlyFragmentShader.shader!);
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.centre_uniform_location = this.program.getUniformLocation('u_centre');
+      this.radius_uniform_location = this.program.getUniformLocation('u_radius');
+      this.circle_colour_uniform_location = this.program.getUniformLocation('u_circle_colour');
+    }
+    setCentre(a: GLfloat, b: GLfloat){
+      this.program.setFloat2(this.centre_uniform_location!, a, b);
+    }
+    setRadius(a: GLfloat){
+      this.program.setFloat(this.radius_uniform_location!, a);
+    }
+    setCircleColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.circle_colour_uniform_location!, a, b, c);
+    }
+    setCircleColourFromColourRGB(colour: WebGL.Colour.ColourRGB){
+      this.program.setFloat3(this.circle_colour_uniform_location!, colour.red, colour.green, colour.blue);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/circle_outline.ts

@@ -0,0 +1,54 @@
+import CircleOutline from './../Source/circle_outline.frag?raw';
+import * as Shader from './../../shader';
+
+export class CircleOutlineFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(CircleOutline)){
+        console.log('CircleOutline: fragment source not added');
+      }
+    }
+  }
+}
+
+export function CircleOutlineShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class CircleOutline extends Base{
+    private declare centre_uniform_location: WebGLUniformLocation | null;
+    private declare radius_uniform_location: WebGLUniformLocation | null;
+    private declare outline_radius_uniform_location: WebGLUniformLocation | null;
+    private declare outline_colour_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'CircleOutlineShader';
+      if(CircleOutlineFragmentShader.shader){
+        this.program.addFragment(CircleOutlineFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.centre_uniform_location = this.program.getUniformLocation('u_centre');
+      this.radius_uniform_location = this.program.getUniformLocation('u_radius');
+      this.outline_radius_uniform_location = this.program.getUniformLocation('u_outline_radius');
+      this.outline_colour_uniform_location = this.program.getUniformLocation('u_outline_colour');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setCentre(a: GLfloat, b: GLfloat){
+      this.program.setFloat2(this.centre_uniform_location!, a, b);
+    }
+    setRadius(a: GLfloat){
+      this.program.setFloat(this.radius_uniform_location!, a);
+    }
+    setOutlineRadius(a: GLfloat){
+      this.program.setFloat(this.outline_radius_uniform_location!, a);
+    }
+    setOutlineColour(a: GLfloat, b: GLfloat, c: GLfloat, d: GLfloat){
+      this.program.setFloat4(this.outline_colour_uniform_location!, a, b, c, d);
+    }
+    setBackgroundColour(a: GLfloat, b: GLfloat, c: GLfloat, d: GLfloat){
+      this.program.setFloat4(this.background_colour_uniform_location!, a, b, c, d);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/colour.ts

@@ -0,0 +1,39 @@
+import Colour from './../Source/colour.frag?raw';
+import * as Shader from './../../shader';
+import * as WebGL from './../../../globals';
+
+export class ColourFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(Colour)){
+        console.log('Colour: fragment source not added');
+      }
+    }
+  }
+}
+
+export function ColourShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Colour extends Base{
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'ColourShader';
+      if(!ColourFragmentShader.shader){
+        ColourFragmentShader.load();
+      }
+      this.program.addFragment(ColourFragmentShader.shader!);
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.colour_uniform_location = this.program.getUniformLocation('colour');
+    }
+    setColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.colour_uniform_location!, a, b, c);
+    }
+
+    setColourFromColourRGB(colour: WebGL.Colour.ColourRGB){
+      this.program.setFloat3(this.colour_uniform_location!, colour.red, colour.green, colour.blue);
+    }
+
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/colour_alpha.ts

@@ -0,0 +1,37 @@
+import ColourAlpha from './../Source/colour_alpha.frag?raw';
+import * as Shader from './../../shader';
+import * as WebGL from './../../../globals';
+
+export class ColourAlphaFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(ColourAlpha)){
+        console.log('ColourAlpha: fragment source not added');
+      }
+    }
+  }
+}
+
+export function ColourAlphaShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class ColourAlpha extends Base{
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'ColourAlphaShader';
+      if(!ColourAlphaFragmentShader.shader){
+        ColourAlphaFragmentShader.load();
+      }
+      this.program.addFragment(ColourAlphaFragmentShader.shader!);
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.colour_uniform_location = this.program.getUniformLocation('colour');
+    }
+    setColour(a: GLfloat, b: GLfloat, c: GLfloat, d: GLfloat){
+      this.program.setFloat4(this.colour_uniform_location!, a, b, c, d);
+    }
+    setColourFromColourRGBA(colour: WebGL.Colour.ColourRGBA){
+      this.program.setFloat4(this.colour_uniform_location!, colour.red, colour.green, colour.blue, colour.alpha);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/line.ts

@@ -0,0 +1,39 @@
+import Line from './../Source/line.frag?raw';
+import * as Shader from './../../shader';
+
+export class LineFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(Line)){
+        console.log('Line: fragment source not added');
+      }
+    }
+  }
+}
+
+export function LineShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Line extends Base{
+    private declare thickness_uniform_location: WebGLUniformLocation | null;
+    private declare equation_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'LineShader';
+      if(LineFragmentShader.shader){
+        this.program.addFragment(LineFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.thickness_uniform_location = this.program.getUniformLocation('u_thickness');
+      this.equation_uniform_location = this.program.getUniformLocation('u_equation');
+    }
+    setThickness(a: GLfloat){
+      this.program.setFloat(this.thickness_uniform_location!, a);
+    }
+    setEquation(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.equation_uniform_location!, a, b, c);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/multi_colour_centre_circle_path.ts

@@ -0,0 +1,69 @@
+import MultiColourCentreCirclePath from './../Source/multi_colour_centre_circle_path.frag?raw';
+import * as Shader from './../../shader';
+
+export class MultiColourCentreCirclePathFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(MultiColourCentreCirclePath)){
+        console.log('MultiColourCentreCirclePath: fragment source not added');
+      }
+    }
+  }
+}
+
+export function MultiColourCentreCirclePathShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class MultiColourCentreCirclePath extends Base{
+    private declare left_colour_uniform_location: WebGLUniformLocation | null;
+    private declare right_colour_uniform_location: WebGLUniformLocation | null;
+    private declare top_colour_uniform_location: WebGLUniformLocation | null;
+    private declare bot_colour_uniform_location: WebGLUniformLocation | null;
+    private declare mid_colour_uniform_location: WebGLUniformLocation | null;
+    private declare circle_radius_uniform_location: WebGLUniformLocation | null;
+    private declare size_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'MultiColourCentreCirclePathShader';
+      if(MultiColourCentreCirclePathFragmentShader.shader){
+        this.program.addFragment(MultiColourCentreCirclePathFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.left_colour_uniform_location = this.program.getUniformLocation('u_left_colour');
+      this.right_colour_uniform_location = this.program.getUniformLocation('u_right_colour');
+      this.top_colour_uniform_location = this.program.getUniformLocation('u_top_colour');
+      this.bot_colour_uniform_location = this.program.getUniformLocation('u_bot_colour');
+      this.mid_colour_uniform_location = this.program.getUniformLocation('u_mid_colour');
+      this.circle_radius_uniform_location = this.program.getUniformLocation('u_circle_radius');
+      this.size_uniform_location = this.program.getUniformLocation('u_size');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setLeftColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.left_colour_uniform_location!, a, b, c);
+    }
+    setRightColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.right_colour_uniform_location!, a, b, c);
+    }
+    setTopColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.top_colour_uniform_location!, a, b, c);
+    }
+    setBotColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.bot_colour_uniform_location!, a, b, c);
+    }
+    setMidColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.mid_colour_uniform_location!, a, b, c);
+    }
+    setCircleRadius(a: GLfloat){
+      this.program.setFloat(this.circle_radius_uniform_location!, a);
+    }
+    setSize(a: GLfloat){
+      this.program.setFloat(this.size_uniform_location!, a);
+    }
+    setBackgroundColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.background_colour_uniform_location!, a, b, c);
+    }
+  }
+}