-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (133 loc) · 14.3 KB
/
Copy pathindex.html
File metadata and controls
157 lines (133 loc) · 14.3 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Livecodelab</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/respond.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- this paragraph is for the lightbox -->
<script src="javascripts/jquery-1.7.2.min.js"></script>
<script src="javascripts/lightbox.js"></script>
<link href="stylesheets/lightbox.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!--
<div id="header">
<nav>
<li class="fork"><a href="https://github.com/davidedc/Livecodelab-website">View On GitHub</a></li>
<li class="downloads"><a href="https://github.com/davidedc/Livecodelab-website/zipball/master">ZIP</a></li>
<li class="downloads"><a href="https://github.com/davidedc/Livecodelab-website/tarball/master">TAR</a></li>
<li class="title">DOWNLOADS</li>
</nav>
</div> --> <!-- end header -->
<div class="wrapper">
<section>
<div id="title">
<p style="margin: 0 0 5px;"><a href="#"><img src="images/headerLogoAndTitle.png" alt="LiveCodeLab" width="489" ></a></p>
<center>
<span class="credits">maintained by <a href="http://www.davidedc.com">Davide Della Casa</a> and <a href="http://rumblesan.com/">Guy John</a> // </span>
<span class="credits"><b><a href="https://github.com/davidedc/livecodelab">Fork on github</a></b></span>
</center>
</div>
<hr class="style-two" style="margin:20px 0 1px;">
<div id="asasa" class="menua">
<center>
<a href="#" style="margin: 0 25px 0 25px; background-color: rgb(226, 239, 255);">INTRO</a>
<a href="./videos.html" style="margin: 0 25px 0 25px;">VIDEOS</a>
<a href="./gallery.html" style="margin: 0 25px 0 25px;">GALLERY</a>
<!-- <a href="http://www.w3schools.com" style="font-size: 16px;">PRESS/EVENTS</a> -->
</center>
</div>
<hr class="style-two" style="margin:0 0 15px;">
<h3>
<a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>Welcome</h3>
<p>Livecodelab is a special secret place where you can make fancy "on-the-fly" 3d visuals and play awesomely offbeat (literally) sounds.
"On-the-fly" meaning: as you type. Type just three letters: "box", and boom! a box appears. No clicking play, no waiting, no nothing.
What are you waiting for? Try the magic. Press the button below and play with the examples.</p>
<center>
<a id="linkOfCallToAction" href="play/index.html" ><img src="images/goPlay.png" width="178" height="37" style="padding: 20px;"></a>
</center>
<h3>
<a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>Some pics</h3>
<p>Gaaaa don't we all love screenshooooots. These are from the "making of" and old/new examples. For many more (and much bigger) screenshots see the screenshots page <a name="designer-templates" class="anchor" href="./gallery.html">here</a>.</p>
<div style="width:650px; margin-left:20px;">
<p>
<a href="images/screenshots/ScreenShot35.png" title="sketch by Paul Sonnentag aka @BrackCurly" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb35.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot34.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb34.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot33.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb33.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot32.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb32.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot31.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb31.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot30.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb30.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot29.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb29.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot28.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb28.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot27.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb27.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot26.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb26.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot25.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb25.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot22.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb22.jpg" width="200" height="115" alt="Livecodelab screenshot 1" /></a>
<a href="images/screenshots/ScreenShot23.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb23.jpg" width="200" height="115" alt="Livecodelab screenshot 2" /></a>
<a href="images/screenshots/ScreenShot24.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb24.jpg" width="200" height="115" alt="Livecodelab screenshot 3" /></a>
<a href="images/screenshots/ScreenShot13.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb13.jpg" width="200" height="115" alt="Livecodelab screenshot 4" /></a>
<a href="images/screenshots/ScreenShot14.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb14.jpg" width="200" height="115" alt="Livecodelab screenshot 5" /></a>
<a href="images/screenshots/ScreenShot15.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb15.jpg" width="200" height="115" alt="Livecodelab screenshot 6" /></a>
<a href="images/screenshots/ScreenShot16.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb16.jpg" width="200" height="115" alt="Livecodelab screenshot 7" /></a>
<a href="images/screenshots/ScreenShot17.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb17.jpg" width="200" height="115" alt="Livecodelab screenshot 8" /></a>
<a href="images/screenshots/ScreenShot18.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb18.jpg" width="200" height="115" alt="Livecodelab screenshot 9" /></a>
<a href="images/screenshots/ScreenShot19.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb19.jpg" width="200" height="115" alt="Livecodelab screenshot 10" /></a>
<a href="images/screenshots/ScreenShot20.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb20.jpg" width="200" height="115" alt="Livecodelab screenshot 11" /></a>
<a href="images/screenshots/ScreenShot21.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb21.jpg" width="200" height="115" alt="Livecodelab screenshot 12" /></a>
<a href="images/screenshots/ScreenShot2.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb2.jpg" width="200" height="115" alt="Livecodelab screenshot 13" /></a>
<a href="images/screenshots/ScreenShot3.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb3.jpg" width="200" height="115" alt="Livecodelab screenshot 14" /></a>
<a href="images/screenshots/ScreenShot4.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb4.jpg" width="200" height="115" alt="Livecodelab screenshot 15" /></a>
<a href="images/screenshots/ScreenShot5.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb5.jpg" width="200" height="115" alt="Livecodelab screenshot 16" /></a>
<a href="images/screenshots/ScreenShot6.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb6.jpg" width="200" height="115" alt="Livecodelab screenshot 17" /></a>
<a href="images/screenshots/ScreenShot7.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb7.jpg" width="200" height="115" alt="Livecodelab screenshot 18" /></a>
<a href="images/screenshots/ScreenShot8.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb8.jpg" width="200" height="115" alt="Livecodelab screenshot 19" /></a>
<a href="images/screenshots/ScreenShot9.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb9.jpg" width="200" height="115" alt="Livecodelab screenshot 20" /></a>
<a href="images/screenshots/ScreenShot10.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb10.jpg" width="200" height="115" alt="Livecodelab screenshot 21" /></a>
<a href="images/screenshots/ScreenShot11.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb11.jpg" width="200" height="115" alt="Livecodelab screenshot 22" /></a>
<a href="images/screenshots/ScreenShot12.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb12.jpg" width="200" height="115" alt="Livecodelab screenshot 23" /></a>
<a href="images/screenshots/ScreenShot1.png" rel="lightbox[livecodelabScreenshots]" ><img src="images/screenshots/thumbnails/Thumb1.jpg" width="200" height="115" alt="Livecodelab screenshot 24" /></a>
</p>
<br />
</div>
<h3>
<a name="rather-drive-stick" class="anchor" href="#rather-drive-stick"><span class="octicon octicon-link"></span></a>Credits</h3>
<p>Livecodelab was made possible by heaps of people smarter than us, including:</p>
<ul>
<li><a href="http://mrdoob.github.com/three.js/">Three.js</a> inventor <a href="http://mrdoob.com/">Ricardo Cabello aka Mr.doob</a> and <a href="https://github.com/mrdoob/three.js/graphs/contributors">contributors</a> </li>
<li><a href="https://github.com/jashkenas/coffee-script">Coffeescript</a> inventor <a href="http://ashkenas.com/">Jeremy Ashkenas</a> and <a href="https://github.com/jashkenas/coffee-script/graphs/contributors">contributors</a> </li>
<li>Sound via <a href="http://buzz.jaysalvat.com/">Buzz.js</a> by <a href="http://jaysalvat.com/">Jay Salvat</a>.</li>
<li>Some routines taken from <a href="http://processingjs.org/">processing.js library</a> started by <a href="http://ejohn.org/">J. Resig</a> and maintained by <a href="http://github.com/jeresig/processing-js/graphs/contributors">a wide community of programmers</a>. </li>
<li>The code editor is <a href="http://marijn.haverbeke.nl/codemirror/">Code Mirror</a> by <a href="http://marijn.haverbeke.nl/">Marijn Haverbeke</a></li>
<li><a href="http://www.pawfal.org/fluxus/">Fluxus</a>, a really cool livecoding framework to which we are much in debt, by the <a href="http://www.pawfal.org/index.php?page=PawfalPeople">Pawfal collective</a></li>
<li>Very special thanks to <a href="http://yaxu.org/">Alex McLean aka Yaxu</a> and <a href="http://www.pawfal.org/dave/">David Griffith aka NeboGeo</a> for inspiration</li>
<li>The <a href="http://toplap.org/index.php?title=Main_Page">TOPLAP</a> collective for keeping high the live coding flag.</li>
<li>Scrollwheel handler by <a href="http://brandonaaron.net/">Brandon Aaron</a>.</li>
</br>
</ul>
<h3>
<a name="authors-and-contributors" class="anchor" href="#authors-and-contributors"><span class="octicon octicon-link"></span></a>Similar projects</h3>
<ul>
<li><a href="https://github.com/jonbro/jsaxus">Jsaxus</a> by <a href="http://jonbro.tk/">Jonathan Brodsky</a>, probably the first web-based live coding environment (2004). Check out his <a href="https://vimeo.com/944836">brick-busting demo</a> on vimeo.</li>
<li><a href="http://www.i2off.org/flaxus/screen.html">Flaxus</a> by <a href="http://www.i2off.org/">i2off</a>, probably the second web-based live coding environment (2006). Watch the VjSet <a href="http://www.youtube.com/watch?v=4zrN-obig1I">on YouTube</a>.</li>
<li><a href="http://webglplayground.net/">Webgl playground</a>, allows you to try three.js scenes and shaders online. </li>
<li><a href="http://mrdoob.com/139/GLSL_Sandbox">GLSL Sandbox</a> by Mr.doob compiles shaders on the fly and superimposes the code to the shader output.</li>
<li><a href="http://livecoder.net/">livecoder.net</a> by <a href="http://fritzo.org/">Fritz Obermeyer</a>.</li>
<li><a href="http://charlie-roberts.com/gibber/info/">Gibber</a> by <a href="http://www.charlie-roberts.com/">Charlie Roberts</a>, a musical live coding environment. Also enables networked group live coding performances.</li>
</ul>
<h3>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>