Smooth curves
How do I make an smooth curves?
What is a smooth curves? How do you make a smooth curves? This script and codes were developed by Alex Permyakov on 27 August 2022, Saturday.
Smooth curves - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth curves</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> <canvas></canvas>
<script id="sv" type="x-shader/x-vertex"> attribute vec4 vPosition; void main (void) { gl_Position = vPosition; } </script>
<script id="sf" type="x-shader/x-fragment"> precision mediump float; uniform float time; 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; float v = p.x + cos(time + p.y); vec3 col = vec3(0.1 * max(0.0, p.y), 0.1 * max(0.0, p.x), 0.2 * max(0.0, p.x)) / abs(v * 2.0); gl_FragColor = vec4(col, 1.0); }
</script> <script src="js/index.js"></script>
</body>
</html>
Smooth curves - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
Smooth curves - Script Codes JS Codes
var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ut, st = Date.now(); 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); if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS) ) { debugger } var fragmentEl = document.querySelector(fragmentShaderId); var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentEl.text); gl.compileShader(fragmentShader); if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { debugger } 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); 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'); 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.drawArrays(gl.TRIANGLE_FAN, 0, 4); requestAnimationFrame(render); } initGraphics(); render();
Developer | Alex Permyakov |
Username | alexdevp |
Uploaded | August 27, 2022 |
Rating | 4.5 |
Size | 2,606 Kb |
Views | 34,408 |
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!
Name | Size |
Apple WWDC 2015 logo | 2,293 Kb |
Plazma circle | 2,470 Kb |
SVG Fluid Menu | 2,777 Kb |
WebGL Unicolorous Loader | 2,816 Kb |
Motion of a molecule | 2,776 Kb |
Google Particle Logo | 17,309 Kb |
Stylization HTML5 Progress element | 3,665 Kb |
3D Particle Heart | 2,860 Kb |
Futuristic grid2 | 2,823 Kb |
Audio Player | 17,720 Kb |
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!
Name | Username | Size |
Sticky div | Kaslab | 2,225 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!