forked from soulwire/sketch.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (161 loc) · 7.1 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
<html>
<head>
<title>sketch.js</title>
<link rel="stylesheet" href="examples/css/main.css">
</head>
<body>
<header class="introduction">
<hgroup>
<h1>Sketch.js</h1>
<h2>Minimal JavaScript Creative Coding Framework</h2>
</hgroup>
</header>
<nav class="navigation">
<a href="https://github.com/soulwire/sketch.js">Github</a>
<a href="https://github.com/soulwire/sketch.js/archive/master.zip">Download</a>
<a href="https://github.com/soulwire/sketch.js/wiki/">Documentation</a>
<a href="https://github.com/soulwire/sketch.js/wiki/API">API</a>
</nav>
<section class="showcase">
<h3>Examples</h3>
<figure>
<a href="examples/drawing.html" target="_blank">
<img src="examples/img/drawing.jpg">
</a>
<figcaption>
<strong>Multi-touch drawing</strong>
<p>Basic example demonstrating how to set up a sketch and handle mouse / touch input</p>
</figcaption>
</figure>
<figure>
<a href="examples/particles.html" target="_blank">
<img src="examples/img/particles.jpg">
</a>
<figcaption>
<strong>Particles</strong>
<p>Create a multi-touch particle toy with sketch.js</p>
</figcaption>
</figure>
<figure>
<a href="http://soulwire.github.com/Plasmatic-Isosurface/" target="_blank">
<img src="examples/img/plasma.jpg">
</a>
<figcaption>
<strong>Plasmatic Isosurface</strong>
<p>An example using sketch.js in WebGL mode</p>
</figcaption>
</figure>
<figure>
<a href="examples/three.html" target="_blank">
<img src="examples/img/three.jpg">
</a>
<figcaption>
<strong>THREE.js</strong>
<p>How to integrate sketch.js with THREE.js</p>
</figcaption>
</figure>
<figure>
<a href="http://soulwire.github.com/Muscular-Hydrostats/" target="_blank">
<img src="examples/img/tentacles.jpg">
</a>
<figcaption>
<strong>Muscular Hydrostats</strong>
<p>An interactive canvas demo powered by sketch.js</p>
</figcaption>
</figure>
<figure>
<a href="http://soulwire.github.com/Crystallisation/" target="_blank">
<img src="examples/img/crystallization.jpg">
</a>
<figcaption>
<strong>Crystallisation</strong>
<p>An experiment which uses sketch.js with CoffeeScript</p>
</figcaption>
</figure>
<figure>
<a href="http://soulwire.github.io/WebGL-GPU-Particles/" target="_blank">
<img src="examples/img/webgl-particles.jpg">
</a>
<figcaption>
<strong>1 Million Particles</strong>
<p>Moving lots of particles around on the GPU</p>
</figcaption>
</figure>
<figure>
<a href="http://lab.hakim.se/linjer/" target="_blank">
<img src="examples/img/linjer.jpg">
</a>
<figcaption>
<strong>Linjer</strong>
<p><a href="http://hakim.se/" target="_blank">Hakim El Hattab</a> used sketch.js in this awesome interactive experiment</p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/MatthewWagerfield/full/ueIln" target="_blank">
<img src="examples/img/pulse.jpg">
</a>
<figcaption>
<strong>Pulse</strong>
<p><a href="http://wagerfield.com/" target="_blank">Matthew Wagerfield</a>'s beautiful geometric canvas experiment build on sketch.js</p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/jackrugile/full/IjKLt" target="_blank">
<img src="examples/img/bubbles.jpg">
</a>
<figcaption>
<strong>Bubbles</strong>
<p>Interactive canvas demo by <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a></p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/jackrugile/full/Apfyn" target="_blank">
<img src="examples/img/parallax.jpg">
</a>
<figcaption>
<strong>Parallax Mountains</strong>
<p>Excellent parallax effect from <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a>, using the sketch.js 2d canvas</p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/jackrugile/full/qLCuE" target="_blank">
<img src="examples/img/skyline.jpg">
</a>
<figcaption>
<strong>Parallax Skyline</strong>
<p>Another parallax variation from <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a></p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/jackrugile/full/swLat" target="_blank">
<img src="examples/img/swarm.jpg">
</a>
<figcaption>
<strong>Swarming Bugs</strong>
<p><a href="http://jackrugile.com/" target="_blank">Jack Rugile</a> creates wonderful hungry creatures that search for food</p>
</figcaption>
</figure>
<figure>
<a href="http://refactored.fr/physics/sketch/" target="_blank">
<img src="examples/img/cloth.jpg">
</a>
<figcaption>
<strong>Cloth</strong>
<p>An experiment simulating cloth by <a href="http://refactored.fr/" target="_blank">Tony Broyez</a></p>
</figcaption>
</figure>
<figure>
<a href="http://codepen.io/molefrog/full/pilHJ" target="_blank">
<img src="examples/img/flowers.jpg">
</a>
<figcaption>
<strong>Random Flowers</strong>
<p>Animated generative flowers by <a href="http://molefrog.com/" target="_blank">Alexey Taktarov</a></p>
</figcaption>
</figure>
</section>
<footer class="footer">
<p>Using sketch.js? Let me know: justin [at] soulwire.co.uk</p>
</footer>
</body>
</html>