WebGL Colors
How do I make an webgl colors?
What is a webgl colors? How do you make a webgl colors? This script and codes were developed by Scott R McGann on 11 November 2022, Friday.
WebGL Colors - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Colors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id=canvas>
<script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 pos; uniform vec3 col; void main() { gl_Position = vec4(pos, 1.0); }
</script>
<script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; uniform float time; uniform vec2 mouse; void main( ) { vec2 pos = gl_FragCoord.xy; float dx = (pos.x-mouse.x)/100.0; float dy = (pos.y-mouse.y)/100.0; float d = (dx*dx+dy*dy)/10.0; float p = atan(pos.y-mouse.y,pos.x-mouse.x)*3.0+sin(d-time/25.0)*4.0; float r = 0.5+sin(d+p)/2.0; float g = 0.5+cos(d+p)/2.0; float b = 0.5-sin(d+p)/2.0; gl_FragColor = vec4( r, g, b, 1.0 ); }
</script> <script src="js/index.js"></script>
</body>
</html>
WebGL Colors - Script Codes CSS Codes
html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#111855;
}
#canvas{ position:absolute; width:100%; height:100%;
}
WebGL Colors - Script Codes JS Codes
function shaderProgram(gl, vs, fs) { var prog = gl.createProgram(); var s = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(s, vs); gl.compileShader(s); gl.attachShader(prog, s); s = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(s, fs); gl.compileShader(s); gl.attachShader(prog, s); gl.linkProgram(prog); return prog;
}
function attributeSetFloats(gl, prog, attr_name, rsize, arr) { gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arr), gl.STATIC_DRAW); var attr = gl.getAttribLocation(prog, attr_name); gl.enableVertexAttribArray(attr); gl.vertexAttribPointer(attr, rsize, gl.FLOAT, false, 0, 0);
}
function getShader(id){ return document.getElementById(id).innerHTML;
}
function init(vars){ var vs = getShader("shader-vs"); var fs = getShader("shader-fs"); vars.prog = shaderProgram(vars.gl,vs,fs); vars.gl.useProgram(vars.prog); attributeSetFloats(vars.gl, vars.prog, "pos", 3, [ -1, -1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 1, 0, 1, 1, 0, ]);
}
function draw(vars) { var loc; loc = vars.gl.getUniformLocation(vars.prog, "time"); vars.gl.uniform1f( loc, vars.frameNo ); loc = vars.gl.getUniformLocation(vars.prog, "mouse"); vars.gl.uniform2f( loc, vars.mx, vars.canvas.height-vars.my ); vars.gl.drawArrays(vars.gl.TRIANGLES, 0, 6);
}
function frame(vars) { if(vars === undefined){ var vars={}; vars.canvas = document.querySelector("#canvas"); vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; vars.gl = vars.canvas.getContext("experimental-webgl"); vars.gl.viewport(0, 0, vars.canvas.width, vars.canvas.height); init(vars); window.addEventListener("resize", function(){ vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; vars.gl.viewport(0, 0, vars.canvas.width, vars.canvas.height); }, true); vars.canvas.oncontextmenu = function (e) { e.preventDefault(); }; vars.canvas.addEventListener("mousemove", function(e){ var rect = vars.canvas.getBoundingClientRect(); vars.mx = Math.round((e.clientX-rect.left)/(rect.right-rect.left)*vars.canvas.width); vars.my = Math.round((e.clientY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height); }, true); vars.canvas.addEventListener("mousedown", function(e){ switch(e.which){ case 1: vars.leftButton=1; break; case 3: vars.rightButton=1; break; } }, true); vars.canvas.addEventListener("mouseup", function(e){ switch(e.which){ case 1: vars.leftButton=0; break; case 3: vars.rightButton=0; break; } }, true); vars.canvas.addEventListener("mousewheel", function(e){ var e = window.event || e; // old IE support vars.wheelDelta = Math.max(-1, Math.min(1, (e.wheelDelta/120 || -e.detail))); }, true); vars.canvas.addEventListener("touchstart", function(e){ vars.leftButton=1; e.preventDefault(); var rect = vars.canvas.getBoundingClientRect(); vars.omx=vars.mx; vars.omy=vars.my; vars.mx = Math.round((e.changedTouches[0].pageX-rect.left)/(rect.right-rect.left)*vars.canvas.width); vars.my = Math.round((e.changedTouches[0].pageY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height); }, true); vars.canvas.addEventListener("touchend", function(e){ vars.leftButton=0; }, true); vars.canvas.addEventListener("touchmove", function(e){ e.preventDefault(); var rect = vars.canvas.getBoundingClientRect(); vars.mx = Math.round((e.changedTouches[0].pageX-rect.left)/(rect.right-rect.left)*vars.canvas.width); vars.my = Math.round((e.changedTouches[0].pageY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height); }, true); vars.frameNo=0; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; vars.mx=vars.cx; vars.my=vars.cy; } vars.frameNo++; requestAnimationFrame(function() { frame(vars); }); draw(vars);
}
frame();
Developer | Scott R McGann |
Username | cantelope |
Uploaded | November 11, 2022 |
Rating | 4 |
Size | 3,008 Kb |
Views | 14,168 |
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 |
WebGL Colors | 3,008 Kb |
Vortex | 3,439 Kb |
Torii tame | 5,644 Kb |
HexMaze | 4,825 Kb |
Background | 4,590 Kb |
Js1k6 | 2,367 Kb |
Dimples | 4,013 Kb |
Golfed Sphere | 1,764 Kb |
Pulse | 3,954 Kb |
Turtles Advanced | 4,040 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 |
A Pen by Jess | Jessamyne | 5,100 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Toolbar | Onsen | 5,414 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
HexMaze | Cantelope | 4,825 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Flexbox Test | Icutpeople | 2,486 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!