forked from soulwire/sketch.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (134 loc) · 5.93 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
<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="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://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>
</section>
<footer class="footer">
<p>Using sketch.js? Let me know: justin [at] soulwire.co.uk</p>
</footer>
</body>
</html>