Skip to content

Instantly share code, notes, and snippets.

@qgustavor

qgustavor/consoleBasedFix.js

Last active August 29, 2015 14:15
Show Gist options
  • Save qgustavor/8929cb57fb17bad1154a to your computer and use it in GitHub Desktop.
Save qgustavor/8929cb57fb17bad1154a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
consoleBasedFix.js
// note: require ES6
$('#frame').html('<canvas id="pinkSlime" resize></canvas><div id="werd" class="glitch" data-text=""></div>')
{let script=$('script[canvas="pinkSlime"]')[0];
script.innerHTML=script.innerHTML
// disable checking
.replace('Boolean(window.chrome)', 'true')
// replace IE specific javascript with the standards one
// http://stackoverflow.com/a/21512167
.replace(/event\.event\.(\w)/g, (a,b) => `event.event.client${b.toUpperCase()}`);
}
paper.PaperScript.load()
Raw
fixedStronger.html
<!doctype html>
<!-- Use cdn.rawgit.com or htmlpreview.github.io to test -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta property="og:title" content="Harder, Better, Faster, Stronger"/>
<meta property="og:url" content="http://davealger.c.mom/stronger/"/>
<meta property="og:image" content="http://davealger.com/stronger/punk_small.jpg"/>
<meta property="og:site_name" content="davealger.com"/>
<meta property="og:description" content="a daft punk sound pad."/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.21/paper-full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
!function(){function e(e,r){return[].slice.call((r||document).querySelectorAll(e))}if(window.addEventListener){var r=window.StyleFix={link:function(e){try{if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}catch(t){return}var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{3,10}:/.exec(a)||[""])[0],s=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;p.onreadystatechange=function(){4===p.readyState&&n()},n=function(){var t=p.responseText;if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){if(t=r.fix(t,!0,e),a){t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){return/^([a-z]{3,10}:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'});var n=a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}var i=document.createElement("style");i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}};try{p.open("GET",i),p.send(null)}catch(t){"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){},p.onload=n,p.open("GET",i),p.send(null))}e.setAttribute("data-inprogress","")},styleElement:function(e){if(!e.hasAttribute("data-noprefix")){var t=e.disabled;e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}},styleAttribute:function(e){var t=e.getAttribute("style");t=r.fix(t,!1,e),e.setAttribute("style",t)},process:function(){e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)},register:function(e,t){(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)},fix:function(e,t,n){for(var i=0;i<r.fixers.length;i++)e=r.fixers[i](e,t,n)||e;return e},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,r){return r.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};!function(){setTimeout(function(){},10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)}()}}(),function(e){function r(e,r,n,i,a){if(e=t[e],e.length){var o=RegExp(r+"("+e.join("|")+")"+n,"gi");a=a.replace(o,i)}return a}if(window.StyleFix&&window.getComputedStyle){var t=window.PrefixFree={prefixCSS:function(e,n){var i=t.prefix;if(t.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){return r+(t||"")+"linear-gradient("+(90-n)+"deg"})),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{|\\s|;)","\\s*:","$1"+i+"$2:",e),t.properties.length){var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");e=r("valueProperties","\\b",":(.+?);",function(e){return e.replace(a,i+"$1")},e)}return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)},property:function(e){return(t.properties.indexOf(e)?t.prefix:"")+e},value:function(e){return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+t.prefix})},prefixProperty:function(e,r){var n=t.prefix+e;return r?StyleFix.camelCase(n):n}};!function(){var e={},r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){if("-"===t.charAt(0)){r.push(t);var n=t.split("-"),i=n[1];for(e[i]=++e[i]||1;n.length>3;){n.pop();var a=n.join("-");o(a)&&-1===r.indexOf(a)&&r.push(a)}}},o=function(e){return StyleFix.camelCase(e)in i};if(n.length>0)for(var s=0;s<n.length;s++)a(n[s]);else for(var l in n)a(StyleFix.deCamelCase(l));var u={uses:0};for(var p in e){var f=e[p];u.uses<f&&(u={prefix:p,uses:f})}t.prefix="-"+u.prefix+"-",t.Prefix=StyleFix.camelCase(t.prefix),t.properties=[];for(var s=0;s<r.length;s++){var l=r[s];if(0===l.indexOf(t.prefix)){var c=l.slice(t.prefix.length);o(c)||t.properties.push(c)}}"Ms"!=t.Prefix||"transform"in i||"MsTransform"in i||!("msTransform"in i)||t.properties.push("transform","transform-origin"),t.properties.sort()}(),function(){function e(e,r){return i[r]="",i[r]=e,!!i[r]}var r={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};r["repeating-linear-gradient"]=r["repeating-radial-gradient"]=r["radial-gradient"]=r["linear-gradient"];var n={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"};t.functions=[],t.keywords=[];var i=document.createElement("div").style;for(var a in r){var o=r[a],s=o.property,l=a+"("+o.params+")";!e(l,s)&&e(t.prefix+l,s)&&t.functions.push(a)}for(var u in n){var s=n[u];!e(u,s)&&e(t.prefix+u,s)&&t.keywords.push(u)}}(),function(){function r(e){return a.textContent=e+"{}",!!a.sheet.cssRules.length}var n={":read-only":null,":read-write":null,":any-link":null,"::selection":null},i={keyframes:"name",viewport:null,document:'regexp(".")'};t.selectors=[],t.atrules=[];var a=e.appendChild(document.createElement("style"));for(var o in n){var s=o+(n[o]?"("+n[o]+")":"");!r(s)&&r(t.prefixSelector(s))&&t.selectors.push(o)}for(var l in i){var s=l+" "+(i[l]||"");!r("@"+s)&&r("@"+t.prefix+s)&&t.atrules.push(l)}e.removeChild(a)}(),t.valueProperties=["transition","transition-property"],e.className+=" "+t.prefix,StyleFix.register(t.prefixCSS)}}(document.documentElement);
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Gruppo);
* { border:0; margin: 0; padding: 0; font-family: sans-serif; font-size: 18px; }
body {
overflow: hidden;
}
.glitch {
font-family: Gruppo, sans-serif;
pointer-events: none;
color: white;
font-size: 50px;
position: absolute;
margin: 0 auto;
height: 50px;
text-align: center;
}
@keyframes noise-anim {
0% {
clip: rect(92px, 9999px, 24px, 0);
}
5% {
clip: rect(35px, 9999px, 82px, 0);
}
10% {
clip: rect(24px, 9999px, 24px, 0);
}
15.0% {
clip: rect(40px, 9999px, 71px, 0);
}
20% {
clip: rect(100px, 9999px, 56px, 0);
}
25% {
clip: rect(23px, 9999px, 19px, 0);
}
30.0% {
clip: rect(56px, 9999px, 80px, 0);
}
35% {
clip: rect(15px, 9999px, 51px, 0);
}
40% {
clip: rect(4px, 9999px, 75px, 0);
}
45% {
clip: rect(21px, 9999px, 72px, 0);
}
50% {
clip: rect(16px, 9999px, 68px, 0);
}
55.0% {
clip: rect(76px, 9999px, 39px, 0);
}
60.0% {
clip: rect(81px, 9999px, 17px, 0);
}
65% {
clip: rect(77px, 9999px, 39px, 0);
}
70% {
clip: rect(17px, 9999px, 75px, 0);
}
75% {
clip: rect(88px, 9999px, 51px, 0);
}
80% {
clip: rect(56px, 9999px, 51px, 0);
}
85.0% {
clip: rect(38px, 9999px, 8px, 0);
}
90% {
clip: rect(41px, 9999px, 1px, 0);
}
95% {
clip: rect(11px, 9999px, 55px, 0);
}
100% {
clip: rect(52px, 9999px, 35px, 0);
}
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: transparent;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
height: 50px;
text-align: center;
}
@keyframes noise-anim-2 {
0% {
clip: rect(64px, 9999px, 54px, 0);
}
5% {
clip: rect(71px, 9999px, 50px, 0);
}
10% {
clip: rect(72px, 9999px, 73px, 0);
}
15.0% {
clip: rect(28px, 9999px, 70px, 0);
}
20% {
clip: rect(79px, 9999px, 18px, 0);
}
25% {
clip: rect(48px, 9999px, 85px, 0);
}
30.0% {
clip: rect(34px, 9999px, 47px, 0);
}
35% {
clip: rect(70px, 9999px, 50px, 0);
}
40% {
clip: rect(42px, 9999px, 5px, 0);
}
45% {
clip: rect(25px, 9999px, 93px, 0);
}
50% {
clip: rect(47px, 9999px, 79px, 0);
}
55.0% {
clip: rect(96px, 9999px, 23px, 0);
}
60.0% {
clip: rect(52px, 9999px, 49px, 0);
}
65% {
clip: rect(2px, 9999px, 91px, 0);
}
70% {
clip: rect(38px, 9999px, 11px, 0);
}
75% {
clip: rect(59px, 9999px, 71px, 0);
}
80% {
clip: rect(91px, 9999px, 57px, 0);
}
85.0% {
clip: rect(54px, 9999px, 59px, 0);
}
90% {
clip: rect(30px, 9999px, 43px, 0);
}
95% {
clip: rect(66px, 9999px, 59px, 0);
}
100% {
clip: rect(66px, 9999px, 2px, 0);
}
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: transparent;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
height: 50px;
text-align: center;
}
.glitch-w {
color: black;
}
.glitch-w:after {
color: black;
background: transparent;
height: 50px;
text-align: center;
}
.glitch-w:before {
color: black;
background: transparent;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<!-- disabled facebook, I don't know how it works -->
<div id="frame">
<!-- pretty much everything is drawn dynamically using paper.js -->
<canvas id="pinkSlime" resize></canvas>
<div id="werd" class="glitch" data-text=""></div>
</div>
<script type="text/paperscript" canvas="pinkSlime">
var width, height, center;
var points = 10;
var smooth = true;
var path = new Path();
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
path.fillColor = 'rgba(255,200,180,0.5)';
var sW;
var sH;
var box;
initializePath();
function initializePath() {
sW = document.documentElement.clientWidth / 8;
sH = document.documentElement.clientHeight / 4;
box = new Path.Rectangle(new Point(0, 0),new Point(sW, sH));
box.fillColor = 'rgba(155,155,155,0.6)';
center = view.center;
width = view.size.width;
height = view.size.height / 2;
path.segments = [];
path.add(view.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(view.bounds.bottomRight);
path.fullySelected = false;
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight) / 10;
for (var i = 1; i < points; i++) {
var sinSeed = event.count + (i + i % 10) * 100;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
path.segments[i].point.y = yPos;
}
if (smooth) {
path.smooth();
}
var dX = mousePos.x;
var dY = mousePos.y;
var jR = Math.trunc(dX/sW);
var jD = Math.trunc(dY/sH);
box.position = new Point(jR*sW + sW/2, jD*sH + sH/2);
}
function onMouseMove(event) {
mousePos = event.point;
}
function onMouseDown(event) {
// let's believe that paper.js will be cross-browser
// also support touch
var mX = event.point.x;
var mY = event.point.y;
var jR = Math.trunc(mX/sW) + 1;
var jD = Math.trunc(mY/sH);
var num = jR + (jD * 8);
tw = num;
var c = palette[getR(0,palette.length-1)];
ion.sound.play(punks[num].name);
if (smooth) {
path.fillColor = c;
document.getElementsByTagName('body')[0].style.backgroundColor = '#000000';
$('#werd').removeClass('glitch-w');
smooth = false;
}
else {
path.fillColor = c;
document.getElementsByTagName('body')[0].style.backgroundColor = '#ffffff';
$('#werd').addClass('glitch-w');
smooth = true;
}
if (!smooth) {
for (var i = 0, l = path.segments.length; i < l; i++) {
var segment = path.segments[i];
segment.handleIn = segment.handleOut = null;
}
}
var t = tx[tw-1];
$('#werd').html(t);
$('#werd').attr('data-text',t);
var bx = jR*sW;
var by = jD*sH;
$('#werd').css({'top':(by+(sH/2)-30)+'px','left':(bx-sW)+'px'});
$('#werd').stop().fadeIn(0);
$('#werd').stop().fadeOut(1111);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
box.remove();
initializePath();
}
function getR(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Ion.Sound | version 2.1.3 | https://github.com/IonDen/ion.sound
var ion=ion||{};(function(e){var l=function(a){a&&console&&(console.warn&&"function"===typeof console.warn?console.warn(a):console.log&&"function"===typeof console.log&&console.log(a))};if(e.sound)l("ion.sound already exists!");else if("function"!==typeof Audio&&"object"!==typeof Audio){var g=function(){l("HTML5 Audio is not supported in this browser")};e.sound=function(){};e.sound.play=g;e.sound.stop=g;e.sound.destroy=g;g()}else{var f,m=/iPad|iPhone/.test(navigator.appVersion),k,d={},b={},n,h,c;m?(f=function(a){this.name=a.name;this.paused=this.loop=!1;this.callback=this.sound=null},f.prototype={init:function(){this.sound=k},play:function(a){a||(a={});a.loop?this.paused?this._playLoop(this.loop+1):this._playLoop(a.loop):(this.loop=!1,this._play());a.onEnded&&"function"===typeof a.onEnded&&(this.callback=a.onEnded)},_play:function(){if(this.paused)this.paused=!1;else try{this.sound.currentTime=0}catch(a){}this.sound.removeEventListener("ended");this.sound.addEventListener("ended",this._ended.bind(this),!1);this.sound.src=d.path+this.name+h;this.sound.load();this.sound.play()}}):(f=function(a){this.name=a.name;this.volume=d.volume||.5;this.preload=d.preload?"auto":"none";this.paused=this.loop=!1;this.callback=this.sound=null;"volume"in a&&(this.volume=+a.volume);"preload"in a&&(this.preload=a.preload?"auto":"none")},f.prototype={init:function(){this.sound=new Audio;this.sound.src=d.path+this.name+h;this.sound.load();this.sound.preload=this.preload;this.sound.volume=this.volume;this.sound.addEventListener("ended",this._ended.bind(this),!1)},play:function(a){a||(a={});if(a.volume||0===a.volume)this.volume=+a.volume,this.sound.volume=this.volume;a.loop?this.paused?this._playLoop(this.loop+1):this._playLoop(a.loop):(this.loop=!1,this._play());a.onEnded&&"function"===typeof a.onEnded&&(this.callback=a.onEnded)},_play:function(){if(this.paused)this.paused=!1;else try{this.sound.currentTime=0}catch(a){}this.sound.play()}});f.prototype._playLoop=function(a){"boolean"===typeof a?(this.loop=9999999,this._play()):"number"===typeof a&&(this.loop=a-1,this._play())};f.prototype._ended=function(){0<this.loop&&(--this.loop,this._play());this.callback&&this.callback(this.name)};f.prototype.pause=function(){this.paused=!0;this.sound.pause()};f.prototype.stop=function(){this.loop=!1;this.sound.pause();try{this.sound.currentTime=0}catch(a){}};f.prototype.destroy=function(){this.stop();this.sound.removeEventListener("ended",this._ended.bind(this),!1);this.sound.src="";this.sound=null};e.sound=function(a){d=JSON.parse(JSON.stringify(a));d.path=d.path||"";d.volume=d.volume||.5;d.preload=d.preload||!1;d.mix=d.mix||!0;if(n=d.sounds.length){k=new Audio;a=k.canPlayType("audio/mpeg");var e=k.canPlayType("audio/ogg"),g=k.canPlayType('audio/mp4; codecs="mp4a.40.2"');m?"probably"===a?h=".mp3":"probably"===g?h=".aac":"maybe"===a?h=".mp3":"maybe"===g&&(h=".aac"):h="probably"===a?".mp3":"probably"===e?".ogg":"maybe"===a?".mp3":"maybe"===e?".ogg":".wav";for(c=0;c<n;c++)a=d.sounds[c],b[a.name]=new f(a),b[a.name].init()}else l("No sound-files provided!")};e.sound.version="2.1.3";e.sound.play=function(a,c){b[a]&&b[a].play(c)};e.sound.pause=function(a){if(a&&b[a])b[a].pause();else for(c in b)b.hasOwnProperty(c)&&b[c]&&b[c].pause()};e.sound.stop=function(a){if(a&&b[a])b[a].stop();else for(c in b)b.hasOwnProperty(c)&&b[c]&&b[c].stop()};e.sound.destroy=function(a){if(a&&b[a])b[a].destroy(),b[a]=null;else for(c in b)b.hasOwnProperty(c)&&b[c]&&(b[c].destroy(),b[c]=null)}}})(ion);
var palette = [
"rgba(57,106,177,0.4)",
"rgba(130,163,219,0.4)",
"rgba(62,150,81,0.4)",
"rgba(148,202,107,0.4)",
"rgba(148,139,61,0.4)",
"rgba(220,210,128,0.4)",
"rgba(218,124,48,0.4)",
"rgba(241,167,92,0.4)",
"rgba(146,36,40,0.4)",
"rgba(182,133,112,0.4)",
"rgba(204,37,41,0.4)",
"rgba(227,110,144,0.4)",
"rgba(107,76,154,0.4)",
"rgba(176,135,199,0.4)",
"rgba(83,81,84,0.4)",
"rgba(144,149,149,0.4)"];
var punks = [
{name:'beat'},
{name:'WorkIt1'},
{name:'MakeIt1'},
{name:'DoIt1'},
{name:'MakesUs1'},
{name:'Harder1'},
{name:'Better1'},
{name:'Faster1'},
{name:'Stronger1'},
{name:'MoreThan1'},
{name:'Hour1'},
{name:'Our1'},
{name:'Never1'},
{name:'Ever1'},
{name:'After1'},
{name:'WorkIs1'},
{name:'Over1'},
{name:'WorkIt2'},
{name:'MakeIt2'},
{name:'DoIt2'},
{name:'MakesUs2'},
{name:'Harder2'},
{name:'Better2'},
{name:'Faster2'},
{name:'Stronger2'},
{name:'MoreThan2'},
{name:'Ever2'},
{name:'Hour2'},
{name:'After2'},
{name:'Our2'},
{name:'WorkIs2'},
{name:'Never2'},
{name:'Over2'},
{name:'MoreThan3'},
{name:'Hour3'},
{name:'Our3'},
{name:'Never3'},
{name:'Ever3'},
{name:'After3'},
{name:'WorkIs3'},
{name:'Over3'}
];
ion.sound({
sounds: punks,
volume: 0.5,
// Seen that Codepen assets doesn't support HTTPS
path: "http://s.cdpn.io/190177/",
preload: true
});
setTimeout(function(){ion.sound.play(punks[0].name);},1000);
var tw = 0;
var tx = [
'work it',
'make it',
'do it',
'makes us',
'harder',
'better',
'faster',
'stronger',
'more than',
'hour',
'our',
'never',
'ever',
'after',
'work is',
'over',
'work it',
'make it',
'do it',
'makes us',
'harder',
'better',
'faster',
'stronger',
'more than',
'ever',
'hour',
'after',
'our',
'work is',
'never',
'over'
];
$('#werd').fadeOut(0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment