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();
![WebGL Colors - Script Codes](http://shots.codepen.io/cantelope/pen/zzmORP-512.jpg)
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 |
3D layers | 5,087 Kb |
Background | 4,590 Kb |
Circle | 1,712 Kb |
Pulse | 3,954 Kb |
Torii | 5,602 Kb |
Flight | 5,351 Kb |
Torii tame | 5,644 Kb |
Road2 | 3,341 Kb |
Modulation | 7,132 Kb |
Golfed Sphere | 1,764 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 |
Drop Cap | Gsaiki | 1,571 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Transition | Shayhowe | 1,632 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Pictos font library from CodePen | Jstam | 3,790 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!