-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (215 loc) · 15.7 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
<!DOCTYPE html>
<html lang="en" class="lang=" en "">
<head>
<meta charset="UTF-8">
<title>Ai.step </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/font-awesome.min.css">
<title>Ai.step</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body12>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Ai.step</a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li id="nav-about"><a href="#about">About</a></li>
<li id="nav-profile"><a href="#Profile">Profile</a></li>
<li id="nav-Performance"><a href="#Performance">Performance</a></li>
<li id="nav-Contact"><a href="#Contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row cover top">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 headline">
<h1 class="text-center">Hi, We are Ai.step</h1>
<p class="lead text-center">LiveCoding and DataVisualization are performed by an "AI".
<!--A Web Developer in training.-->
</p>
<div align="center">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/jL3jZ0aWWkk?autoplay=1&rel=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 center-block text-center"> <a href="#about"><span id="scrollIcon"
class="front-glyph glyphicon glyphicon-menu-down"></span></a> </div>
</div>
</div>
</div>
<div id="about" class="row cover">
<h2 class="text-center">About</h2>
<div class="row">
<div class="text-center about-info">
<p class="text-left">Ai.step is a performance unit consisting of Kakuya Shiraishi and Scott
Allen. Audio live
coding and data visualization are performed by an "AI" based on machine learning and a human
live coder. In this performance, deep learning is used for the code generation and writing
of the sound synthesis programming language TidalCycles. During performance, the AI
generates code to be displayed in the editor on the screen. The performer will select the
tone generated by the AI. In this way, mutual complementation between human and AI is
realized through live coding. In the data visualization, graphics are visually expressed
using the information of the tone generated by the AI, the action of the performer, and the
relationship between them.<br /><br />
Ai.stepは、Kakuya ShiraishiとScott
Allenによるユニットです。人間のパフォーマーと機械学習に基づく「AI」が共にライブコーディングを行い、演奏及びデータビジュアライズのパフォーマンスを行います。演奏では、音響合成プログラミング言語であるTidalCyclesのコード生成と記述の部分に、ディープラーニングを使用します。パフォーマンス中、AIは画面上のエディターに表示されるコードを生成しています。そこから生まれる演奏情報を聞き、パフォーマーが音色を選定していきます。AIの生成結果を人間がナビゲートすることで、人間とAIの間の相互補完をライブコーディングを通じて実現します。データビジュアライゼーションでは、AIが生成する音色の情報、パフォーマーのアクション、両者の関係性を視覚的に表現します。
</p>
</div>
</div>
</div>
<!-- End #About -->
<div id="profile" class="row cover">
<h2 class="text-center">Profile</h2>
<div class="row profile-row">
<div class="col-md-6 text-center profile-pad">
<p class="text-center">
<font size="5px">Kakuya Shiraishi</font>
</p> <img class="img-circle text-center profile-img" src="img/kakuya.png">
<p class="text-left">
<br />Graduated from Gunma National College of Technology, Department of Information and
Computer
Engineering. Graduated from Tama Art University, Department of Information Design,
Interaction Design Course. My main activities include: supporting the development of
expressions by programming using graphics, sounds, videos, images, fonts, algorithms, webs,
etc., installations, applications and the like. I am also involved in music, acting as a
music creator, synthesizer, and DJ.
<br /><br />
群馬工業高等専門学校電子情報工学科、多摩美術大学情報デザイン学科情報デザインコース、情報科学芸術大学院大学メディア表現研究科卒。既存のツールに頼らず自作ソフトウェアを駆使した動的表現で、ビジュアルプログラミングによる映像、MV、VJ、インタラクティブ作品など、システムレベルからの制作を手がける。
<br /><br />
website: <a href="https://kakuyashiraishi.com/"
target="_blank">https://kakuyashiraishi.com/</a>
<br /><br /></p>
</div>
<div class="col-md-6 text-center profile-pad">
<p class="text-center">
<font size="5px">Scott Allen</font>
</p> <img class="img-circle text-center profile-img" src="img/scott.png">
<p class="text-left"><br />
Visual media artist, evangelist of ZOGAKU, part-time teacher at Keio University/Tama art
University/Institute of Advanced Media and Sciences/Musashino art University. Completed
Institute of Advanced
Media Arts and Sciences(IAMAS) in 2016. Focusing on the projector, he creates an
installation aimed at deviating from recognition of currently fixed images. Also he performs
in a style that creates images by physically interposing the mechanism of the projection
device and adding modulation.
<br /><br />
像楽家，生像作家，
慶應SFC／IAMAS／多摩美術大学／武蔵野美術大学非常勤講師．2016年情報科学芸術大学院大学（IAMAS）修了．投影装置に着目し，現在固定化された映像の認識に対する逸脱を目的としたインスタレーションなどを制作する．また，投影装置の仕組みに物理的に介入し，変調を加えることで像を作るスタイルでパフォーマンス活動を行なう．
<br /><br />
website: <a href="https://scottallen.ws/" target="_blank">https://scottallen.ws/</a>
<br /><br /> </p>
</div>
</div>
</div>
<!-- End #profile -->
<div id="Performance" class="row cover">
<h2 class="text-center">Performance</h2>
<div class="row">
<div class="text-center about-info">
<div align="left">
<p class="live-menu">
<font size="5">💻Next live💻</font><br />
<br /><br />
<font size="5">💻Past live💻</font><br />
2020.12.05 -- 15 - <a class="link" href="https://www.prectxe.com/"
style="color:white"> PRECTXE 2020
at Virtual Stage Platform, Seoul, Korea.</a><br />
2020.12.08 -- 13 - <a class="link" href="https://montreal.mutek.org/"
style="color:white"> MUTEK Montréal Édition 21
at MUTEK Montréal Édition 21 ONLINE Platform, Montréal, Canada.</a><br />
2020.08.05 - <a class="link" href="https://vimeo.com/ondemand/ch22"
style="color:white"> チャネル CHANNEL #22 at YouTube Live, Tokyo, Japan.</a><br />
2020.06.27 - <a class="link" href="https://www.dommune.com/streamings/2020/062601/"
style="color:white"> MMFS2020 x DOMMUNE PRESENTS
IST2010から10年、DOMMUNE10周年
｢ミクロ・メディア・フェスティバル Seeds（MMFS）2020」at Tama Art University, Tokyo, Japan.</a><br />
2020.02.22 - <a class="link" href="https://www.yebizo.com/jp/program/detail/2020-08-01"
style="color:white"> ［フェスティヴァル連携｜恵比寿映像祭×デジタル・ショック共催企画］SKYGGE×Ai.step
日仏アーティスト共演：AIと人間による音と映像のライヴパフォーマンス at The Garden Room, Tokyo, Japan</a><br />
2019.12.12 - <a class="link"
href="https://wired.jp/2019/12/13/wired-audi-innovation-award-2019-report/"
style="color:white">WIRED Audi INNOVATION AWARD 2019 授賞式&レセプション at TOLOT heuristic
SHINONOME, Tokyo, Japan.</a><br />
2019.11.06 - <a class="link" href="http://interim-report.org/edition4/"
style="color:white">Interim Report Edition4 at CircusTokyo, Tokyo, Japan.</a><br />
2019.06.01 - <a class="link"
href="https://mutek.jp/news/2019/05/28/japan-media-arts-festival-x-mutek-jp/"
style="color:white">JAPAN MEDIA ARTS FESTIVAL × MUTEK.JP at Miraikan Innovation Hall
(7F), Tokyo, Japan.</a><br />
2019.03.16 - <a class="link" href="https://www.facebook.com/events/246603012955236/"
style="color:white">NxPC.Live Vol.35「IAMAS x SFC」 at Circus tokyo, Tokyo,
Japan.</a><br />
2018.11.18 - <a class="link" href="https://www.facebook.com/events/2219811174967559/"
style="color:white">Algorave x NxPC.Lab(IAMAS) at Tokyo at Circus tokyo, Tokyo,
Japan.</a><br />
2018.11.08 - <a class="link"
href="https://kagurane.com/schedules/view/778?fbclid=IwAR1rERG-A69Or1_GbChn9Wvl_o-HJg46zT6li2HvOJ016U5sAm6a9IybGTM"
style="color:white">Conjunction at kagurane, Tokyo, Japan.</a><br />
2018.09.02 - <a class="link" href="http://interim-report.org/edition3/"
style="color:white">Interim Report Edition3 at Circus tokyo, Tokyo, Japan.</a><br />
2018.06.17 - <a class="link" href="https://www.philharmonicliminales.org/"
style="color:white">Philharmonic liminals – Visual, A.I, Composition- at Circus
tokyo, Tokyo, Japan.</a><br />
2018.06.03 - <a class="link" href="http://algorave.tokyo/" style="color:white">Algorave
Tokyo at Ochiai Soup, Tokyo, Japan. </a><br />
2018.05.04 - <a class="link" href="http://www.ideozen.com/9tomorrows/"
style="color:white">Nine Tommorows at Koshu, China. </a><br />
2018.03.31 - <a class="link" href="https://www.super-deluxe.com/room/4473/"
style="color:white">Channel #18 at Super Deluxe, Tokyo, Japan. </a><br />
2017.09.22 - <a class="link" href="http://interim-report.org/edition2/"
style="color:white"> Interim Report Edition2 at Circus tokyo, Tokyo, Japan.
</a><br />
</p>
</div>
</div>
</div>
</div>
<!-- End #Performance -->
<div id="Contact" class="row cover">
<h2 class="text-center">Contact</h2>
<div class="row">
<div class="text-center about-info">
<div align="center">
<a href="mailto:[email protected], [email protected]">mail [at] scottallen.ws,
taketori7616 [at] gmail.com</a>
<br />
(after clicking above, your e-mail software will automatically open.)
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container"> </div>
</footer>
</body>
<script src='js/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/jquery.scrollTo.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>