JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

Newton's Method Steps: <input type="range" id="steps" value="0" min="0" max="10" step="1" /> <span id="stepsDisplay">0</span>

CSS

canvas {
  max-width: 100%;
  border: 1px solid black;
}

JavaScript

const canvas = document.createElement("canvas");

canvas.width = 640;
canvas.height = 480;

const gl = canvas.getContext("webgl2");

document.body.append(canvas);

if (gl === null) {
  console.error("WebGL is not supported in this browser.");
}

// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);

const vsSource = `#version 300 es
  in vec4 aVertexPosition;

  void main() {
    gl_Position = aVertexPosition;
  }
`;

const fsSource = `#version 300 es
  precision mediump float;

	uniform int n_steps;
  const int MAX_DEGREE = 5;
  
  out vec4 outputColor;
  
  uniform vec4 color0;
  uniform vec4 color1;
  uniform vec4 color2;
  uniform vec4 color3;
  uniform vec4 color4;
  
  uniform vec2 coef0;
  uniform vec2 coef1;
  uniform vec2 coef2;
  uniform vec2 coef3;
  uniform vec2 coef4;
  uniform vec2 coef5;
  
  uniform vec2 root0;
  uniform vec2 root1;
  uniform vec2 root2;
  uniform vec2 root3;
  uniform vec2 root4;

  vec2 complex_mult(vec2 z, vec2 w){
      return vec2(z.x * w.x - z.y * w.y, z.x * w.y + z.y * w.x);
  }

  vec2 complex_div(vec2 z, vec2 w){
      float w_norm_squared = w.x * w.x + w.y * w.y;
      return complex_mult(z, vec2(w.x, -w.y)) / w_norm_squared;
  }

  vec2 complex_pow(vec2 z, int n){
      vec2 result = vec2(1.0, 0.0);
      for (int i = 0; i < n; i++) {
          result = complex_mult(result, z);
      }
      return result;
  }

  vec2 poly(vec2 z, vec2[MAX_DEGREE + 1] coefs){
      vec2 result = vec2(0.0);
      for(int n = 0; n < MAX_DEGREE + 1; n++){
          result += complex_mult(coefs[n], complex_pow(z, n));
      }
      return result;
  }

  vec2 dpoly(vec2 z, vec2[MAX_DEGREE + 1] coefs){
      vec2 result = vec2(0.0);
      for(int n = 1; n < MAX_DEGREE + 1; n++){
          result += float(n) * complex_mult(coefs[n], complex_pow(z, n - 1));
      }
      return result;
  }

  vec2 seek_root(vec2 z, vec2[MAX_DEGREE + 1]...