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