georgemsavva · April 3, 2021 10:59
diff --git a/shadertest.html b/shadertest.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>GLSL Experiment</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta property="og:image" content="thumbnail.jpg" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        touch-action: none;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <canvas id="output"></canvas>
  </body>
  <!-- By George Savva @georgemsavva built on the hicetnucn html shader template. This work is licensed under a Creative Commons Attribution 4.0 International License  https://creativecommons.org/licenses/by/4.0/-->
  <script>
    const canvas = document.querySelector('#output')
    const gl = canvas.getContext('webgl')

    function resize() {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

    resize()

    window.addEventListener('resize', resize)

    const mouse = { x: 0, y: 0 }

    document.body.addEventListener('pointermove', function (e) {
      mouse.x = e.pageX
      mouse.y = e.pageY
    })

    const vertexShaderSource = `attribute vec2 aVertexPosition;

 void main() {
    gl_Position = vec4(aVertexPosition.x/1.0,aVertexPosition.y/1.0, 0.0, 1.0);
 }`

    var fragmentShaderSource = `#ifdef GL_ES
 precision highp float;
 #endif
       
 uniform vec4 uColor;
 uniform float uTime;
 uniform vec2 uPosition;
 uniform vec2 u_resolution;

 #define PI 3.14159





 void main() {

    vec4 o=vec4(0.0,0.1,.1,1);
    vec2 u_mouse = uPosition;
    vec2  R = u_resolution.xy;  
    vec2 u =gl_FragCoord.xy - R*.5;
    float xa=floor(u_mouse.x/50.0);
    float ya=1.0+floor(10.0*u_mouse.y/R.y);
    for(float i=0.0;i<1.0;i+=.05){
    	o += 1.0*vec4(.001,(i)*0.001,i*.01,.001)/ 
    	abs(i/4.0 - length(u)/R.y  + 
    	i/6.0* cos(  (1.0-i)*(xa+3.0)*2.0*uTime+atan(u.y,u.x)* xa)* 
    	sin(  atan(u.y,u.x)*ya) ); 
    }
    gl_FragColor=o;
       
 }`

    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)

    const vertices = new Float32Array([
      -1,
      1,
      1,
      1,
      1,
      -1,
      -1,
      1,
      1,
      -1,
      -1,
      -1,
    ])

    const vertexBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    const itemSize = 2
    const numItems = vertices.length / itemSize

    program.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition')
    gl.enableVertexAttribArray(program.aVertexPosition)
    gl.vertexAttribPointer(
      program.aVertexPosition,
      itemSize,
      gl.FLOAT,
      false,
      0,
      0
    )

    gl.useProgram(program)

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

    program.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition')
    gl.enableVertexAttribArray(program.aVertexPosition)
    gl.vertexAttribPointer(
      program.aVertexPosition,
      itemSize,
      gl.FLOAT,
      false,
      0,
      0
    )

    function render() {
      gl.viewport(0, 0, canvas.width, canvas.height)
      gl.clearColor(0, 0, 0, 1)
      gl.clear(gl.COLOR_BUFFER_BIT)

      program.u_resolution = gl.getUniformLocation(program, 'u_resolution')
      gl.uniform2fv(program.u_resolution, [canvas.width, canvas.height])

      program.uColor = gl.getUniformLocation(program, 'uColor')
      gl.uniform4fv(program.uColor, [0.0, 0.0, 0.0, 1.0])

      program.uPosition = gl.getUniformLocation(program, 'uPosition')
      gl.uniform2fv(program.uPosition, [mouse.x, mouse.y])

      program.uTime = gl.getUniformLocation(program, 'uTime')
      gl.uniform1f(program.uTime, 0.001 * performance.now())

      gl.drawArrays(gl.TRIANGLES, 0, numItems)

      requestAnimationFrame(render)
    }

    render()
  </script>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>GLSL Experiment</title>
	<meta
	name="viewport"
	content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
	/>
	<meta property="og:image" content="thumbnail.jpg" />
	<style>
	* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}
	body {
	touch-action: none;
	overflow: hidden;
	}
	</style>
	</head>

	<body>
	<canvas id="output"></canvas>
	</body>
	<!-- By George Savva @georgemsavva built on the hicetnucn html shader template. This work is licensed under a Creative Commons Attribution 4.0 International License https://creativecommons.org/licenses/by/4.0/-->
	<script>
	const canvas = document.querySelector('#output')
	const gl = canvas.getContext('webgl')

	function resize() {
	canvas.width = window.innerWidth
	canvas.height = window.innerHeight
	}

	resize()

	window.addEventListener('resize', resize)

	const mouse = { x: 0, y: 0 }

	document.body.addEventListener('pointermove', function (e) {
	mouse.x = e.pageX
	mouse.y = e.pageY
	})

	const vertexShaderSource = `attribute vec2 aVertexPosition;

	void main() {
	gl_Position = vec4(aVertexPosition.x/1.0,aVertexPosition.y/1.0, 0.0, 1.0);
	}`

	var fragmentShaderSource = `#ifdef GL_ES
	precision highp float;
	#endif

	uniform vec4 uColor;
	uniform float uTime;
	uniform vec2 uPosition;
	uniform vec2 u_resolution;

	#define PI 3.14159





	void main() {

	vec4 o=vec4(0.0,0.1,.1,1);
	vec2 u_mouse = uPosition;
	vec2 R = u_resolution.xy;
	vec2 u =gl_FragCoord.xy - R*.5;
	float xa=floor(u_mouse.x/50.0);
	float ya=1.0+floor(10.0*u_mouse.y/R.y);
	for(float i=0.0;i<1.0;i+=.05){
	o += 1.0vec4(.001,(i)0.001,i*.01,.001)/
	abs(i/4.0 - length(u)/R.y +
	i/6.0* cos( (1.0-i)(xa+3.0)2.0uTime+atan(u.y,u.x) xa)*
	sin( atan(u.y,u.x)*ya) );
	}
	gl_FragColor=o;

	}`

	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)

	const vertices = new Float32Array([
	-1,
	1,
	1,
	1,
	1,
	-1,
	-1,
	1,
	1,
	-1,
	-1,
	-1,
	])

	const vertexBuffer = gl.createBuffer()
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

	const itemSize = 2
	const numItems = vertices.length / itemSize

	program.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition')
	gl.enableVertexAttribArray(program.aVertexPosition)
	gl.vertexAttribPointer(
	program.aVertexPosition,
	itemSize,
	gl.FLOAT,
	false,
	0,
	0
	)

	gl.useProgram(program)

	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

	program.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition')
	gl.enableVertexAttribArray(program.aVertexPosition)
	gl.vertexAttribPointer(
	program.aVertexPosition,
	itemSize,
	gl.FLOAT,
	false,
	0,
	0
	)

	function render() {
	gl.viewport(0, 0, canvas.width, canvas.height)
	gl.clearColor(0, 0, 0, 1)
	gl.clear(gl.COLOR_BUFFER_BIT)

	program.u_resolution = gl.getUniformLocation(program, 'u_resolution')
	gl.uniform2fv(program.u_resolution, [canvas.width, canvas.height])

	program.uColor = gl.getUniformLocation(program, 'uColor')
	gl.uniform4fv(program.uColor, [0.0, 0.0, 0.0, 1.0])

	program.uPosition = gl.getUniformLocation(program, 'uPosition')
	gl.uniform2fv(program.uPosition, [mouse.x, mouse.y])

	program.uTime = gl.getUniformLocation(program, 'uTime')
	gl.uniform1f(program.uTime, 0.001 * performance.now())

	gl.drawArrays(gl.TRIANGLES, 0, numItems)

	requestAnimationFrame(render)
	}

	render()
	</script>
	</html>