Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
window.onload = function () { //create shader utility function function createShader (gl, id, type) { var shaderScript = document.getElementById(id); if(!shaderScript){ alert('shader script not found'); return; } var shaderSource = shaderScript.text, shader = gl.createShader(type); gl.shaderSource(shader, shaderSource); gl.compileShader(shader); if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ alert("could not compile shader: " + gl.getShaderInfoLog(shader)); return; } return shader; } //create program utility function function createProgram (gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { alert('Unable to create shader program: ' + gl.getProgramInfoLog(program)); return; } return program; } //canvas and context var canvas = document.getElementById('gl-canvas'), gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); //check if gl context was successfully initialized if (!gl) { alert('WebGL not supported'); return; } //fit the canvas to the viewport canvas.width = window.innerWidth; canvas.height = window.innerHeight; //actual and lerped mouse coordinates var mousePosition = { x: canvas.width / 2, y: canvas.height / 2 }, mouseLerpPosition = { x: canvas.width / 2, y: canvas.height / 2 }; var lerpingFactor = 0.07; gl.viewport(0, 0, canvas.width, canvas.height); //create shaders and link them in a program var vertexShader = createShader(gl, 'vertex-shader', gl.VERTEX_SHADER); var fragmentShader = createShader(gl, 'fragment-shader', gl.FRAGMENT_SHADER); var program = createProgram(gl, vertexShader, fragmentShader); gl.useProgram(program); //get the locations of attributes (and activate their address in the vertex attributes array) and uniforms var vertexPositionLocation = gl.getAttribLocation(program, 'a_Position'); gl.enableVertexAttribArray(vertexPositionLocation); var viewportUniformLocation = gl.getUniformLocation(program, "u_viewport"), juliaComplexUniformLocation = gl.getUniformLocation(program, "u_juliaComplex"); //create the buffer that the GPU will get the vertex data from var rectangleVerticesBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, rectangleVerticesBuffer); var vertices = [ -1, -1, -1, 1, 1, -1, 1, 1 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); function loop () { //add lerp effect to make the transition between complex numbers smooth mouseLerpPosition.x += (mousePosition.x - mouseLerpPosition.x) * lerpingFactor; mouseLerpPosition.y += (mousePosition.y - mouseLerpPosition.y) * lerpingFactor; gl.uniform2f(juliaComplexUniformLocation, mouseLerpPosition.x, mouseLerpPosition.y); //tell webgl where to look for vertex data inside the vertex buffer gl.vertexAttribPointer( vertexPositionLocation, 2, gl.FLOAT, false, 0, 0); //draw two triangle strips (will form a rectangle) gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(loop); }; //set the viewport uniform's two float values to the canvas' dimensions gl.uniform2f(viewportUniformLocation, canvas.width, canvas.height); //start loop(); //event listeners canvas.addEventListener('mousemove', function (e){ mousePosition.x = e.clientX; mousePosition.y = e.clientY; }); window.addEventListener('touchmove', function (e) { var touch = e.targetTouches[0]; mousePosition.x = touch.clientX; mousePosition.y = touch.clientY; }); window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(viewportUniformLocation, canvas.width, canvas.height); }); };
CSS
body{ position: relative; margin: 0; } canvas{ position: absolute; cursor: crosshair; } /* Heavily inspired by this great chrome experiment -> http://www.ibiblio.org/e-notes/webgl/makin.html */
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email