-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
257 lines (140 loc) · 9.07 KB
/
Copy pathindex.html
File metadata and controls
257 lines (140 loc) · 9.07 KB
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
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<link href="https://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="Hugo 0.78.1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roy's blog</title>
<meta name="description" content=" " />
<link type="text/css" rel="stylesheet" href="http://roy.red/css/print.css" media="print">
<link type="text/css" rel="stylesheet" href="http://roy.red/css/poole.css">
<link type="text/css" rel="stylesheet" href="http://roy.red/css/syntax.css">
<link type="text/css" rel="stylesheet" href="http://roy.red/css/hyde.css">
<link type="text/css" rel="stylesheet" href="http://roy.red/css/glslEditor.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic" rel="stylesheet" type="text/css">
<link href="http://roy.red/index.xml" rel="alternate" type="application/rss+xml" title="Roy's blog" />
<script type="application/javascript" src="/scripts/glslEditor.js"></script>
<script type="text/javascript" src="/scripts/GlslCanvas.js"></script>
<script type="text/javascript" src="/scripts/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
onload='renderMathInElement(document.body, {delimiters:[
{left: "$", right: "$", display: false},
{left: "@@", right: "@@", display: true},
]});'></script></script>
</head>
<body class="theme-base-08 ">
<aside class="sidebar">
<div class="container">
<div class="sidebar-about">
<a href="http://roy.red/"><h1>Roy's blog</h1></a>
<p class="lead">
</p>
</div>
<nav>
<ul class="sidebar-nav">
<li><a href="http://roy.red/">Home</a> </li>
<li><a href="https://github.com/RoyWiggins/"> Github </a></li><li><a href="/editor"> Shader Editor </a></li><li><a href="https://twitter.com/RoyWiggins/"> Twitter </a></li>
<li><a href="/pages/resources/"> Resources </a></li><li><a href="/pages/resume/"> </a></li>
</ul>
</nav>
</div>
</aside>
<main class="content container">
<div class="posts">
<article class="post">
<a href="http://roy.red/posts/uniting-spherical-and-hyperbolic-tilings/">
<img class='thumbnail' src="/images/covers/folding-tilings-2.png"/>
<h1 class="post-title">
Uniting spherical and hyperbolic tilings
</h1>
</a>
<time datetime="2018-01-06T13:27:09Z" class="post-date">Sat, Jan 6, 2018</time>
In my previous post, I explored generating hyperbolic, euclidean and spherical tilings using circle inversions. While it produced interesting pictures and animations, I wasn’t able to derive a formula to generate particular tilings. There’s another way to generate tilings that admits a beautifully simple unification of the three geometries. We will need a bit more machinery, but the result is interesting and approaches the problem in a different way. This post is based nearly entirely on Knighty’s shader with some help from notes the author left on fractalforums.
<div class="read-more-link">
<a href="/posts/uniting-spherical-and-hyperbolic-tilings/">Read More…</a>
</div>
</article><article class="post">
<a href="http://roy.red/posts/folding-tilings/">
<img class='thumbnail' src="/images/covers/folding-tilings.png"/>
<h1 class="post-title">
Folding Animated Hyperbolic & Spherical Tilings
</h1>
</a>
<time datetime="2017-04-12T15:46:52Z" class="post-date">Wed, Apr 12, 2017</time>
In a previous post, I talked about generating interesting pictures by iterated folding operations. In this post I’m going to use another type of fold to draw both hyperbolic and spherical tilings. If you are already familiar with hyperbolic geometry and tilings, skip the next few paragraphs! There’s code down at the bottom.
In order to simplify what we’re talking about, we can limit ourselves to tilings of right-angled triangles. In the Euclidean plane, there are two ways to tile the plane this way.
<div class="read-more-link">
<a href="/posts/folding-tilings/">Read More…</a>
</div>
</article><article class="post">
<a href="http://roy.red/posts/folding-the-koch-snowflake/">
<img class='thumbnail' src="/images/covers/koch-snowflake.png"/>
<h1 class="post-title">
3D Kaleidoscopic Fractals: Folding the Koch Snowflake
</h1>
</a>
<time datetime="2017-01-03T17:34:06Z" class="post-date">Tue, Jan 3, 2017</time>
How to fold space into a Koch snowflake.
</article><article class="post">
<a href="http://roy.red/posts/building-eschers-square-limit/">
<img class='thumbnail' src="/images/covers/building-eschers-square-limit.png"/>
<h1 class="post-title">
Building Escher's Square Limit in Pixels
</h1>
</a>
<time datetime="2016-12-31T19:16:05Z" class="post-date">Sat, Dec 31, 2016</time>
I’ve been fascinated by M.C. Escher’s “Square Limit” print for a while. In the hopes of understanding it better I decided to try to generate my own square limit images.
</article><article class="post">
<a href="http://roy.red/posts/infinite-regression/">
<img class='thumbnail' src="/images/covers/infinite-regression.png"/>
<h1 class="post-title">
Infinite Regression: Many Pictures From One Function
</h1>
</a>
<time datetime="2016-07-20T20:15:16Z" class="post-date">Wed, Jul 20, 2016</time>
Imitating a variety of Escherian limit tilings, as well as a squared-up Droste, by manipulating a simple function.
</article><article class="post">
<a href="http://roy.red/posts/fractal-droste-images/">
<img class='thumbnail' src="/images/covers/fractal-droste.png"/>
<h1 class="post-title">
Drawing fractal Droste images
</h1>
</a>
<time datetime="2016-05-17T21:31:41Z" class="post-date">Tue, May 17, 2016</time>
When I was researching Droste images for a previous post, I occasionally came across versions which depicted multiple spirals, rather than the ordinary single spiral. This led me down a rabbit hole to understand what is actually going on in these images, and to see what I could make with the effect.
</article><article class="post">
<a href="http://roy.red/posts/interference/">
<img class='thumbnail' src="/posts/interference/circles_m_hu744ededc0e5029e33e213f97d65b962c_686782_200x0_resize_box.gif"/>
<h1 class="post-title">
Fun with interference patterns
</h1>
</a>
<time datetime="2016-05-04T21:04:56Z" class="post-date">Wed, May 4, 2016</time>
Ordinary trigonometric functions can produce really interesting, structured patterns if you use sufficiently large numbers.
</article><article class="post">
<a href="http://roy.red/posts/slitscan/">
<img class='thumbnail' src="/posts/slitscan/cover_huc0057952b6b1e68e6ae54149adf0eeb1_116011_200x0_resize_box_2.png"/>
<h1 class="post-title">
Recreating the Doctor Who Time Tunnel in GLSL
</h1>
</a>
<time datetime="2016-04-27T21:34:06Z" class="post-date">Wed, Apr 27, 2016</time>
The slit-scan effect is a classic analog special effect used in the “Stargate” sequence in 2001: A Space Odyssey, and a title sequence in Doctor Who. It turns out this effect is easy to implement, and the transformation can be done in only a few lines of code.
</article><article class="post">
<a href="http://roy.red/posts/droste/">
<img class='thumbnail' src="/posts/droste/droste-rect_hu27edf68fafd04f8423e2d9806d16fa92_1305335_200x0_resize_q75_box.jpg"/>
<h1 class="post-title">
Implementing the Droste effect in WebGL
</h1>
</a>
<time datetime="2016-04-25T22:33:23Z" class="post-date">Mon, Apr 25, 2016</time>
The Droste effect is a name given to pictures that contain themselves, like an infinite series of nesting dolls. The conventional Droste effect is interesting, but it was taken to new heights by M.C. Escher’s “Print Gallery.” I wanted to understand how Escher’s Print Gallery effect actually worked, and implement it myself.
</article>
</div>
</main>
</body>
</html>