From bc01c0e0c98933514db1e3b84a3ae3cab151344d Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 29 Apr 2023 19:27:11 +1200 Subject: [PATCH] Eye prototype work --- docs/index.html | 2 +- docs/js/helper.js | 25 ++++- docs/js/index.js | 2 +- docs/js/objects.js | 98 ++++++++++------- webGl/New/index.html | 37 +++++++ webGl/New/index.js | 194 ++++++++++++++++++++++++++++++++++ webGl/sams_webgl/index.html | 37 +++++++ webGl/sams_webgl/index.js | 204 ++++++++++++++++++++++++++++++++++++ 8 files changed, 553 insertions(+), 46 deletions(-) create mode 100644 webGl/New/index.html create mode 100644 webGl/New/index.js create mode 100644 webGl/sams_webgl/index.html create mode 100644 webGl/sams_webgl/index.js diff --git a/docs/index.html b/docs/index.html index 5da07a5..dc36e57 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,6 +12,7 @@


diff --git a/docs/js/helper.js b/docs/js/helper.js index 5d76915..d86af13 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -67,7 +67,9 @@ async function fetchConfig(className) { ], EyePrototype: [ { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" }, - { type: "range", min: 1, max: 100, defaultValue: 10, property: "squares" }, + { type: "range", min: 1, max: 100, defaultValue: 10, property: "blink_speed" }, + { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_spiral" }, + { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_pupil" }, { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" }, { type: "color", defaultValue: "#2D81FC", property: "colour1" }, ], @@ -273,10 +275,22 @@ function LerpRGB(a, b, t) { return newColor; } -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 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() { @@ -284,3 +298,4 @@ function render_clear() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } + diff --git a/docs/js/index.js b/docs/js/index.js index 7ac08b6..230ebf3 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -73,8 +73,8 @@ function render() { if (!paused) { rotation += deg_per_sec / targetFps; } + // drawCenter(300) }); - render(); }, frameDuration); } diff --git a/docs/js/objects.js b/docs/js/objects.js index ae05084..de26316 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -9,7 +9,7 @@ class BaseShape { 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 }); } @@ -34,7 +34,7 @@ class BaseShape { } class PolyTwistColourWidth extends BaseShape { - constructor(sides, width,line_width, depth, rotation, speedMultiplier,colour1, colour2) { + constructor(sides, width, line_width, depth, rotation, speedMultiplier, colour1, colour2) { super(); this.sides = sides; this.width = width; @@ -47,7 +47,7 @@ class PolyTwistColourWidth extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) let out_angle = 0; const innerAngle = 180 - ((this.sides - 2) * 180) / this.sides; const scopeAngle = rotation - (innerAngle * Math.floor(rotation / innerAngle)); @@ -64,7 +64,7 @@ class PolyTwistColourWidth extends BaseShape { for (let i = 0; i < this.depth; i++) { const fraction = i / this.depth; const ncolour = LerpHex(this.colour1, this.colour2, fraction); - DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation, ncolour,this.line_width); + DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation, ncolour, this.line_width); } } } @@ -79,7 +79,7 @@ class FloralPhyllo extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) // var c = 24; //something to do with width. but not width var c = 1; //something to do with width. but not width //dont make larger than 270 unless altering the number of colours in lerpedColours @@ -103,7 +103,7 @@ class Spiral1 extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) var rot = Math.round((this.sides - 2) * 180 / this.sides * 2) var piv = 360 / this.sides; var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); @@ -140,7 +140,7 @@ class FloralAccident extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) var rot = Math.round((this.sides - 2) * 180 / this.sides * 2) var piv = 360 / this.sides; var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); @@ -177,7 +177,7 @@ class FloralPhyllo_Accident extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) var c = 24; //something to do with width. but not width for (let n = 0; n < 300; n += 1) { @@ -204,7 +204,7 @@ class Nodal_expanding extends BaseShape { } draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) let colour_change = this.colour_change / 8 var angle = 360 / this.points * rotation @@ -242,7 +242,7 @@ class Nodal extends BaseShape { } // Draw_nodal(300, 100, 31, rotation, "blue"); draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) // console.log(rotate) var angle = 360 / this.points * this.step ctx.beginPath(); @@ -279,7 +279,7 @@ class Phyllotaxis extends BaseShape { } // Draw_nodal(300, 100, 31, rotation, "blue"); draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) for (let n = 0; n < this.nMax; n += 1) { const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax); // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2); @@ -318,7 +318,7 @@ class SquareTwist_angle extends BaseShape { } // DrawSquareTwist_angle(400,0,rotation,"red") draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) let out_angle = rotation; let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90)))) + 0.5 @@ -349,63 +349,79 @@ class rectangle_pattern1 extends BaseShape { } // Draw_rectangle_pattern1(rotation, squares, 200, "blue"); draw(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) for (let z = 0; z < 360; z += 360 / this.squares) { this.drawSquare(z + rotation, this.width, this.colour1); } } } class EyePrototype extends BaseShape { - constructor(width, line_width, colour1) { + constructor(width, blink_speed, draw_spiral, draw_pupil, line_width, colour1) { super(); this.width = width; this.line_width = line_width; this.colour1 = colour1; this.step = 0; - this.speed = 8; + this.speed = blink_speed; this.opening = true; this.counter = 0; - this.points = [ - [50, 250], - [450, 250], - ]; this.cooldown = 0; + this.draw_spiral = draw_spiral; + this.draw_pupil = draw_pupil; } drawEyelid(rotation) { - rotation*=(this.speedMultiplier/100) + rotation *= (this.speedMultiplier / 100) ctx.lineWidth = 1; ctx.beginPath(); - ctx.moveTo(this.points[0][0], this.points[0][1]); - ctx.quadraticCurveTo(250, 250 - rotation, this.points[1][0], this.points[0][1]); + ctx.moveTo(centerX - this.width / 2, centerY); + ctx.quadraticCurveTo(centerX, centerY - rotation / 400 * this.width, centerX + this.width / 2, centerY); - ctx.moveTo(this.points[0][0], this.points[0][1]); - ctx.quadraticCurveTo(250, 250 + rotation, this.points[1][0], this.points[0][1]); + ctx.moveTo(centerX - this.width / 2, centerY); + ctx.quadraticCurveTo(centerX, centerY + rotation / 400 * this.width, centerX + this.width / 2, centerY); ctx.stroke(); } eyelidCut(step) { // ctx.lineWidth = 1; let squarePath = new Path2D(); - squarePath.moveTo(this.points[0][0], this.points[0][1]); - squarePath.quadraticCurveTo(250, 250 - step, this.points[1][0], this.points[0][1]); + squarePath.moveTo(centerX - this.width / 2, centerY); + squarePath.quadraticCurveTo(centerX, centerY - step / 400 * this.width, centerX + this.width / 2, centerY); - squarePath.moveTo(this.points[0][0], this.points[0][1]); - squarePath.quadraticCurveTo(250, 250 + step, this.points[1][0], this.points[0][1]); + squarePath.moveTo(centerX - this.width / 2, centerY); + squarePath.quadraticCurveTo(centerX, centerY + step / 400 * this.width, centerX + this.width / 2, centerY); ctx.clip(squarePath); } drawGrowEye(step) { - console.log(step) + // console.log(step) ctx.strokeStyle = "aqua"; ctx.beginPath(); ctx.lineWidth = 5; - ctx.arc(250, 250, step, 0, 2 * Math.PI); + ctx.arc(centerX, centerY, step, 0, 2 * Math.PI); ctx.stroke(); - ctx.strokeStyle = "orange"; + ctx.strokeStyle = "red"; + // ctx.strokeStyle = "orange"; } drawCircle(step) { ctx.beginPath(); ctx.lineWidth = 5; - ctx.arc(250, 250, step, 0, 2 * Math.PI); + ctx.arc(centerX, centerY, step, 0, 2 * Math.PI); + ctx.stroke(); + } + + drawSpiral(step) { + let a = 1 + let b = 5 + ctx.moveTo(centerX, centerY); + ctx.beginPath(); + for (let i = 0; i < 400; i++) { + let angle = 0.1 * i; + let x = centerX + (a + b * angle) * Math.cos(angle + step / 2); + let y = centerY + (a + b * angle) * Math.sin(angle + step / 2); + + ctx.lineTo(x, y); + } + ctx.lineWidth = 3; + ctx.strokeStyle = "red"; ctx.stroke(); } stepFunc() { @@ -432,7 +448,7 @@ class EyePrototype extends BaseShape { } draw(rotation) { - console.log(this.counter) + // console.log(this.counter) ctx.strokeStyle = "orange"; ctx.fillStyle = "black"; // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); @@ -441,22 +457,26 @@ class EyePrototype extends BaseShape { // let newPath = new Path2D(); // newPath.arc(150, 75, 75, 0, 2 * Math.PI); - ctx.beginPath(); - ctx.rect(100, 100, 300, 300); - ctx.stroke(); + // ctx.beginPath(); + // ctx.rect(centerX-300/2, centerY-300/2, 300, 300); + // ctx.stroke(); this.drawEyelid(this.step); ctx.save(); // squareCut(); this.eyelidCut(this.step); - if (this.counter % 100 == 0) { this.counter = 0; } - this.drawGrowEye(100 + this.counter); + // this.drawGrowEye(this.width/4 + this.counter); - this.drawCircle(100); + if(this.draw_spiral){ + this.drawSpiral(rotation) + } + if(this.draw_pupil){ + this.drawCircle(this.width/4); + } ctx.restore(); diff --git a/webGl/New/index.html b/webGl/New/index.html new file mode 100644 index 0000000..4bda97f --- /dev/null +++ b/webGl/New/index.html @@ -0,0 +1,37 @@ + + + + + + WebGL Template + + + + + + + + + + \ No newline at end of file diff --git a/webGl/New/index.js b/webGl/New/index.js new file mode 100644 index 0000000..08e5f46 --- /dev/null +++ b/webGl/New/index.js @@ -0,0 +1,194 @@ +// Get the canvas element and create a WebGL context +const canvas = document.getElementById('canvas'); +const canvas2d = document.getElementById('canvas2d'); +const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); +let ctx = canvas2d.getContext("2d"); +ctx.canvas.width = 800; +ctx.canvas.height = 800; + +// Check if WebGL is available +if (!gl) { + alert('WebGL not supported in your browser.'); +} else { + // Set the canvas size and WebGL viewport + canvas.width = 800; + canvas.height = 800; + let centerX = ctx.canvas.width / 2; + let centerY = ctx.canvas.height / 2; + gl.viewport(0, 0, canvas.width, canvas.height); + + // Define the vertex shader source code + const glsl = x => x; + const vertexShaderSource = glsl` + attribute vec2 position; + uniform float u_rotation; + uniform vec2 u_pos; + void main() { + float centerX = 0.0; + float centerY = 0.0; + float xPos = position.x; + float yPos = position.y; + float x = xPos * cos(u_rotation) - yPos * sin(u_rotation); + float y = yPos * cos(u_rotation) + xPos * sin(u_rotation); + gl_Position = vec4(x+u_pos.x , y+u_pos.y , 0, 1); + } + `; + + // Define the fragment shader source code + const fragmentShaderSource = ` + precision mediump float; + uniform vec4 fColor; + void main() { + gl_FragColor = fColor; + } + `; + + // Create and compile the vertex and fragment shaders + const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); + const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); + + // Create a program, attach the shaders, and link the program + const program = createProgram(gl, vertexShader, fragmentShader); + + // Get the attribute and uniform locations + const positionAttributeLocation = gl.getAttribLocation(program, 'position'); + const positionLocalAttributeLocation = gl.getUniformLocation(program, 'u_pos'); + const rotationUniformLocation = gl.getUniformLocation(program, 'u_rotation'); + const fColorLocation = gl.getUniformLocation(program, "fColor"); + + // Create a buffer to store vertex positions + const positionBuffer = gl.createBuffer(); + + function polyPoints(sides) { + let pointsArr = []; + let width = 1; + let rotation = 0 + pointsArr.push(width * Math.cos((rotation * Math.PI) / 180)); + pointsArr.push(width * Math.sin((rotation * Math.PI) / 180)) + for (let i = 0; i < sides; i++) { + pointsArr.push(width * Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)) + pointsArr.push(width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)) + } + return pointsArr + } + + + function rad(degrees) { + var pi = Math.PI; + return degrees * (pi / 180); + } + + // Function to create and compile a shader + function createShader(gl, type, source) { + const shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + return shader; + } + console.error(gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + } + + // Function to create a program and link shaders + function createProgram(gl, vertexShader, fragmentShader) { + const program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (gl.getProgramParameter(program, gl.LINK_STATUS)) { + return program; + } + console.error(gl.getProgramInfoLog(program)); + gl.deleteProgram(program); + } + // Function to draw the scene + let prevTime = 0 + function drawScene(time) { + // Convert time to seconds + // console.log(time - prevTime) + prevTime = time + time *= 0.001; + + // Clear the canvas with a black background + gl.clearColor(0, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + + // Use the shader program + gl.useProgram(program); + + // Enable the position attribute + gl.enableVertexAttribArray(positionAttributeLocation); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); + // Create a buffer to store vertex positions + let blue = [0.17, 0.49, 0.85] //blue + let green = [0.17, 0.85, 0.46] //green + let pink = [0.96, 0.24, 0.86] //green + + render_clear(); + for (let i = 0; i < 10000; i++) { + DrawPolygon(4, 400, (0+time)*i*0.1, "Crimson") + // drawPoly(4, time * i * 0.001, blue, 0, 0) + } + + Draw_center() + drawCircle() + // console.log(time) + // Request the next frame to be drawn + requestAnimationFrame(drawScene); + } + + const positions1 = polyPoints(4) + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions1), gl.STATIC_DRAW); + function drawPoly(sides, speed, colour, x, y) { + gl.uniform1f(rotationUniformLocation, speed); + gl.uniform4f(fColorLocation, colour[0], colour[1], colour[2], 1); + gl.uniform2f(positionLocalAttributeLocation, x, y); + + gl.drawArrays(gl.LINE_LOOP, 0, positions1.length / 2); + } + + // Start rendering the scene + requestAnimationFrame(drawScene); + function Draw_center() { + ctx.beginPath(); + ctx.moveTo(centerX - 400, centerY); + ctx.lineTo(centerX + 400, centerY); + ctx.moveTo(centerX, centerY - 400); + ctx.lineTo(centerX, centerY + 400); + ctx.strokeStyle = "green"; + ctx.stroke(); + // console.log("drawn center") + } + function drawCircle() { + ctx.beginPath(); + ctx.arc(centerX, centerY, 400, 0, 2 * Math.PI, false); + ctx.strokeStyle = "green"; + ctx.stroke(); + } + function DrawPolygon(sides, width, rotation, colour) { + 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 = 1; + ctx.stroke(); + } + function render_clear() { + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.fillStyle = "rgb(0,0,0,0)"; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); + } +} \ No newline at end of file diff --git a/webGl/sams_webgl/index.html b/webGl/sams_webgl/index.html new file mode 100644 index 0000000..4bda97f --- /dev/null +++ b/webGl/sams_webgl/index.html @@ -0,0 +1,37 @@ + + + + + + WebGL Template + + + + + + + + + + \ No newline at end of file diff --git a/webGl/sams_webgl/index.js b/webGl/sams_webgl/index.js new file mode 100644 index 0000000..0a58bfc --- /dev/null +++ b/webGl/sams_webgl/index.js @@ -0,0 +1,204 @@ +// Get the canvas element and create a WebGL context +const canvas = document.getElementById('canvas'); +const canvas2d = document.getElementById('canvas2d'); +const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); +let ctx = canvas2d.getContext("2d"); +ctx.canvas.width = 800; +ctx.canvas.height = 800; + +// Check if WebGL is available +if (!gl) { + alert('WebGL not supported in your browser.'); +} else { + // Set the canvas size and WebGL viewport + canvas.width = 800; + canvas.height = 800; + let centerX = ctx.canvas.width / 2; + let centerY = ctx.canvas.height / 2; + gl.viewport(0, 0, canvas.width, canvas.height); + + // Define the vertex shader source code + const vertexShaderSource = ` +vec3 hsv2rgb(vec3 c) +{ + vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); + vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); + return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); +} + + attribute vec2 position; + uniform float u_rotation; + uniform vec2 u_pos; + + varying vec4 vColor; + + void main() { + vColor = vec4(hsv2rgb(vec3(u_rotation, 0.5+pow(position.y+0.4, 10.0), 1.0)), 1.0); + + float centerX = 0.0; + float centerY = 0.0; + float xPos = position.x; + float yPos = position.y; + + float rot_cos = cos(u_rotation); + float rot_sin = sin(u_rotation); + + float x = xPos * rot_cos - yPos * rot_sin; + float y = yPos * rot_cos + xPos * rot_sin; + gl_Position = vec4(x+u_pos.x , y+u_pos.y , 0, 1); + } + `; + + + // Define the fragment shader source code + const fragmentShaderSource = ` + precision mediump float; + varying vec4 vColor; + uniform vec4 fColor; + void main() { + gl_FragColor = vColor; + } + `; + + // Create and compile the vertex and fragment shaders + const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); + const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); + + // Create a program, attach the shaders, and link the program + const program = createProgram(gl, vertexShader, fragmentShader); + + // Get the attribute and uniform locations + const positionAttributeLocation = gl.getAttribLocation(program, 'position'); + // const positionAttributeLocation1 = gl.getAttribLocation(program, 'u_pos'); + const rotationUniformLocation = gl.getUniformLocation(program, 'u_rotation'); + const fColorLocation = gl.getUniformLocation(program, "fColor"); + + // Create a buffer to store vertex positions + const positionBuffer = gl.createBuffer(); + + // Bind the buffer and send the vertex positions to the GPU + + + function polyPoints(sides) { + let pointsArr = []; + let width = 1; + let rotation = 0 + pointsArr.push(width * Math.cos((rotation * Math.PI) / 180)); + pointsArr.push(width * Math.sin((rotation * Math.PI) / 180)) + for (let i = 0; i < sides; i++) { + pointsArr.push(width * Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)) + pointsArr.push(width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)) + } + return pointsArr + } + + + function rad(degrees) { + var pi = Math.PI; + return degrees * (pi / 180); + } + + // Function to create and compile a shader + function createShader(gl, type, source) { + const shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + return shader; + } + console.error(gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + } + + // Function to create a program and link shaders + function createProgram(gl, vertexShader, fragmentShader) { + const program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (gl.getProgramParameter(program, gl.LINK_STATUS)) { + return program; + } + console.error(gl.getProgramInfoLog(program)); + gl.deleteProgram(program); + } + // Function to draw the scene + let prevTime = 0 + function drawScene(time) { + // Convert time to seconds + // console.log(time - prevTime) + prevTime = time + time *= 0.001; + + // Clear the canvas with a black background + gl.clearColor(0, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + + // Use the shader program + gl.useProgram(program); + + // Enable the position attribute + + // Create a buffer to store vertex positions + let blue = [0.17, 0.49, 0.85] //blue + let green = [0.17, 0.85, 0.46] //green + let pink = [0.96, 0.24, 0.86] //green + + // drawPoly(3, time * 1, blue, 0, 0) + // drawPoly(3, time * 0.8, pink, 0.35, 0.35) + // drawPoly(5,time*0.6) + // drawPoly(6,time*0.4) + // drawPoly(7,time*0.2) + // + + // prepare the gl state for the draw (can be here as drawPoly gets called multiple times with the same state) + // This could be improved by using a VAO to get the gpu to run over the for loop for you + gl.enableVertexAttribArray(positionAttributeLocation); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); + + + for (let i = 0; i < 100; i++) { + + drawPoly(4, time * i * 0.001, blue, 0, 0) + } + + + Draw_center() + drawCircle() + // console.log(time) + // Request the next frame to be drawn + requestAnimationFrame(drawScene); + } + + function drawPoly(sides, speed, colour, x, y) { + gl.uniform1f(rotationUniformLocation, speed); + gl.uniform4f(fColorLocation, colour[0], colour[1], colour[2], 1); + gl.uniform2f(gl.getUniformLocation(program, 'u_pos'), x, y); + const positions = polyPoints(sides) + // const positionBuffer1 = gl.createBuffer(); + + // Assume the buffers are already bound + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW); + gl.drawArrays(gl.LINE_LOOP, 0, positions.length / 2); + } + + // Start rendering the scene + requestAnimationFrame(drawScene); + function Draw_center() { + ctx.beginPath(); + ctx.moveTo(centerX - 400, centerY); + ctx.lineTo(centerX + 400, centerY); + ctx.moveTo(centerX, centerY - 400); + ctx.lineTo(centerX, centerY + 400); + ctx.strokeStyle = "green"; + ctx.stroke(); + // console.log("drawn center") + } + function drawCircle() { + ctx.beginPath(); + ctx.arc(centerX, centerY, 400, 0, 2 * Math.PI, false); + ctx.strokeStyle = "green"; + ctx.stroke(); + } +}