Last active
January 15, 2021 14:36
-
-
Save nasser/3b5f9316c8cbfeedf4d8c49d0760b442 to your computer and use it in GitHub Desktop.
lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> | |
| <canvas></canvas> | |
| <script> | |
| const vertexShader = `#version 300 es | |
| uniform vec2 screen; | |
| in vec2 position; | |
| in vec3 color; | |
| out vec3 pcolor; | |
| void main() { | |
| gl_Position = vec4(position / screen, 0, 1); | |
| pcolor = color; | |
| } | |
| ` | |
| const fragmentShader = `#version 300 es | |
| precision mediump float; | |
| in vec3 pcolor; | |
| out vec4 color; | |
| void main() { | |
| color = vec4(pcolor, 1); | |
| } | |
| ` | |
| const scale = 4 | |
| const canvas = document.querySelector('canvas') | |
| let gl = canvas.getContext('webgl2', { antialias:false }); | |
| // shader setup | |
| let program = createProgram(vertexShader, fragmentShader); | |
| gl.useProgram(program); | |
| var positionBuffer = gl.createBuffer(); | |
| var positionData = new Float32Array(80000) | |
| gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW); | |
| var positionAttribute = gl.getAttribLocation(program, "position"); | |
| gl.enableVertexAttribArray(positionAttribute); | |
| gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0); | |
| var colorBuffer = gl.createBuffer(); | |
| var colorData = new Float32Array(80000) | |
| gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW); | |
| var colorAttribute = gl.getAttribLocation(program, "color"); | |
| gl.enableVertexAttribArray(colorAttribute); | |
| gl.vertexAttribPointer(colorAttribute, 3, gl.FLOAT, false, 0, 0); | |
| function api() { | |
| let index = 0 | |
| function clear(r, g, b) { | |
| gl.clearColor(r, g, b, 1); | |
| } | |
| function line(x1, y1, x2, y2, r1=1, g1=1, b1=1, r2=r1, g2=g1, b2=b1) { | |
| positionData[index*2+0] = x1 | |
| positionData[index*2+1] = y1 | |
| positionData[index*2+2] = x2 | |
| positionData[index*2+3] = y2 | |
| colorData[index*3+0] = r1 | |
| colorData[index*3+1] = g1 | |
| colorData[index*3+2] = b1 | |
| colorData[index*3+3] = r2 | |
| colorData[index*3+4] = g2 | |
| colorData[index*3+5] = b2 | |
| index += 2 | |
| } | |
| function draw() { | |
| gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW, 0, index * positionData.BYTES_PER_ELEMENT); | |
| gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW, 0, index * colorData.BYTES_PER_ELEMENT); | |
| gl.clear(gl.COLOR_BUFFER_BIT); | |
| gl.drawArrays(gl.LINES, 0, index); | |
| } | |
| function reset() { | |
| index = 0 | |
| } | |
| return { clear, draw, reset, line } | |
| } | |
| const liney = api() | |
| liney.clear(0.1, 0.2, 0.3) | |
| window.onresize = function () { | |
| const w = window.innerWidth / scale | |
| const h = window.innerHeight / scale | |
| canvas.width = w | |
| canvas.height = h | |
| canvas.style.imageRendering = "crisp-edges" | |
| canvas.style.imageRendering = "pixelated" | |
| canvas.style.width = window.innerWidth + 'px'; | |
| canvas.style.height = window.innerHeight + 'px'; | |
| gl.uniform2f(gl.getUniformLocation(program, "screen"), canvas.width, canvas.height); | |
| gl.viewport(0, 0, w, h); | |
| } | |
| window.onresize() | |
| let t = 0 | |
| function render() { | |
| t += 0.005 | |
| requestAnimationFrame(render) | |
| liney.reset() | |
| let x = 0 | |
| let y = 0 | |
| let r = 2 | |
| for (let i = 0; i < 500; i+=0.1) { | |
| let xx = Math.cos(i + t) * r | |
| let yy = Math.sin(i + t) * r | |
| liney.line(x, y, xx, yy, i * 2 % 1, i % 1, 1) | |
| x = xx | |
| y = yy | |
| r += 0.1 | |
| } | |
| liney.draw() | |
| } | |
| render() | |
| function createShader(source, type) { | |
| let shader = gl.createShader(type); | |
| gl.shaderSource(shader, source); | |
| gl.compileShader(shader); | |
| if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) | |
| throw new Error(gl.getShaderInfoLog(shader)); | |
| return shader; | |
| } | |
| function createProgram(vertex, fragment) { | |
| let program = gl.createProgram(); | |
| gl.attachShader(program, createShader(vertex, gl.VERTEX_SHADER)); | |
| gl.attachShader(program, createShader(fragment, gl.FRAGMENT_SHADER)); | |
| gl.linkProgram(program); | |
| return program; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment