Sine Wave Noise ...to be used for something else later maybe.
A Pen by Tiffany Rayside on CodePen.
Created
August 16, 2015 07:11
-
-
Save tmrDevelops/2e05aa72a887be150a7f to your computer and use it in GitHub Desktop.
Noisy Sine
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="canv"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.requestAnimFrame = (function() { | |
| return window.requestAnimationFrame || | |
| window.webkitRequestAnimationFrame || | |
| window.mozRequestAnimationFrame || | |
| window.oRequestAnimationFrame || | |
| window.msRequestAnimationFrame || | |
| function(callback) { | |
| window.setTimeout(callback, 1000 / 60); | |
| }; | |
| })(); | |
| var c = document.getElementById('canv'), | |
| $ = c.getContext('2d'), | |
| sin = 0; | |
| function resize() { | |
| c.style.width = window.innerWidth + 'px'; | |
| c.style.height = window.innerHeight + 'px'; | |
| } | |
| resize(); | |
| window.onresize = resize; | |
| function noise($) { | |
| var w = $.canvas.width, | |
| h = $.canvas.height, | |
| imgD = $.getImageData(0, 0, w, h), | |
| buffer32 = new Uint32Array(imgD.data.buffer), | |
| len = buffer32.length, | |
| i = 0, | |
| pr = 456 * Math.random(), | |
| prs = 716 * Math.random();; | |
| for(; i < len;) { | |
| //black, grey, and white | |
| //buffer32[i++] = (((pr % 255)|0) << 24) | 0x110000; | |
| //Or colorful | |
| buffer32[i++] = (((pr % 255)|0) << 24) | 0x770000 + (Math.random() * 16777216)|0; | |
| pr += prs * 2.5; | |
| } | |
| $.putImageData(imgD, 0, 0); | |
| // wave | |
| for(i = 0; i < w; i += 1.2) { | |
| var x = i * Math.sin((i+(sin++))/200); | |
| $.drawImage($.canvas, i,0, 1, h, i, x, 1, h); | |
| } | |
| } | |
| (function run() { | |
| noise($); | |
| window.requestAnimFrame(run); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| width:100%; | |
| margin:0; | |
| overflow:hidden; | |
| } | |
| canvas{ | |
| background:hsla(255,255%,255%,1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment