forked from snorpey/jpg-glitch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (81 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="manifest.json" />
<link rel="icon" type="image/png" href="images/logos/glitch-48x48.png" sizes="48x48" />
<link rel="icon" type="image/png" href="images/logos/glitch-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="images/logos/glitch-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon" sizes="96x96" href="images/logos/glitch-96x96.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/logos/glitch-144x144.png" />
<title>Image Glitch Tool</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, Roboto, 'Lucida Grande', sans-serif; }
body > p, .description { margin: 50px auto; max-width: 500px; width: 90%; }
.is-good-enough .min-requirements, .has-js .js-required { display: none; }
.text { opacity: 1; }
.has-js .text { opacity: 0; transition: opacity 0.8s ease-in; }
.text p + p, .text p + div { margin-top: 1em; }
.is-too-old .text { opacity: 1 }
.is-loading .text { opacity: 0 }
.app-loader { display: inline-block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 90px; transition: opacity 0.1s; }
.loader { opacity: 0; }
.is-loading .loader { opacity: 1; }
.loader::before, .loader::after { content: ''; display: block; position: absolute; top: 8px; left: 18px; width: 20px; height: 20px; border-radius: 40px; border: 2px currentColor solid; z-index: 1; transform: scale(0.5); opacity: 0; }
.is-loading .loader::before { animation: pulse 2s infinite; }
.is-loading .loader::after { animation: pulse 2s infinite; animation-delay: 1s; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(0.5); } }
</style>
<script>document.documentElement.setAttribute( 'class', 'has-js' );</script>
</head>
<body>
<article class="description text">
<p>With this app, you can glitch your own images by dragging an image into the browser window. Use the sliders in the control panel to alter the glitched parameters. The image updates in real time.</p>
<p>This app corrupts some bytes in an image. Because of the way <a href="https://en.wikipedia.org/wiki/JPEG">JPEG encoding</a> works, the corrupted file still shows a corrupted image. It was inspired by <a href="http://github.com/soulwire">soulwire</a>’s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in Flash.</p>
<p>This tool was created by <a href="http://snorpey.com/">Georg</a>. He is always happy to learn about the things that people are creating with his tools. You can follow him on <a href="https://twitter.com/snorpey">Twitter</a> or explore the source code of this app on <a href="https://github.com/snorpey/jpg-glitch">GitHub</a>.</p>
<p>There also exists a desktop version of this web app, which you can download <a href="https://snorpey.github.io/jpg-glitch-electron/">here</a>.</p>
<p>If you like the glitcher, you can check out some of Georg’s other <a href="http://snorpey.github.io/experiments/">JavaScript experiments</a>.</p>
<p class="min-requirements text">
<strong>Please note</strong>: <span class="js-required">javascript and </span><a href="http://caniuse.com/#feat=addeventlistener,canvas,classlist,es5,json,queryselector">modern browsers</a> are required for this app to work.
</p>
</article>
<svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
<script>
var testCanvas = document.createElement( 'canvas' );
if (
'querySelector' in document &&
'addEventListener' in window &&
Array.prototype.forEach &&
document.createElement( 'a' ).classList &&
( testCanvas.getContext && testCanvas.getContext( '2d' ) )
) {
if ( 'serviceWorker' in navigator ) {
navigator.serviceWorker.register( 'serviceworker.js' );
}
var loaderEl = document.createElement( 'div' );
loaderEl.classList.add( 'loader' );
loaderEl.classList.add( 'app-loader' );
loaderEl.textContent = 'Loading…';
document.body.appendChild( loaderEl );
var scriptEl = document.createElement( 'script' );
scriptEl.setAttribute( 'data-main', 'scripts/glitcher.js' );
scriptEl.async = true;
scriptEl.src = 'scripts/lib/require.js';
document.documentElement.classList.add( 'is-loading' );
document.documentElement.classList.add( 'is-good-enough' );
document.body.appendChild( scriptEl );
testCanvas = null;
var linkEl = document.createElement( 'link' );
linkEl.href = 'styles/glitcher.css';
linkEl.rel = 'stylesheet';
document.head.appendChild( linkEl );
} else {
setTimeout( function () {
document.documentElement.setAttribute( 'class', 'has-js is-too-old' );
}, 20 );
}
</script>
</body>
</html>