Futuristic grid2

Developer
Alex Permyakov
Size
2,823 Kb
Views
32,384
  1. Futuristic grid2 Previews
  2. Futuristic grid2 HTML Codes
  3. Futuristic grid2 CSS Codes
  4. Futuristic grid2 JS Codes

How do I make an futuristic grid2?

Just playing around fragment shader. It's easy to achieve different effects by changing coefficients in hash function.. What is a futuristic grid2? How do you make a futuristic grid2? This script and codes were developed by Alex Permyakov on 27 August 2022, Saturday.

Futuristic grid2 Previews
IQ Test

Futuristic grid2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Futuristic grid2</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script id="sf" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
float hash (float v) { return smoothstep(0.1, 0.9, abs(sin(v))) * 20.0;
}
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main(void) { vec2 q = gl_FragCoord.xy / resolution.xy; vec2 p = -1.0 + 2.0 * q; p.x *= resolution.x / resolution.y; vec3 col = vec3(0.2, 0.3, 0.4); vec3 c = vec3(0.0); c += col / (abs(tan(hash(p.x) + cos(time + p.y) + mouse.y * 10.0))); c += col / (abs(tan(hash(p.y) + cos(time + p.x) + mouse.x * 10.0))); c /= 5.0; gl_FragColor = vec4(c, 1.0);
}
</script>
<script id="sv" type="x-shader/x-vertex"> attribute vec4 vPosition; void main (void) { gl_Position = vPosition; }
</script>
<canvas></canvas> <script src="js/index.js"></script>
</body>
</html>

Futuristic grid2 - Script Codes CSS Codes

* { margin: 0; padding: 0;
}

Futuristic grid2 - Script Codes JS Codes

var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ut, st = Date.now(), um, mouseX = 0, mouseY = 0; function initShaders (gl, vertexShaderId, fragmentShaderId) { var vertexEl = document.querySelector(vertexShaderId); var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexEl.text); gl.compileShader(vertexShader); var fragmentEl = document.querySelector(fragmentShaderId); var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentEl.text); gl.compileShader(fragmentShader); var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); return program; } function initGraphics () { gl = canvas.getContext('webgl'); var width = canvas.width; var height = canvas.height; gl.viewport(0, 0, width, height); canvas.addEventListener('mousemove', function (e) { mouseX = e.pageX / canvas.width; mouseY = e.pageY / canvas.height; }, false); var program = initShaders(gl, '#sv', '#sf'); var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), gl.STATIC_DRAW ); var vPosition = gl.getAttribLocation(program, 'vPosition'); gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); ut = gl.getUniformLocation(program, 'time'); um = gl.getUniformLocation(program, 'mouse'); var resolution = new Float32Array([canvas.width, canvas.height]); gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution); } function render () { gl.uniform1f(ut, (Date.now() - st) / 1000); gl.uniform2fv(um, new Float32Array([mouseX, mouseY])); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); requestAnimationFrame(render); } initGraphics(); render();
Futuristic grid2 - Script Codes
Futuristic grid2 - Script Codes
Home Page Home
Developer Alex Permyakov
Username alexdevp
Uploaded August 27, 2022
Rating 4.5
Size 2,823 Kb
Views 32,384
Do you need developer help for Futuristic grid2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Permyakov (alexdevp) Script Codes
Name
Apple WWDC 2015 logo
3D Particle Heart
SVG Fluid Menu
Motion of a molecule
SVG UI Navigation Concept
Audio Player
Plazma circle
WebGL Unicolorous Loader
Smooth curves
Google Particle Logo
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!