-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathglitch.html
249 lines (236 loc) · 9.43 KB
/
glitch.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Glitch</title>
<style type="text/css">
/*just for the documentation, doesn’t concern the Glitch examples*/
body
{
background-color:#FFF;
color:#000;
font-family:Helvetica, Arial;
font-size:12px;
padding:50px;
}
body > div
{
width:600px;
padding:20px 0;
margin-top:30px;
}
body > div, footer
{
border-top:1px solid #000;
}
footer
{
padding-top:20px;
}
/*end documentation css*/
#basicGlitch
{
width:400px;
height:400px;
display:block;
}
#autoGlitch
{
width:400px;
height:400px;
background-size:100%;
background-image:url(img/glitch_3.jpg);
margin:0;
}
#gallery ul
{
width:400px;
height:400px;
position:relative;
list-style:none;
padding:0;
}
#gallery li
{
background-size:100%;
position:absolute;
width:100%;
height:100%;
}
#gallery0
{
background-image:url(img/glitch_1.jpg);
}
#gallery1
{
background-image:url(img/glitch_2.jpg);
display:none;
}
#gallery2
{
background-image:url(img/glitch_0.jpg);
display:none;
}
#gallery3
{
background-image:url(img/glitch_3.jpg);
display:none;
}
</style>
</head>
<body>
<h1>Glitch</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class Glitch <br />
<strong>Inheritance</strong> : Glitch > Object <br />
<strong>Subclasses</strong> : AutoGlitch</p>
<p>Instances of this class will take the image or element (with background image), and in real time glitch out the bytes of the image. No matter if the image is .jpg, .png, or .gif, it will by glitched like a .jpg becuase that is what looks the coolest. This effect will not work locally unless you set up a local server. Otherwise the canvas thinks it’s all tainted and craps out. Also, if you pull in an image from a different server, it will taint the canvas unless you make it think it’s coming from it’s own server, via a fpassthru or readfile (included) or some other serverside trickery.</p>
<h2>Public Properties</h2>
<ul>
<li><strong>element</strong> : Element <br />
[Read-only] DOM Element manipulated.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>Glitch</strong>(element:Element) <br />
Creates a Glitch object, using a provided image element or other element with a background-image applied or an object with src, dest, and mirror properties if you want to do a video effect.</li>
<li><strong>fucked</strong>(value:int):* <br />
Gets or sets the Glitch’s level of fucked. A low number like 1-3 usually results in a subtle glitching where you can still recognize the image. A higher number such as 50 can more likely distort the image until it is unrecognizable. A value of 0 returns the image to its whole self. Remember that this corruption is actually happening at random, so the results are completely unpredictable. There is a chance that a high fucked amount could still leave an image totally recognizable. Also a chance that a fucked amount of 1 could leave an image completely absent.</li>
<li><strong>start</strong>()<br />
Starts a video glitch effect.</li>
<li><strong>stop</strong>()<br />
Stops a video glitch effect.</li>
</ul>
<h1>AutoGlitch</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class AutoGlitch <br />
<strong>Inheritance</strong> : AutoGlitch > Glitch > Object </p>
<p>Instances of this class will automatically glitch out a random amount for random amounts of times </p>
<h2>Public Properties</h2>
<ul>
<li><strong>cleanTime</strong> : Number <br />
Maximum duration in milliseconds that the image will remain clean while activated.</li>
<li><strong>glitchTime</strong> : Number <br />
Maximum duration in milliseconds that the image will remain glitched while activated.</li>
<li><strong>fuckLimit</strong> : uint <br />
Maximum amount of fucked that the image will get while activated.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>AutoGlitch</strong>(element:Element, cleanTime:Number = 1500, glitchTime:Number = 100, fuckLimit:uint = 5) <br />
Creates an AutoGlitch object, using a provided image element or other element with a background-image applied.</li>
<li><strong>activate</strong>() <br />
Activates the instance, starts the glitching timeouts.</li>
<li><strong>deactivate</strong>() <br />
Deactivates the instance by killing the timeouts and returning the image to its clean state.</li>
</ul>
<div id="basic">
<h2>EXAMPLE 1: BASIC GLITCH</h2>
<img id="basicGlitch" src="img/glitch_0.jpg"/>
<pre><code>var glitch=new Glitch(document.getElementById("basicGlitch"));</code></pre>
<form>
<code><pre>glitch.fucked(<span id="basicFuckAmount"></span>);</pre></code>
<input id="basicFucked" type="range" max="50"/>
</form>
</div>
<div id="auto">
<h2>EXAMPLE 2: AUTO GLITCH</h2>
<figure id="autoGlitch"></figure>
<pre><code>var autoGlitch=new Glitch(document.getElementById("basicGlitch"));</code></pre>
<button id="autoActivate">autoGlitch.activate();</button>
<button id="autoDeactivate">autoGlitch.deactivate();</button>
<form>
<code><pre>autoGlitch.cleanTime(<span id="cleanTime"></span>);</pre></code>
<input id="autoClean" type="range" max="5000" value="1500"/>
</form>
<form>
<code><pre>autoGlitch.glitchTime(<span id="glitchTime"></span>);</pre></code>
<input id="autoDirty" type="range" max="5000" value="100"/>
</form>
<form>
<code><pre>autoGlitch.fuckLimit(<span id="fuckLimit"></span>);</pre></code>
<input id="autoFucked" type="range" max="50" value="5"/>
</form>
</div>
<div id="gallery">
<h2>EXAMPLE 3: GALLERY TRANSITION</h2>
<ul>
<li id="gallery0"></li>
<li id="gallery1"></li>
<li id="gallery2"></li>
<li id="gallery3"></li>
</ul>
<pre><code>var autoGlitch=new Glitch(document.getElementById("basicGlitch"));</code></pre>
<button id="galleryPrev">prev</button>
<button id="galleryNext">next</button>
</div>
<footer>author: Dane Hansen, <a href="mailto:dane@danehansen.com">dane@danehansen.com</a></footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
<script src='js/danehansen/display/Glitch.js'></script>
<script src='js/danehansen/display/AutoGlitch.js'></script>
<script>
(function(){
//glitch
var glitch=new Glitch(document.getElementById("basicGlitch"));
var rand=Math.floor(Math.random()*50);
var basicFuckAmount=document.getElementById("basicFuckAmount");
glitch.fucked(rand);
basicFuckAmount.innerHTML=rand;
document.getElementById("basicFucked").value=rand;
document.getElementById("basicFucked").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
glitch.fucked(val);
basicFuckAmount.innerHTML=val;
});
//auto glitch
var autoGlitch=new AutoGlitch(document.getElementById("autoGlitch"));
var cleanTime=document.getElementById("cleanTime");
cleanTime.innerHTML=1500;
var glitchTime=document.getElementById("glitchTime");
glitchTime.innerHTML=100;
var fuckLimit=document.getElementById("fuckLimit");
fuckLimit.innerHTML=5;
document.getElementById("autoActivate").addEventListener("click", autoGlitch.activate);
document.getElementById("autoDeactivate").addEventListener("click", autoGlitch.deactivate);
document.getElementById("autoClean").addEventListener("input", function(evt){
autoGlitch.cleanTime=parseFloat(evt.target.value)||0;
cleanTime.innerHTML=autoGlitch.cleanTime;
});
document.getElementById("autoDirty").addEventListener("input", function(evt){
autoGlitch.glitchTime=parseFloat(evt.target.value)||0;
glitchTime.innerHTML=autoGlitch.glitchTime;
});
document.getElementById("autoFucked").addEventListener("input", function(evt){
autoGlitch.fuckLimit=parseFloat(evt.target.value)||0;
fuckLimit.innerHTML=autoGlitch.fuckLimit;
});
//gallery transition
var glitches=[new Glitch(document.getElementById("gallery0")), new Glitch(document.getElementById("gallery1")), new Glitch(document.getElementById("gallery2")), new Glitch(document.getElementById("gallery3"))];
var galleryCurrent=0;
var ease=Linear.easeNone;
document.getElementById("galleryPrev").addEventListener("click", function(evt){
TweenLite.to(glitches[galleryCurrent], 0.5, {fucked:50, onComplete:prev, ease:ease});
});
function prev()
{
glitches[galleryCurrent].element.style.display="none";
galleryCurrent--;
if(galleryCurrent<0)
galleryCurrent+=glitches.length;
glitches[galleryCurrent].element.style.display="block";
TweenLite.fromTo(glitches[galleryCurrent], 0.5, {fucked:50}, {fucked:0, ease:ease});
}
document.getElementById("galleryNext").addEventListener("click", function(evt){
TweenLite.to(glitches[galleryCurrent], 0.5, {fucked:50, onComplete:next, ease:ease});
});
function next()
{
glitches[galleryCurrent].element.style.display="none";
galleryCurrent=(galleryCurrent+1)%glitches.length;
glitches[galleryCurrent].element.style.display="block";
TweenLite.fromTo(glitches[galleryCurrent], 0.5, {fucked:50}, {fucked:0, ease:ease});
}
})();
</script>
</body>
</html>