WebGL Colors

Developer
Scott R McGann
Size
3,008 Kb
Views
14,168
  1. WebGL Colors Previews
  2. WebGL Colors HTML Codes
  3. WebGL Colors CSS Codes
  4. WebGL Colors JS Codes

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 Previews
IQ Test

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
WebGL Colors - Script Codes
Home Page Home
Developer Scott R McGann
Username cantelope
Uploaded November 11, 2022
Rating 4
Size 3,008 Kb
Views 14,168
Do you need developer help for WebGL Colors?

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!

Scott R McGann (cantelope) Script Codes
Name
Jiggleballs
Dimples
Circle
Modulation
Js1k6
3D layers
Golfed Sphere
Turtles Advanced
Torii tame
Snow
Create amazing marketing copy 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!