diff --git a/Screenshot 2023-05-31 220243.png b/Screenshot 2023-05-31 220243.png
new file mode 100644
index 0000000..62bae2d
Binary files /dev/null and b/Screenshot 2023-05-31 220243.png differ
diff --git a/webGl/circle fractal/css/styles.css b/webGl/circle fractal/css/styles.css
new file mode 100644
index 0000000..d21bee8
--- /dev/null
+++ b/webGl/circle fractal/css/styles.css
@@ -0,0 +1,112 @@
+body {
+ -webkit-box-sizing: border-box;
+ /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box;
+ /* Firefox, other Gecko */
+ box-sizing: border-box;
+ /* Opera/IE 8+ */
+ height: 100%
+}
+
+p {
+ margin: 0px;
+}
+
+canvas {
+ position: absolute;
+}
+
+#toolbar {
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+
+ position: absolute;
+ padding: 0px 20px 0px 20px;
+ width: 500px;
+ height: 100vh;
+ overflow-y: scroll;
+ background-color: rgb(189, 189, 189);
+}
+
+#custom {
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+
+ /* position: absolute; */
+ padding: 0px 20px 0px 20px;
+ /* width: 500px; */
+ /* height: 100vh; */
+ background-color: rgb(189, 189, 189);
+}
+
+.button {
+ display: block;
+ position: absolute;
+ right: 20px;
+ z-index: 100;
+}
+
+
+.controls {
+ display: flex;
+ margin: 8px 0px;
+}
+
+.controlFrameButton {
+ width: 8%;
+}
+.controlPauseButton {
+ width: 80%;
+ margin: auto;
+}
+/* <!-- HTML !-->
+<button class="button-8" role="button">Button 8</button> */
+
+/* CSS */
+.button-8 {
+ background-color: #e1ecf4;
+ border-radius: 3px;
+ border: 1px solid #7aa7c7;
+ box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
+ box-sizing: border-box;
+ color: #1f3f55;
+ cursor: pointer;
+ display: inline-block;
+ /* font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; */
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 1.15385;
+ /* margin: 0; */
+ outline: none;
+ padding: 8px .8em;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ vertical-align: baseline;
+ white-space: nowrap;
+}
+
+.button-8:hover,
+.button-8:focus {
+ background-color: #b3d3ea;
+ color: #2c5777;
+}
+
+.button-8:focus {
+ box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
+}
+
+.button-8:active {
+ background-color: #a0c7e4;
+ box-shadow: none;
+ color: #2c5777;
+}
+
+.buttonReset{
+ background-color: #f4e1e1;
+}
\ No newline at end of file
diff --git a/webGl/circle fractal/index.html b/webGl/circle fractal/index.html
new file mode 100644
index 0000000..4375160
--- /dev/null
+++ b/webGl/circle fractal/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<!-- ahhh -->
+
+<head>
+ <title>Document</title>
+ <link rel="stylesheet" href="./css/styles.css">
+</head>
+
+<body style="margin:0;">
+ <canvas id="canvas" style="display: block;box-sizing: border-box;"></canvas>
+ <div id="toolbar">
+ <br>
+ <select id="shape-selector">
+ <option value="EyePrototype">EyePrototype</option>
+ <option value="Nodal_expanding">Nodal_expanding</option>
+ <option value="MaryFace">MaryFace</option>
+ <option value="CircleExpand">CircleExpand</option>
+ <option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
+ <option value="FloralPhyllo">FloralPhyllo</option>
+ <option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
+ <option value="Spiral1">Spiral1</option>
+ <option value="FloralAccident">FloralAccident</option>
+ <option value="Phyllotaxis">Phyllotaxis</option>
+ <option value="SquareTwist_angle">SquareTwist_angle</option>
+ </select>
+ <div id="custom"></div>
+ <br>
+ <p>Controls:</p>
+ <p>
+ Press "Space" to pause and start the animation
+ </p>
+ <p>
+ Press "P" to show/hide the control panel
+ </p>
+ <br>
+ <p>Speed</p>
+ <input type="text" id="inputDegPerSec" value="10" onchange="ChangeDegPerSec(this.value)">
+ <br>
+ <p>Controls</p>
+ <div class="controls">
+ <button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
+ <button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
+ <button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
+ </div>
+ <button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
+ </div>
+ <div>
+ <button onclick="manualToggleSettings()" class="button">Show/hide</button>
+ </div>
+</body>
+<script src="./js/helper.js" type="text/javascript"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="./js/math.js" type="text/javascript"></script>
+<script src="./js/objects.js" type="text/javascript"></script>
+<script src="./js/index.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/webGl/circle fractal/index.js b/webGl/circle fractal/index.js
new file mode 100644
index 0000000..5e5483d
--- /dev/null
+++ b/webGl/circle fractal/index.js
@@ -0,0 +1,101 @@
+// Get a reference to the canvas element
+const canvas = document.getElementById('canvas');
+
+// Set up WebGL context
+const gl = canvas.getContext('webgl');
+// Set the canvas size and WebGL viewport
+canvas.width = 800;
+canvas.height = 800;
+// let centerX = canvas.width / 2;
+// let centerY = canvas.height / 2;
+gl.viewport(0, 0, canvas.width, canvas.height);
+// Create vertex shader
+const vertexShaderSource = `
+ attribute vec2 position;
+ void main() {
+ gl_Position = vec4(position, 0.0, 1.0);
+ }
+`;
+
+// Create fragment shader using the code you wrote
+const fragmentShaderSource = `
+ precision mediump float;
+ uniform vec2 iResolution;
+ uniform float iTime;
+
+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+ vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
+ vec2 uv0 = uv;
+ vec3 colour = vec3(1.0, 1.5, 2.0);
+ vec3 colour2 = vec3(0.2, 0.2, 1.0);
+ float pi = 3.1415926;
+
+ for (float i = 0.0; i < 2.0; i++) {
+ uv = fract(uv * 1.5) - 0.5;
+ float distance = length(uv);
+
+ distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
+ distance = abs(distance);
+ distance = 0.02 / distance;
+
+ colour = mix(colour, colour2, length(uv));
+
+ colour *= distance;
+ }
+
+ float distance = length(uv0);
+ distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
+ distance = abs(distance);
+ distance = 0.02 / distance;
+
+ colour = mix(colour, colour2, length(uv0));
+ colour *= distance;
+
+ fragColor = vec4(colour, 1.0);
+ }
+
+ void main() {
+ vec2 fragCoord = gl_FragCoord.xy;
+ vec2 iResolution = vec2(${canvas.width.toFixed(1)}, ${canvas.height.toFixed(1)});
+ float iTime = ${performance.now().toFixed(3)} / 1000.0;
+ vec4 fragColor;
+ mainImage(fragColor, fragCoord);
+ gl_FragColor = fragColor;
+ }
+`;
+
+// Compile and link shaders
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vertexShaderSource);
+gl.compileShader(vertexShader);
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fragmentShaderSource);
+gl.compileShader(fragmentShader);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.useProgram(program);
+
+// Create vertex buffer
+const positionBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+const positionAttributeLocation = gl.getAttribLocation(program, 'position');
+gl.enableVertexAttribArray(positionAttributeLocation);
+gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+
+// Set uniforms
+const iResolutionLocation = gl.getUniformLocation(program, 'iResolution');
+gl.uniform2f(iResolutionLocation, canvas.width, canvas.height);
+
+// Render the shader
+function render() {
+ gl.uniform1f(gl.getUniformLocation(program, 'iTime'), performance.now() / 1000.0);
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ requestAnimationFrame(render);
+}
+
+render();
\ No newline at end of file
diff --git a/webGl/circle fractal/js/helper.js b/webGl/circle fractal/js/helper.js
new file mode 100644
index 0000000..5e27b17
--- /dev/null
+++ b/webGl/circle fractal/js/helper.js
@@ -0,0 +1,274 @@
+async function fetchConfig(className) {
+ // const config = await $.getJSON("config.json");
+ const config = {
+
+ EyePrototype: [
+ { type: "range", min: -20, max: 20, defaultValue: 0, property: "Val1" },
+ // { type: "color", defaultValue: "#00fffb", property: "colourPupil" },
+ ],
+ };
+ return config[className];
+}
+
+function addControl(item, instance) {
+ console.log(item);
+ let parentDiv = document.getElementById("custom");
+
+ let title = document.createElement("p");
+ title.innerText = item.property + ": " + item.defaultValue;
+ title.id = "elText" + item.property;
+
+ let control = document.createElement("input");
+ control.type = item.type;
+
+ if (item.type === "range") {
+ control.min = item.min;
+ control.max = item.max;
+ }
+
+ control.value = item.defaultValue;
+ control.className = "control";
+ control.id = "el" + item.property;
+
+ const listener = (event) => {
+ const newValue = event.target.value;
+ instance[item.property] =
+ item.type === "range" ? parseInt(newValue, 10) : newValue;
+
+ title.innerText = item.property + ": " + newValue;
+ };
+
+ control.addEventListener("input", listener);
+
+ parentDiv.appendChild(title);
+ parentDiv.appendChild(control);
+
+ return { element: control, listener };
+}
+
+function drawEyelid(width, x1, y1, colour) {
+ x1 -= centerX;
+ y1 -= centerY;
+
+ const angle = Math.atan2(y1, x1);
+ const cosAngle = Math.cos(angle);
+ const sinAngle = Math.sin(angle);
+
+ const x2 = cosAngle * width;
+ const y2 = sinAngle * width;
+
+ const x3Old = width / 2;
+ const y3Old = width / 2;
+ const x4Old = width / 2;
+ const y4Old = -width / 2;
+
+ const x3 = x3Old * cosAngle - y3Old * sinAngle;
+ const y3 = x3Old * sinAngle + y3Old * cosAngle;
+ const x4 = x4Old * cosAngle - y4Old * sinAngle;
+ const y4 = x4Old * sinAngle + y4Old * cosAngle;
+
+ x1 += centerX;
+ y1 += centerY;
+ const x2Final = x2 + x1;
+ const y2Final = y2 + y1;
+ const x3Final = x3 + x1;
+ const y3Final = y3 + y1;
+ const x4Final = x4 + x1;
+ const y4Final = y4 + y1;
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x3Final, y3Final, x2Final, y2Final);
+
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x4Final, y4Final, x2Final, y2Final);
+ ctx.fillStyle = colour;
+ ctx.fill();
+
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = "black";
+ ctx.stroke();
+}
+
+function drawEyelidAccident(x1, y1) {
+ let leafWidth = 120;
+ let leafHeight = 60;
+ x1 -= centerX;
+ y1 -= centerY;
+ let angle = Math.atan(y1 / x1);
+ // if(angle >=Math.PI){
+ // angle -=Math.PI
+ // console.log("greater called")
+ // }
+ angle = Math.abs(angle);
+ let x2Old = 0 + leafWidth;
+ let y2Old = 0;
+
+ let x3Old = 0 + leafWidth / 2;
+ let y3Old = 0 + leafHeight / 2;
+
+ let x4Old = 0 + leafWidth / 2;
+ let y4Old = 0 - leafHeight / 2;
+
+ let x2 = x2Old * Math.cos(angle) - y2Old * Math.sin(angle);
+ let y2 = x2Old * Math.sin(angle) + y2Old * Math.cos(angle);
+
+ let x3 = x3Old * Math.cos(angle) - y3Old * Math.sin(angle);
+ let y3 = x3Old * Math.sin(angle) + y3Old * Math.cos(angle);
+
+ let x4 = x4Old * Math.cos(angle) - y4Old * Math.sin(angle);
+ let y4 = x4Old * Math.sin(angle) + y4Old * Math.cos(angle);
+
+ let oldx1 = x1;
+ let oldy1 = y1;
+
+ x1 += centerX; // +x2/2
+ y1 += centerY; // +x2/2
+ x2 += x1;
+ y2 += y1;
+ x3 += x1;
+ y3 += y1;
+ x4 += x1;
+ y4 += y1;
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x3, y3, x2, y2);
+
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x4, y4, x2, y2);
+ ctx.fillStyle = "black";
+ ctx.fill();
+
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x3, y3, x2, y2);
+
+ ctx.moveTo(x1, y1);
+ ctx.quadraticCurveTo(x4, y4, x2, y2);
+ ctx.strokeStyle = "orange";
+ ctx.stroke();
+}
+
+function DrawPolygon(sides, width, rotation, colour, line_width) {
+ ctx.beginPath();
+ ctx.moveTo(
+ centerX + width * Math.cos((rotation * Math.PI) / 180),
+ centerY + width * Math.sin((rotation * Math.PI) / 180)
+ );
+
+ for (var i = 1; i <= sides; i += 1) {
+ ctx.lineTo(
+ centerX +
+ width *
+ Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180),
+ centerY +
+ width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)
+ );
+ }
+ ctx.strokeStyle = colour;
+ ctx.lineWidth = line_width;
+ ctx.stroke();
+}
+
+function rad(degrees) {
+ return (degrees * Math.PI) / 180;
+}
+
+function colourToText(colour) {
+ return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")";
+}
+
+
+function waveNormal(x, max) {
+ let val = Math.sin((x / max) * Math.PI * 2 - max * (Math.PI / (max * 2))) / 2 + 0.5
+ return val
+}
+
+function LerpHex(a, b, amount) {
+ var ah = parseInt(a.replace(/#/g, ""), 16),
+ ar = ah >> 16,
+ ag = (ah >> 8) & 0xff,
+ ab = ah & 0xff,
+ bh = parseInt(b.replace(/#/g, ""), 16),
+ br = bh >> 16,
+ bg = (bh >> 8) & 0xff,
+ bb = bh & 0xff,
+ rr = ar + amount * (br - ar),
+ rg = ag + amount * (bg - ag),
+ rb = ab + amount * (bb - ab);
+
+ return (
+ "#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1)
+ );
+}
+
+function LerpRGB(a, b, t) {
+ if (t < 0) {
+ t *= -1;
+ }
+ var newColor = [0, 0, 0];
+ newColor[0] = a[0] + (b[0] - a[0]) * t;
+ newColor[1] = a[1] + (b[1] - a[1]) * t;
+ newColor[2] = a[2] + (b[2] - a[2]) * t;
+ return newColor;
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+
+function drawCenter(width) {
+ console.log("center?")
+ ctx.strokeStyle = "pink";
+ ctx.lineWidth = 1
+ ctx.beginPath();
+ ctx.moveTo(centerX - width, centerY);
+ ctx.lineTo(centerX + width, centerY);
+ ctx.closePath();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.moveTo(centerX, centerY - width);
+ ctx.lineTo(centerX, centerY + width);
+ ctx.closePath();
+ ctx.stroke();
+}
+
+function render_clear() {
+ // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+ // ctx.fillStyle = "black";
+ // ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
+ let xFromC = x - centerXX;
+ let yFromC = y - centerYY;
+ let d = (xFromC ** 2 + yFromC ** 2) ** 0.5
+ // let orgAngle = Math.atan2(yFromC/xFromC)
+ let orgAngle = Math.atan2(xFromC, yFromC)
+ let tmp = Math.cos(rad(orgAngle - rotation)) * d
+ // console.log(Math.cos((-90)*(Math.PI/180)))
+ console.log(orgAngle)
+ console.log(rad(rotation))
+ console.log(Math.cos(orgAngle - rad(rotation)) * d)
+ console.log(d)
+ // console.log(d)
+ let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
+ let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
+ return [newPointX, newPointY]
+}
+
+function rotatePoint(x,y,rotation){
+ let nCos = Math.cos(rad(rotation))
+ // console.log(nCos*(180/Math.PI))
+ // console.log(rad(rotation))
+ let nSin = Math.sin(rad(rotation))
+ let newX = x*nCos - y*nSin
+ let newY = y*nCos + x*nSin
+ return [newX,newY]
+}
\ No newline at end of file
diff --git a/webGl/circle fractal/js/index.js b/webGl/circle fractal/js/index.js
new file mode 100644
index 0000000..a3ce0f5
--- /dev/null
+++ b/webGl/circle fractal/js/index.js
@@ -0,0 +1,148 @@
+//jshint esversion:8
+let c = document.getElementById("canvas");
+const gl = canvas.getContext('webgl');
+// canvas.width = 800;
+// canvas.height = 800;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+gl.viewport(0, 0, canvas.width, canvas.height);
+// let ctx = c.getContext("2d");
+// ctx.canvas.width = window.innerWidth;
+// ctx.canvas.height = window.innerHeight;
+// centerX = ctx.canvas.width / 2;
+// centerY = ctx.canvas.height / 2;
+
+window.addEventListener('resize', function () {
+ console.log('addEventListener - resize');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ gl.viewport(0, 0, canvas.width, canvas.height);
+}, true);
+
+
+let deg_per_sec = 10;
+let targetFps = 60;
+let frameDuration = 1000 / targetFps;
+
+let rotation = 0; //was = j = angle
+let paused = true;
+render_clear();
+
+let drawObj = null;
+function createInstance(className, args) {
+ const classMap = {
+
+ EyePrototype: EyePrototype,
+ // Add more class constructors here as needed
+ };
+
+ if (classMap.hasOwnProperty(className)) {
+ return new classMap[className](...args);
+ } else {
+ throw new Error(`Unknown class name: ${className}`);
+ }
+}
+
+
+
+async function updateDrawObj() {
+ const shapeSelector = document.getElementById("shape-selector");
+ const selectedShape = shapeSelector.value;
+ const config = await fetchConfig(selectedShape);
+ if (drawObj) {
+ drawObj.remove(); // Remove the previous instance
+ }
+ // Extract default values from the configuration
+ const defaultValues = config
+ // .filter((item) => item.type !== "color") // Exclude color inputs
+ .map((item) => item.defaultValue);
+
+ drawObj = createInstance(selectedShape, defaultValues);
+
+ // drawObj = await createShapeWithRandomProperties(813311281, config1);
+ console.log(drawObj)
+ drawObj.initialise(config);
+}
+
+updateDrawObj();
+
+function render() {
+ setTimeout(() => {
+ requestAnimationFrame(() => {
+ render_clear();
+ if (drawObj) {
+ drawObj.draw(rotation);
+ }
+
+ if (!paused) {
+ rotation += deg_per_sec / targetFps;
+ }
+ // drawCenter(300)
+ });
+ render();
+ }, frameDuration);
+}
+
+document
+ .getElementById("shape-selector")
+ .addEventListener("change", updateDrawObj);
+
+let toolbarShowing = true;
+document.addEventListener("keydown", toggleSettings);
+
+function manualToggleSettings() {
+ console.log("hi")
+ toolbarShowing = !toolbarShowing;
+ let tb = document.getElementById("toolbar");
+ if (toolbarShowing) {
+ tb.style.display = "flex";
+ } else {
+ tb.style.display = "none";
+ }
+}
+
+function toggleSettings(e) {
+ if (e.key == "p") {
+ toolbarShowing = !toolbarShowing;
+ }
+ if (e.code === "Space") {
+ paused = !paused;
+ }
+
+ let tb = document.getElementById("toolbar");
+ if (toolbarShowing) {
+ tb.style.display = "flex";
+ } else {
+ tb.style.display = "none";
+ }
+}
+
+function TogglePause() {
+ let pb = document.getElementById("pauseButton");
+ paused = !paused;
+
+ if (paused) {
+ pb.textContent = "Play";
+ } else {
+ pb.textContent = "Pause";
+ }
+}
+function Reset() {
+ rotation = 0; //was = j = angle
+ currentFrame = 0;
+}
+
+function ForwardFrame() {
+ rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+ currentFrame += 1; // was = i
+}
+function BackwardFrame() {
+ rotation -= deg_per_sec / fps; // was = j = innerRotation, now = rotation
+ currentFrame -= 1; // was = i
+}
+
+function ChangeDegPerSec(newValue) {
+ deg_per_sec = newValue;
+}
+
+window.onload = render;
diff --git a/webGl/circle fractal/js/math.js b/webGl/circle fractal/js/math.js
new file mode 100644
index 0000000..f9eeea3
--- /dev/null
+++ b/webGl/circle fractal/js/math.js
@@ -0,0 +1,77 @@
+function rotateMatrix2d(p, angle) {
+ // cos0 sin0
+ // -sin0 cos0
+ const angleD = rad(angle);
+ const r = [
+ [Math.cos(angleD), Math.sin(angleD)],
+ [-Math.sin(angleD), Math.cos(angleD)],
+ ];
+ const newPoint = [
+ p[0] * r[0][0] + p[1] * r[0][1],
+ p[0] * r[1][0] + p[1] * r[1][1],
+ ];
+ return newPoint;
+}
+
+function rotateMatrix3dX(p, angle) {
+ // cos0 sin0
+ // -sin0 cos0
+ const angleD = rad(angle);
+ const r = [
+ [1, 0, 0],
+ [0, Math.cos(angleD), -Math.sin(angleD)],
+ [0, Math.sin(angleD), Math.cos(angleD)],
+ ];
+ const newPoint = [
+ p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2],
+ p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2],
+ p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2],
+ ];
+ return newPoint;
+}
+
+function rotateMatrix3dY(p, angle) {
+ // cos0 sin0
+ // -sin0 cos0
+ const angleD = rad(angle);
+ const r = [
+ [Math.cos(angleD), 0, Math.sin(angleD)],
+ [0, 1, 0],
+ [-Math.sin(angleD), 0, Math.cos(angleD)],
+ ];
+ const newPoint = [
+ p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2],
+ p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2],
+ p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2],
+ ];
+ return newPoint;
+}
+function rotateMatrix3dZ(p, angle) {
+ // cos0 sin0
+ // -sin0 cos0
+ const angleD = rad(angle);
+ const r = [
+ [Math.cos(angleD), -Math.sin(angleD), 0],
+ [Math.sin(angleD), Math.cos(angleD), 0],
+ [0, 0, 1],
+ ];
+ const newPoint = [
+ p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2],
+ p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2],
+ p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2],
+ ];
+ return newPoint;
+}
+
+function projectionOrth(v) {
+ const p = [
+ [1, 0, 0],
+ [0, 1, 0],
+ ];
+
+ const nPoint = [
+ p[0][0] * v[0] + p[0][1] * v[1] + p[0][2] * v[2],
+ p[1][0] * v[0] + p[1][1] * v[1] + p[1][2] * v[2],
+ ];
+ return nPoint;
+}
diff --git a/webGl/circle fractal/js/objects.js b/webGl/circle fractal/js/objects.js
new file mode 100644
index 0000000..d3ef718
--- /dev/null
+++ b/webGl/circle fractal/js/objects.js
@@ -0,0 +1,153 @@
+class BaseShape {
+ constructor() {
+ this.controls = []; // Keep track of created elements and event listeners
+ this.speedMultiplier = 100;
+ }
+
+ initialise(config) {
+ for (let item of config) {
+ const { element, listener } = addControl(item, this);
+ this.controls.push({ element, listener });
+ }
+
+ const { element, listener } = addControl({ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", }, this);
+ this.controls.push({ element, listener });
+ }
+
+ remove() {
+ this.controls.forEach(({ element, listener }) => {
+ if (element && listener) {
+ element.removeEventListener("input", listener);
+ }
+ if (element && element.parentElement) {
+ element.parentElement.removeChild(element);
+ const titleElement = document.getElementById("elText" + element.id.slice(2));
+ titleElement.parentElement.removeChild(titleElement);
+ }
+ });
+ this.controls = [];
+ }
+
+ draw() {
+ throw new Error("Draw function not implemented");
+ }
+}
+
+
+class EyePrototype extends BaseShape {
+ constructor(Val1) {
+ super();
+ this.Val1 = Val1;
+ this.iVal1Location = "";
+ this.iResolutionLocation = ""//gl.getUniformLocation(this.program, 'iResolution');
+ this.program = gl.createProgram();
+ }
+ initialise(config) {
+ for (let item of config) {
+ const { element, listener } = addControl(item, this);
+ this.controls.push({ element, listener });
+ }
+
+ const { element, listener } = addControl({ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", }, this);
+ this.controls.push({ element, listener });
+
+ const vertexShaderSource = `
+ attribute vec2 position;
+ void main() {
+ gl_Position = vec4(position, 0.0, 1.0);
+ }
+`;
+
+ // Create fragment shader using the code you wrote
+ const fragmentShaderSource = `
+ precision mediump float;
+ uniform vec2 iResolution;
+ uniform float iTime;
+ uniform float iVal1;
+
+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+ vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
+ vec2 uv0 = uv;
+ vec3 colour = vec3(1.0, 1.5, 2.0);
+ vec3 colour2 = vec3(0.2, 0.2, 1.0);
+ float pi = 3.1415926;
+ float pie = iVal1/10.0;
+
+
+ for (float i = 0.0; i < 2.0; i++) {
+ uv = fract(uv * pie) - 0.5;
+ float distance = length(uv);
+
+ distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
+ distance = abs(distance);
+ distance = 0.02 / distance;
+
+ colour = mix(colour, colour2, length(uv));
+
+ colour *= distance;
+ }
+
+ float distance = length(uv0);
+ distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
+ distance = abs(distance);
+ distance = 0.02 / distance;
+
+ colour = mix(colour, colour2, length(uv0));
+ colour *= distance;
+
+ fragColor = vec4(colour, 1.0);
+ }
+
+ void main() {
+ vec2 fragCoord = gl_FragCoord.xy;
+ vec2 iResolution = vec2(${canvas.width.toFixed(1)}, ${canvas.height.toFixed(1)});
+
+ float iTime = ${performance.now().toFixed(3)} / 1000.0;
+ vec4 fragColor;
+ mainImage(fragColor, fragCoord);
+ gl_FragColor = fragColor;
+ }
+`;
+
+ // Compile and link shaders
+ const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+ gl.shaderSource(vertexShader, vertexShaderSource);
+ gl.compileShader(vertexShader);
+
+ const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+ gl.shaderSource(fragmentShader, fragmentShaderSource);
+ gl.compileShader(fragmentShader);
+
+ // const this.program = gl.createProgram();
+ gl.attachShader(this.program, vertexShader);
+ gl.attachShader(this.program, fragmentShader);
+ gl.linkProgram(this.program);
+ gl.useProgram(this.program);
+
+ // Create vertex buffer
+ const positionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+ const positionAttributeLocation = gl.getAttribLocation(this.program, 'position');
+ gl.enableVertexAttribArray(positionAttributeLocation);
+ gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+
+ // Set uniforms
+ this.iResolutionLocation = gl.getUniformLocation(this.program, 'iResolution');
+ this.iVal1Location = gl.getUniformLocation(this.program, 'iVal1');
+
+ }
+
+ draw(rotation) {
+
+ gl.uniform2f(this.iResolutionLocation, canvas.width, canvas.height);
+ gl.uniform1f(gl.getUniformLocation(this.program, 'iTime'), performance.now() / 1000.0);
+ gl.uniform1f(this.iVal1Location, this.Val1);
+
+
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ // requestAnimationFrame(render);
+ }
+}
+
+