-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
234 lines (217 loc) · 15.3 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
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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sonification Studies</title>
<style>
body {
background-color:#222;
font-family: 'Inconsolata',sans-serif;
}
.header {
color: #fff;
font-size:20px;
text-align: center;
position:fixed;
left:0px;
top:0px;
width: 100%;
margin:0px;
padding:10px;
background-color: rgb(0,0,0,1);
}
.info {
color: #ddd;
top:10%;
font-size:24;
width:800px;
margin: auto;
}
.info a {
text-decoration: none;
}
a:link {
color: white;
text-decoration: underline;
}
/* visited link */
a:visited {
color: gray;
}
#i30 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i29 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i28 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i27 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i26 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i25 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i24 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i23 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i22 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i21 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i20 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i19 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i18 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i17 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i16 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i15 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i14 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i13 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i12 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i11 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i10 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i9 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i8 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i7 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i6 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i5 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i4 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i3 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i2 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
#i1 :hover { -webkit-filter: invert(10%) !important; cursor:pointer; }
@media screen and (min-width: 980px) /* Desktop */ {
.box {
background-color: #444;
color: #666;
width:19.8vw;
height:19.8vw;
margin-bottom:0px;
box-shadow: 5px 5px 25px rgb(0,0,0,0.0);
font-size:12px;
}
.wrapper {
width: 80%;
display: grid;
grid-gap:1px;
grid-template-columns: repeat(3, 25%);
margin: 100px 20%;
padding:0px;
}
.wrapper a{
text-decoration: none;
}
}
@media screen and (max-width: 979px) /* Tablet */ {
.box {
background-color: #444;
color: #fff;
width:100%;
margin:4px;
font-size:12px;
}
.wrapper {
width: 80%;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(1, 100%);
margin: 100px auto;
}
}
</style>
</head>
<body>
<div class="header">Hackpact / Sonification Studies<br></div>
<div class="wrapper">
<!--
<a href="Day-30-Birds-On-Wires/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/030.jpg" width="100%"></span>.<br>Day 30 // Birds On Wires</div></a>
<a href="Day-29-Chance-Operations/index.html"><div class="box"><span id="i29"><img src="assets/thumbs/029.jpg" width="100%"></span>.<br>Day 29 // Chance Operations</div></a>
<a href="Day-28-Verlet-Dance/index.html"><div class="box"><span id="i28"><img src="assets/thumbs/028.jpg" width="100%"></span>.<br>Day 28 // Verlet Dance</div></a>
<a href="Day-27-Random-Forest/index.html"><div class="box"><span id="i27"><img src="assets/thumbs/027.jpg" width="100%"></span>.<br>Day 27 // Random Forest</div></a>
<a href="Day-26-Shepard-Tone/index.html"><div class="box"><span id="i26"><img src="assets/thumbs/026.jpg" width="100%"></span>.<br>Day 26 // Shepard Tone</div></a>
<a href="Day-25-Entropy/index.html"><div class="box"><span id="i25"><img src="assets/thumbs/025.jpg" width="100%"></span>.<br>Day 25 // Entropy</div></a>
<a href="Day-24-Noise-Pianist/index.html"><div class="box"><span id="i24"><img src="assets/thumbs/024.jpg" width="100%"></span>.<br>Day 24 // Noise Pianist</div></a>
<a href="Day-23-Prime-Distribution/index.html"><div class="box"><span id="i23"><img src="assets/thumbs/023.jpg" width="100%"></span>.<br>Day 23 // Prime Distribution</div></a>
<a href="Day-22-Hexagon-Tiling/index.html"><div class="box"><span id="i22"><img src="assets/thumbs/022.jpg" width="100%"></span>.<br>Day 22 // Hexagon Tiling</div></a>
<a href="Day-21-Dimension-Reduction/index.html"><div class="box"><span id="i21"><img src="assets/thumbs/021.jpg" width="100%"></span>.<br>Day 21 // Dimension Reduction</div></a>
<a href="Day-20-Toy-World/index.html"><div class="box"><span id="i20"><img src="assets/thumbs/020.jpg" width="100%"></span>.<br>Day 20 // Toy World</div></a>
<a href="Day-19-Circulation/index.html"><div class="box"><span id="i19"><img src="assets/thumbs/019.jpg" width="100%"></span>.<br>Day 19 // Circulation</div></a>
<a href="Day-18-Initial-Conditions/index.html"><div class="box"><span id="i18"><img src="assets/thumbs/018.jpg" width="100%"></span>.<br>Day 18 // Initial Conditions</div></a>
<a href="Day-17-Cellular-Structure/index.html"><div class="box"><span id="i17"><img src="assets/thumbs/017.jpg" width="100%"></span>.<br>Day 17 // Cellular Structure</div></a>
<a href="Day-16-Granular-Separation/index.html"><div class="box"><span id="i16"><img src="assets/thumbs/016.jpg" width="100%"></span>.<br>Day 16 // Granular Separation</div></a>
<a href="Day-15-Searching-Algorithm/index.html"><div class="box"><span id="i15"><img src="assets/thumbs/015.jpg" width="100%"></span>.<br>Day 15 // Searching Algorithm</div></a>
<a href="Day-14-Polyrhythmia/index.html"><div class="box"><span id="i14"><img src="assets/thumbs/014.jpg" width="100%"></span>.<br>Day 14 // Polyrhythmia</div></a>
<a href="Day-13-Latent-Space/index.html"><div class="box"><span id="i13"><img src="assets/thumbs/013.jpg" width="100%"></span>.<br>Day 13 // Latent Space</div></a>
<a href="Day-12-Sorting-Algorithms/index.html"><div class="box"><span id="i12"><img src="assets/thumbs/012.jpg" width="100%"></span>.<br>Day 12 // Sorting Algorithms</div></a>
<a href="Day-11-Mechanical-Folk/index.html"><div class="box"><span id="i11"><img src="assets/thumbs/011.jpg" width="100%"></span>.<br>Day 11 // Mechanical Folk</div></a>
<a href="Day-10-Flow-Field/index.html"><div class="box"><span id="i10"><img src="assets/thumbs/010.jpg" width="100%"></span>.<br>Day 10 // Flow Field</div></a>
<a href="Day-09-Freefall/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/009.jpg" width="100%"></span>.<br>Day 9 // Freefall</div></a>
<a href="Day-08-Evolving-Strategy/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/008.jpg" width="100%"></span>.<br>Day 8 // Evolving Strategy</div></a>
<a href="Day-07-Board-Game/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/007.jpg" width="100%"></span>.<br>Day 7 // Board Game</div></a>
<a href="Day-06-Drone-Field/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/006.jpg" width="100%"></span>.<br>Day 6 // Drone Field</div></a>
<a href="Day-05-Markov-Chain/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/005.jpg" width="100%"></span>.<br>Day 5 // Markov Chain</div></a>
<a href="Day-04-Logic-Gates/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/004.jpg" width="100%"></span>.<br>Day 4 // Logic Gates</div></a>
<a href="Day-03-Dripping-Weights/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/003.jpg" width="100%"></span>.<br>Day 3 // Dripping Weights</div></a>
<a href="Day-02-Line-Spacing/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/002.jpg" width="100%"></span>.<br>Day 2 // Line Spacing</div></a>
<a href="Day-01-Harmonic-Motion/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/001.jpg" width="100%"></span>.<br>Day 1 // Harmonic Motion</div></a>
-->
<a href="Day-30-Birds-On-Wires/index.html"><div class="box"><span id="i30"><img src="assets/thumbs/030.jpg" width="100%"></span></div></a>
<a href="Day-29-Chance-Operations/index.html"><div class="box"><span id="i29"><img src="assets/thumbs/029.jpg" width="100%"></span></div></a>
<a href="Day-28-Verlet-Dance/index.html"><div class="box"><span id="i28"><img src="assets/thumbs/028.jpg" width="100%"></span></div></a>
<a href="Day-27-Random-Forest/index.html"><div class="box"><span id="i27"><img src="assets/thumbs/027.jpg" width="100%"></span></div></a>
<a href="Day-26-Shepard-Tone/index.html"><div class="box"><span id="i26"><img src="assets/thumbs/026.jpg" width="100%"></span></div></a>
<a href="Day-25-Entropy/index.html"><div class="box"><span id="i25"><img src="assets/thumbs/025.jpg" width="100%"></span></div></a>
<a href="Day-24-Noise-Pianist/index.html"><div class="box"><span id="i24"><img src="assets/thumbs/024.jpg" width="100%"></span></div></a>
<a href="Day-23-Prime-Distribution/index.html"><div class="box"><span id="i23"><img src="assets/thumbs/023.jpg" width="100%"></span></div></a>
<a href="Day-22-Hexagon-Tiling/index.html"><div class="box"><span id="i22"><img src="assets/thumbs/022.jpg" width="100%"></span></div></a>
<a href="Day-21-Dimension-Reduction/index.html"><div class="box"><span id="i21"><img src="assets/thumbs/021.jpg" width="100%"></span></div></a>
<a href="Day-20-Toy-World/index.html"><div class="box"><span id="i20"><img src="assets/thumbs/020.jpg" width="100%"></span></div></a>
<a href="Day-19-Circulation/index.html"><div class="box"><span id="i19"><img src="assets/thumbs/019.jpg" width="100%"></span></div></a>
<a href="Day-18-Initial-Conditions/index.html"><div class="box"><span id="i18"><img src="assets/thumbs/018.jpg" width="100%"></span></div></a>
<a href="Day-17-Cellular-Structure/index.html"><div class="box"><span id="i17"><img src="assets/thumbs/017.jpg" width="100%"></span></div></a>
<a href="Day-16-Granular-Separation/index.html"><div class="box"><span id="i16"><img src="assets/thumbs/016.jpg" width="100%"></span></div></a>
<a href="Day-15-Searching-Algorithm/index.html"><div class="box"><span id="i15"><img src="assets/thumbs/015.jpg" width="100%"></span></div></a>
<a href="Day-14-Polyrhythmia/index.html"><div class="box"><span id="i14"><img src="assets/thumbs/014.jpg" width="100%"></span></div></a>
<a href="Day-13-Latent-Space/index.html"><div class="box"><span id="i13"><img src="assets/thumbs/013.jpg" width="100%"></span></div></a>
<a href="Day-12-Sorting-Algorithms/index.html"><div class="box"><span id="i12"><img src="assets/thumbs/012.jpg" width="100%"></span></div></a>
<a href="Day-11-Mechanical-Folk/index.html"><div class="box"><span id="i11"><img src="assets/thumbs/011.jpg" width="100%"></span></div></a>
<a href="Day-10-Flow-Field/index.html"><div class="box"><span id="i10"><img src="assets/thumbs/010.jpg" width="100%"></span></div></a>
<a href="Day-09-Freefall/index.html"><div class="box"><span id="i9"><img src="assets/thumbs/009.jpg" width="100%"></span></div></a>
<a href="Day-08-Evolving-Strategy/index.html"><div class="box"><span id="i8"><img src="assets/thumbs/008.jpg" width="100%"></span></div></a>
<a href="Day-07-Board-Game/index.html"><div class="box"><span id="i7"><img src="assets/thumbs/007.jpg" width="100%"></span></div></a>
<a href="Day-06-Drone-Field/index.html"><div class="box"><span id="i6"><img src="assets/thumbs/006.jpg" width="100%"></span></div></a>
<a href="Day-05-Markov-Chain/index.html"><div class="box"><span id="i5"><img src="assets/thumbs/005.jpg" width="100%"></span></div></a>
<a href="Day-04-Logic-Gates/index.html"><div class="box"><span id="i4"><img src="assets/thumbs/004.jpg" width="100%"></span></div></a>
<a href="Day-03-Dripping-Weights/index.html"><div class="box"><span id="i3"><img src="assets/thumbs/003.jpg" width="100%"></span></div></a>
<a href="Day-02-Line-Spacing/index.html"><div class="box"><span id="i2"><img src="assets/thumbs/002.jpg" width="100%"></span></div></a>
<a href="Day-01-Harmonic-Motion/index.html"><div class="box"><span id="i1"><img src="assets/thumbs/001.jpg" width="100%"></span></div></a>
</div>
<div class="info">
<p><b>Manifest</b> <br>
<br>
A one month experimentation with sound, algorithms, visual music and unconventional sequencers. These sketches are results of a daily coding practice, called 'Hackpact'. Hackpact itself originates from live coding activity of musicians, but in recent years it has been extended into different directions such as <a href="http://codevember.xyz/"> Codevember</a> for frontend developers or <a href="https://www.100daysofcode.com/">100 days of code</a> for a broader area of developers. You can find several precoursors in art history, specifically in the fields of instruction based and algorithmic art. <br>
<br>
<b>Aesthetic constrains</b> <br>
<br>
- sound should affect the graphics and/or vice versa <br>
- more problem framing, less problem solving <br>
<br>
<b>Technological constrains</b> <br>
<br>
- <a href="https://github.com/stc/HackPact">code is open source & reusable </a><br>
<br>
<b>Learning Goals</b><br>
<br>
- escape the comfort zone: think in space (3d) instead of a 2d canvas <br>
- webgl with <a href="https://p5js.org/">p5js</a> or <a href="https://threejs.org/">threejs</a> <br>
- web based sound synthesis with <a href="https://tonejs.github.io/">tonejs</a> <br>
- modern javascript with modules, ES6, <a href="https://webpack.js.org/">webpack</a>
<br>
<br>
<b>Inspiration</b><br>
<br>
- <a href="https://www.fredrikolofsson.com/f0blog/?q=node/490">Fredrik Olofsson</a> and Click Nilson, <a href="http://mndl.hu/2009-09-30-hackpact.html">Gabor Papp</a>, <a href="http://slab.org/">Alex McLean</a>, Kassen Oud, Daniel Jones<br>
- Zach Liebermann's <a href="https://medium.com/@zachlieberman/daily-sketches-in-2017-1b4234b0615d">daily sketches</a>, <a href="http://www.realitat.com/HACKPACT/">REALITAT</a>, <a href="https://xorxor.hu/projects/research/codevember_2018.html">XORXOR</a>, Scott Hewitt and others <br>
- Live Coding, <a href="https://natureofcode.com/">Nature of Code</a>, <a href="https://en.wikipedia.org/wiki/Fluxus">Fluxus</a> & <a href="http://www.pawfal.org/fluxus/">Fluxus</a>
<br>
<br>
<br>
<br>
© Agoston Nagy, 2018
<br>
<br>
<br>
<br>
<br>
</div>
</body>
</html>