-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (125 loc) · 9.72 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
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
<html>
<head>
<title>Jack Schaedler - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,400' rel='stylesheet' type='text/css'>
<style>
@import url("fontello-7609773e/css/fontello.css");
@import url("style.css");
</style>
<link rel="icon" type="" href="favicon.ico"></head>
<body>
<div class="title">
<table width="1500">
<tr>
</tr>
</table>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top; width: 250px; font-size: 12px" class="subheader">
<div class="littleheader" style="margin-left: 0px; margin-bottom:0px; width: 250px; font-size: 18px"> JACK SCHAEDLER
<div class="subheader" style="font-size: 14px">ABOUT</div><br/>
</div>
I work as a Software Developer at <a href="https://www.ableton.com/">Ableton</a>.<br/><br/> I studied Digital Signal Processing at <a href="http://www.qmul.ac.uk/">Queen Mary, University of London</a> and Computer Science at the <a href="http://www.utexas.edu/">University of Texas</a>.<br/><br/>
I’m interested in drawing, painting, science, software, and education.<br/><br/> I want to help make personal computing edifying and beautiful.
<br/><br/><br/>
<span class="icon-twitter bigicon" style="color: #aaa; cursor: pointer; font-size: 16px" onclick="window.open('http://www.twitter.com/jackschaedler');">
</td>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 20px; width: 100%">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; text-align: right; padding: 10px; width: 830px; margin-top: 85px">
<span class="subheader" style="font-size: 16px; color: #222">SEEING CIRCLES, SINES, AND SIGNALS<br/> <span style="font-size: 12px; color: #666">A COMPACT PRIMER ON DIGITAL SIGNAL PROCESSING</span></span><br/>
<table style="border-top: 1px solid #ccc; margin-top: 5px">
<tr>
<td>
<a href="http://jackschaedler.github.io/circles-sines-signals/">
<img src="scss_thumb3.png" width="300px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; float: left"></img>
</a>
</td>
<td class="subheader" style="font-size: 14px; color: #333; vertical-align: top; font-family: Lato; padding-top: 5px">
<a href="http://jackschaedler.github.io/circles-sines-signals/">Seeing Circles, Sines, and Signals</a> is an introductory text on digital signal processing. It was inspired by Alan Kay’s conception of the “Active Essay” and Bret Victor’s notion of the “Explorable Explanation”. It mixes conventional explanatory text with over thirty interactive and dynamic visualizations of fundamental mathematical concepts related to signal processing and the Discrete Fourier Transform. The project was widely shared, and has been viewed over 100,000 times. The work was praised by Rick Lyons, author of the fantastic textbook, <i>Understanding DSP</i>. (2015)
</td>
</tr>
</table>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; text-align: right; padding: 10px; width: 830px; margin-top: 10px">
<span class="subheader" style="font-size: 16px; color: #222">BACK TO THE FUTURE OF HANDWRITING RECOGNITION<br/> <span style="font-size: 12px; color: #666">AN ACTIVE ESSAY REVISITING THE GRAIL HANDWRITING RECOGNIZER</span></span><br/>
<table style="border-top: 1px solid #ccc; margin-top: 5px">
<tr>
<td>
<a href="http://jackschaedler.github.io/handwriting-recognition/">
<img src="btfhr_thumb.png" width="300px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; float: left"></img>
</a>
</td>
<td class="subheader" style="font-size: 14px; color: #333; vertical-align: top; font-family: Lato; padding-top: 5px">
<a href="http://jackschaedler.github.io/handwriting-recognition/">Back to the Future of Handwriting Recognition</a> is an “Active Essay” which revisits some seminal work in handwriting recognition by Gabriel Groner and the GRAIL team at RAND Corporation. It mixes conventional explanatory text with fully interactive implementations of Groner’s specifications as laid out in his 1966 paper on the Real-Time Recognition of Handprinted Text. (2016)
</td>
</tr>
</table>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; text-align: right; padding: 10px; width: 830px; margin-top: 10px">
<span class="subheader" style="font-size: 16px; color: #222">JAZZARI<br/> <span style="font-size: 12px; color: #666">A PROGRAMMABLE BAND IN YOUR BROWSER</span></span><br/>
<table style="border-top: 1px solid #ccc; margin-top: 5px">
<tr>
<td>
<a href="http://jackschaedler.github.io/jazzari/">
<img src="jazzari_thumb.png" width="300px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; float: left"></img>
</a>
</td>
<td class="subheader" style="font-size: 14px; color: #333; vertical-align: top; font-family: Lato; padding-top: 5px">
<a href="http://jackschaedler.github.io/jazzari/">JAZZARI</a> is a somewhat goofy and frivolous project. It presents the reader with a three-piece band which can be programmed using simple commands. It is intended to be used as a simple “sketchpad” for experimenting with compositional techniques and music theory concepts. (2017)
</td>
</tr>
</table>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 70px; margin-left: 0px; text-align: right; border: padding: 10px; width: 830px">
<span class="subheader" style="font-size: 16px; color: #222">GOYA<br/> <span style="font-size: 12px; color: #666">CLOJURESCRIPT BASED PIXEL EDITOR</span></span>
<table style="border-top: 1px solid #ccc; margin-top: 5px">
<tr>
<td>
<a href="http://jackschaedler.github.io/goya/">
<img src="goya_thumb.png" width="300px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; margin-top: 10px"></img>
</a>
</td>
<td class="subheader" style="font-size: 14px; color: #333; vertical-align: top ; padding-top: 5px">
<a href="http://jackschaedler.github.io/goya/">Goya</a> is a browser-based piece of software for making animated pixel art. It is written in ClojureScript, a LISP dialect invented by Rich Hickey. Goya was one of the first open-source projects to utilize David Nolen’s Om library and clearly demonstrate a trivial implementation of undo, redo, and “time travelling preview” based on the use of immutable data structures. David Nolen has used Goya as an <a href="https://youtu.be/SiFwRtCnxv4?t=17m45s">example application</a> in many of his talks on ClojureScript and React. (2014)
</td>
</tr>
</table>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; text-align: left; padding: 10px; width: 300px">
<span class="subheader" style="font-size: 16px; color: #222">THE AUDIO PROCESSING DOGHOUSE<br/> <span style="font-size: 12px; color: #666">ILLUSTRATED ARTICLE FOR objc.io</span></span><br/>
<a href="http://www.objc.io/issue-24/audio-dog-house.html">
<img src="apdh_thumb.png" width="180px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 18px; margin-top: 15px"></img>
</a>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; text-align: left; padding: 10px; width: 240px">
<span class="subheader" style="font-size: 16px; color: #222">MY SKETCHBOOK<br/> <span style="font-size: 12px; color:#666">SKETCHES AFTER THE MASTERS</span></span><br/>
<a href="masters.html">
<img src="afm_thumb.jpeg" width="190px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; margin-top: 10px"></img>
</a>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; text-align: left; padding: 10px; width: 170px">
<span class="subheader" style="font-size: 16px; color: #222">READING NOTES on<br/> <span style="font-size: 12px; color: #666">FRANCIS BACON</span></span><br/>
<a href="notes/bacon.html">
<img src="notes_thumb.png" width="114px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px; margin-top: 0px"></img>
</a>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; text-align: left; padding: 10px; width: 250px;">
<span class="subheader" style="font-size: 16px; color: #222">POSTCARDS FROM BERLIN<br/> <span style="font-size: 12px; color: #666">ILLUSTRATIONS OF GERMAN WORDS</span></span><br/><br/>
<a href="postcards.html">
<img src="post_thumb.jpeg" width="190px" style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px"></img>
</a>
</div>
<div style="float: left; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; text-align: left; padding: 10px; width: 400px;">
<span class="subheader" style="font-size: 16px; color: #222">SATIRICAL SCRUM CARDS<br/> <span style="font-size: 12px; color: #666">FUN FOR YOUR SCRUM BOARD</span></span><br/><br/>
<a href="satirical.html">
<img src="satirical_thumb.jpg" height="170px" widt style="margin: 5px; margin-left: 0px; margin-right: 30px; margin-bottom: 0px"></img>
</a>
</div>
</tr>
</table>
</body>
</html>