Skip to content

Instantly share code, notes, and snippets.

View JavaScript-Packer's full-sized avatar

Dave Brown JavaScript-Packer

48 followers · 1 following
View GitHub Profile
@JavaScript-Packer
JavaScript-Packer / forever-changing-background.htm
Last active August 29, 2015 14:27
THE ALWAYS CHANGING BACKGROUND EFFECT, CHANGES EVERYTIME YOU RELOAD THE PAGE. Demo on http://codepen.io/samples/full/LVKmxg/
<body><h1>www.WHAK.com</h1>
<canvas id='c' style="position:fixed;top:0;left:0;z-index:-420;width:100%;height:100%"></canvas>
THE ALWAYS CHANGING BACKGROUND EFFECT<P>CHANGES EVERYTIME YOU RELOAD THE PAGE</P>
<script>
var rate=(Math.floor(Math.random() * 20) + 4);
function a() {
var u, n, e, r = 0;
for (u = 0; d > u; u++) {
for (n = 0; g > n; n++) {
e = .5 < Math.random() ? 255 : 0, h.data[r] = e, h.data[r + 1] = e, h.data[r + 2] = e,
@JavaScript-Packer
JavaScript-Packer / off-the-air.htm
Created August 20, 2015 05:27
TV Static in HTML5 canvas. Random black and white static effect http://www.whak.ca/animated-gif/
<body>
<canvas id='c'></canvas>
<script>
function a(){var t,e,n,i,r=0;for(t=0;d>t;t++)for(e=0;g>e;e++)n=.5<Math.random()?255:0,h.data[r]=n,h.data[r+1]=n,h.data[r+2]=n,r+=4;k.putImageData(h,0,0),l++,setTimeout(a,0)}var h,n,p,q,t=document.getElementById("c"),k=t.getContext("2d"),d=t.width=320,g=t.height=240,m=(new Date).getTime(),l=0;for(h=k.createImageData(d,g),p=n=0;d>p;p++)for(q=0;g>q;q++)h.data[n+3]=255,n+=4;a();
</script>
</body>
@JavaScript-Packer
JavaScript-Packer / color-picker.htm
Created August 19, 2015 07:56
HTML5 color picker using canvas. Image embedded, no external files
<html>
<body>
<canvas id="myCanvas" width="578" height="276"></canvas>
<script>
function getMousePos(A,t){var a=A.getBoundingClientRect();return{x:t.clientX-a.left,y:t.clientY-a.top}}function drawColorSquare(A,t,a){var d=100,o=A.getContext("2d"),s=(A.width-d+a.width)/2,R=(A.height-d)/2;o.beginPath(),o.fillStyle=t,o.fillRect(s,R,d,d),o.strokeRect(s,R,d,d)}function init(A){var t=10,a=document.getElementById("myCanvas"),d=a.getContext("2d"),i=!1;d.strokeStyle="#444",d.lineWidth=2,a.addEventListener("mousedown",function(){i=!0},!1),a.addEventListener("mouseup",function(o){var n,k,u,y,b,r,e,s=getMousePos(a,o),R=void 0;i&&null!==s&&s.x>t&&s.x<t+A.width&&s.y>t&&s.y<t+A.height&&(n=d.getImageData(t,t,A.width,A.width),k=n.data,u=s.x-t,y=s.y-t,b=k[4*(A.width*y+u)],r=k[4*(A.width*y+u)+1],e=k[4*(A.width*y+u)+2],R="rgb("+b+","+r+","+e+")",drawColorSquare(a,R,A))},!1),d.drawImage(A,t,t),drawColorSquare(a,"white",A)}var imageObj=new Image;imageObj.onload=function(){init(this)},imageObj.src="data:image/jpeg;base64,/9j/4AAQSkZ
@JavaScript-Packer
JavaScript-Packer / zip-marklet.js
Created August 18, 2015 15:21
This bookmarklet will take any web page your are on, compress it and pack it to a Zip file that spits out for you to download. Real web compression done with HTML5 and JavaScript, all client side and marklet processing is done completely in your web browser. Deflate, setting 9 www.ScriptCompress.com
javascript:var%20WHAK_com=atob('QlpoOTFBWSZTWeYMnOsAGyr/gD8ARAB3////v////7////9gHU99VRe99b40Pt755n2Mdzjrm+8X3djLQe7uKK2affXjo5190h73xlmbtp3z7vp9u9vZM6qj3ufU9A++y2lvt9q8+89r3WW27m6ddzd776D7fXwaEmgABGIZNAjE0MjSYTTATQyNUep5NNNTynqANTITACYImpqp5T1PU9TJoZD1PUeiNkjT1NqNAAAABqaZMQE0JMQFM1JsU2obRGh4UGh5TxQA00AADTIQgKeg1MgEnok9T0TaaGEyBqPIIxDIeoABhIkRoI0hpPQNJgDU0eo1PEp6AyNJvUnpp6j1GgZIPJMJIiaABBT1MGUp+ADU1P1U2nqGTU2mjCGjTaNKMGp6jNhmqlGf5Z8gRD7fur9+YQDRUfoL4rU//JP2uVutQPwkQ9P399QV1luOqoaZ8K++8a2Eva0PWHBkI7JOJyRNnHhhSyOsSM+VcoAHD2sEgyevrH9ncsX0B/Hafyg/Cm8Jh/BQ3ooLi7zZ8F/UpREKQNKTUWKww1h+jYAuj4rzku0CRm5VfSQpZRocj8aw+MXjRaDyABiIm0hErHt0uj0yt4ffyh7MFtN4x873OU3p+91G9VKKV8FHNKI1HNU9lhNo7bPRfazQ3Knri0ObDC0/5BBdPlPuYX2JgEMQR9kiQREIZJyxzX+XKIFNgMTHDy/yZHvPQzq2+Z6hqMzB1j55acb8UZVvjP+kpeGK6myGUdd4I1tmdrVphmdyaia/x2wp1HTLq9JIZ86s91cY1UwKaByoYzedwytOxIknUbqyoHSs99uDXqXdCtfSXOLVA6j8xhYFAzN0gI7vHyZpsBu4oJcx0INgRNN7aOmASgZFWd20kP+EhDRsaFRaBiroIcUimtXm4tcbZGWYLR2cBiWBG6q6rY4kXgAdxO4jbJyVAEsxvn858S+cvF4Qnp5xIRL/ZGJ3n5HK2FgNgYiy/parxFBR
@JavaScript-Packer
JavaScript-Packer / GIF-split.php
Last active August 29, 2015 14:27
PHP - Split (AKA explode, extract, decode) animated GIF from web URL into frames but show the frames (base64 dataurls) on page instead of saving to hard drive. Most GIFS can be scaled down frames, so we added if($i%2==0) so it will skip every other frame... http://www.whak.ca/animated-gif/
<?php
//get every other frame
$GIF='http://www.whak.ca/animated-gif/www.WHAK.com_logo.gif';
$WHAK=new WHAK_decode(file_get_contents($GIF));
$i=1;
foreach($WHAK->WHAK_frames() as $frame){if($i%2==0){echo '<img src="data:image/gif;base64,'.base64_encode($frame).'">';};$i++;};
Class WHAK_decode{var $WHAK_TR=-1;var $WHAK_TG=-1;var $WHAK_TB=-1;var $WHAK_TI=0;var $WHAK_buffer=Array();var $WHAK_arrays=Array();var $WHAK_delays=Array();var $WHAK_dispos=Array();var $WHAK_stream="";var $WHAK_string="";var $WHAK_bfseek=0;var $WHAK_anloop=0;var $WHAK_screen=Array();var $WHAK_global=Array();var $WHAK_sorted;var $WHAK_colorS;var $WHAK_colorC;var $WHAK_colorF;function WHAK_decode($WHAK_pointer){$this->WHAK_stream=$WHAK_pointer;WHAK_decode::WHAK_get(6);WHAK_decode::WHAK_get(7);$this->WHAK_screen=$this->WHAK_buffer;$this->WHAK_colorF=$this->WHAK_buffer[4]&0x80?1:0;$this->WHAK_sorted=$this->WHAK_buffer[4]&0x08?1:0;$this->WHAK_colorC=$this->WHAK_buffer[4]&0x07;$this->WHAK_colorS=2 << $this->WHAK_colorC;if($this->WHAK_colorF==1)
@JavaScript-Packer
JavaScript-Packer / reg2hex.js
Created August 11, 2015 03:36
RGB to HEX color converter
function rgb2hex(s) {
return (s = s.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)) && 4 === s.length ? "#" + ("0" + parseInt(s[1], 10).toString(16)).slice(-2) + ("0" + parseInt(s[2], 10).toString(16)).slice(-2) + ("0" + parseInt(s[3], 10).toString(16)).slice(-2) : "";
}
@JavaScript-Packer
JavaScript-Packer / word-wrapper.js
Created August 8, 2015 22:07
Wrap words to line length approximate so we do not break words. Function from http://www.whak.com/javascript-packer.htm
function wordWrap(str, width, prefix, postfix) {
var p, left, right;
if (str.length > width) {
p = width;
for (;p > 0 && !/\s/.test(str[p]); p--) ;
if (p > 0) {
left = str.substring(0, p);
right = str.substring(p + 1);
return prefix + left + postfix + wordWrap(right, width, prefix, postfix);
}
@JavaScript-Packer
JavaScript-Packer / simplest-encryption-possible.html
Created August 8, 2015 18:40
Simply replaces each character from one array with another character from another array!
<!DOCTYPE html>
<html>
<head>
<title>Encraption &#38; Decraption Algorithm</title>
</head>
<body>
<h1>Encrapted:</h1>
<div id="Silly"></div>
<h1>Unencrapted:</h1>
<div id="not_Silly"></div><script>
@JavaScript-Packer
JavaScript-Packer / 15KB-3D-VIA-JavaScript.html
Created August 5, 2015 19:28
Live demo on http://codepen.io/anon/pen/KpJXvd (compressed to 10KB)
<html>
<head>
<script>
function R(t,e){return e>t?t:e}function T(t){return.5>t?2*t:2*(1-t)}D3=function(){function t(t){return t=.05>t?.05:t,t>10?10:t}function e(t,e){return{x:t.y*e.z-t.z*e.y,y:t.z*e.x-t.x*e.z,z:t.x*e.y-t.y*e.x}}function r(t,e){return t.x*e.x+t.y*e.y+t.z*e.z}function n(t,e){return{x:t.x-e.x,y:t.y-e.y}}function a(t,e){return{x:t.x-e.x,y:t.y-e.y,z:t.z-e.z}}function i(t,e){return{x:t.x+e.x,y:t.y+e.y,z:t.z+e.z}}function s(t,e){return{x:t.x*e,y:t.y*e}}function o(t,e){return{x:t.x*e,y:t.y*e,z:t.z*e}}function u(t){var e=t.x;return t=t.y,Math.sqrt(e*e+t*t)}function h(t){var e=t.x,r=t.y;return t=t.z,Math.sqrt(e*e+r*r+t*t)}function l(t){return s(t,1/u(t))}function f(t){return o(t,1/h(t))}function c(t,e,r,n,a,i,s,o,u,h,l,f){this.R=t,this.S=e,this.U=r,this.ga=n,this.V=a,this.W=i,this.X=s,this.ha=o,this.Y=u,this.Z=h,this.T=l,this.fa=f}function v(t,e){return{x:t.R*e.x+t.S*e.y+t.U*e.z+t.ga,y:t.V*e.x+t.W*e.y+t.X*e.z+t.ha,z:t.Y*e.x+t.Z*e.y+t.T*e.z+t.fa}}function d(t,e){var r=t.R,n=t.S,a=t.U,i=t.V,s
@JavaScript-Packer
JavaScript-Packer / trim-examples.js
Created August 5, 2015 00:38
Left trimming, right trimmer and trim both sides. Simple demos in JavaScript that replace triml, trimr and trim functions. Escape is used just so you can see the spaces as %20 and makes the changes more obvious.
alert(escape(" trim left "["replace"](/^\s\s*/, "")));
alert(escape(" trim right "["replace"](/\s\s*$/, "")));
alert(escape(" trim both "[$ = "replace"](/^\s\s*/, "")[$](/\s\s*$/, "")));