-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (50 loc) · 2.81 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Refractor</title>
<style>
body {
background-color: #222;
color: #999;
font-family: Lucida Grande;
font-size: 18px;
width: 640px;
margin: 60px auto;
text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
line-height: 1.5;
}
h1, h2 {
color: #ccc;
}
a {
color: #f00;
}
</style>
</head>
<body>
<h1>Refractor</h1>
<iframe src="http://player.vimeo.com/video/60983552?title=0&byline=0&portrait=0" width="640" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>Refractor is a multitouch interface for transforming and distorting images.</p>
<h2>How to install</h2>
<p>Refractor is based on web standards, so it should just run in Safari on iPad. But Apple unfortunately doesn't (yet) allow WebGL to run on iOS. Unless it's in an iAd!</p>
<p>Fortunately it's not too difficult to run Refractor as an iAd.</p>
<ol>
<li>Download Apple's iAd Tester app. Click <a href="https://itunes.apple.com/us/app/iad-tester/id426184788?mt=8">this link</a> on your iPad.</li>
<li>Download <a href="refractor.ad.zip">this zip file</a> to your computer.</li>
<li>Connect your iPad to your computer and open iTunes.</li>
<li>Go to Apps > File Sharing > iAd Tester. Drag the zip file into iAd Tester Documents.</li>
<li>The file should transfer, then disappear. You can now open iAd Tester and run Refractor!</li>
</ol>
<h2>Technical details</h2>
<p>GLSL code is dynamically generated by the sequence of distortions you chain together.</p>
<p>The distortions themselves are just primitive GLSL functions: <code>abs</code>, <code>fract</code>, <code>min</code>, <code>floor</code>, <code>sin</code>.</p>
<p>Each distortion is sandwiched by an affine transformation first, and then its inverse transformation afterwards. In effect, this sandwiching lets us change the <em>reference frame</em> for the distortion.</p>
<p>The transformations are modeled as 3x3 matrices and sent in to the shader as uniforms. The matrices are manipulated by multi-touching the image.</p>
<h2>Credits</h2>
<p>By <a href="http://tobyschachman.com/">Toby Schachman</a> for the <a href="http://pixelshaders.com/">Pixel Shaders</a> project.</p>
<p>The first prototype was created during <a href="http://arthackday.net/god_mode/">Art Hack Day NYC 2013: God Mode</a> at <a href="http://319scholes.org/">319 Scholes</a>.</p>
<p>Pixel Shaders is supported by an <a href="http://eyebeam.org/projects/openart">Open(Art) Fellowship</a> from <a href="http://eyebeam.org/">Eyebeam</a> and <a href="http://www.mozilla.org/foundation/">Mozilla</a>.</p>
<a href="https://github.com/electronicwhisper/arthackday-refractor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</body>
</html>