blob: 16a7c502cf5d52d9219a73e9396e49184d2f7e81 (
plain)
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>pugl</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<script>
// make sure we have the right base for URLs
if (!location.pathname.endsWith('.html') && !location.pathname.endsWith('/')) {
location.pathname = location.pathname + '/';
}
</script>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body class="no-margin overflow-hidden">
<script src="pugl.js" async></script>
<noscript>
<p>
This page requires JavaScript to function.<br>
Try using a modern browser such as <em>Netscape Navigator</em>®.
</p>
</noscript>
<div id="page">
<div id="main">
<div id="ui">
<div id="top-area">
<img src="icon.png" alt="" id="title-icon"> <span id="title">pugl</span>
<input placeholder="Title" id="creation-title">
<div id="creation-buttons">
<button id="list-creations" class="img-button" title="list creations">
<img alt="list creations" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTYgNyBMMjYgNyBNNiAxNiBMMjYgMTYgTTYgMjUgTDI2IDI1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+">
</button>
<button id="link-creation" class="img-button" title="copy link to creation">
<img alt="copy link" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHJlY3QgeD0iNiIgeT0iNCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgcng9IjIiIGZpbGw9Im5vbmUiLz48cmVjdCB4PSIxMSIgeT0iOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIGNsaXAtcGF0aD0icGF0aCgnTSAyMCAwIGwgMCAyNCBsIC0xNCAwIGwgMCAxMDAgbCAxMDAgMCBMIDEwMCAwIHonKSIgc3Ryb2tlLXdpZHRoPSIzIiByeD0iMiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==">
<span id="copied-notice">Copied link!</span>
</button>
<button id="about-button" class="img-button" title="about pugl">
<img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMTYiIHJ4PSIxMiIgcnk9IjEyIiBzdHJva2U9IiNmOGYiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgLz48dGV4dCBmaWxsPSIjZjhmIiB4PSIxNiIgeT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMHB4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4/PC90ZXh0Pjwvc3ZnPg==">
</button>
<button id="new-creation" class="img-button" title="new creation">
<img alt="new creation" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTE2IDYgTDE2IDI2IE02IDE2IEwyNiAxNiIgc3Ryb2tlPSIjOGY4IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==">
</button>
<button id="delete-creation" class="img-button" title="delete creation">
<img alt="delete creation" src="x.svg">
</button>
</div>
</div>
<form action="#" method="dialog" id="code-form" class="ui-section inline-block">
<input type="text" placeholder="Code" id="code">
<input type="submit" value="import">
</form>
<form action="#" method="dialog" id="resolution-form" class="ui-section inline-block">
<input type="number" placeholder="width" id="resolution-x">
×
<input type="number" placeholder="height" id="resolution-y">
<input type="submit" value="change resolution">
</form>
<div class="ui-section">
<div class="inline-block no-wrap">
<button disabled id="play" class="img-button" title="run the shader once per frame (shortcut: space)">
<img alt="play" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTSA2IDI2IEwgMjYgMTYgTCA2IDYgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPjwvc3ZnPgo=">
</button>
<button id="pause" class="img-button" title="run the shader only on command (shortcut: space)">
<img alt="pause" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHogTSAxOSA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSIgLz4KPC9zdmc+Cg==">
</button>
<button disabled id="step" class="img-button" title="run the shader once (shortcut: .)">
<img alt="step" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDQgMCBsIDAgLTIwIHogTSAxNCA2IGwgMTIgMTAgbCAtMTIgMTAgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPgo8L3N2Zz4K">
</button>
<button id="restart" class="img-button" title="reset .time to 0, and update shader (shortcut: R)">
<img alt="restart" src="data:image/svg+xml;base64,Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KPHBhdGggZD0iTTEyIDggYSA5IDkgMCAxIDAgMTAgNSBtIDAgLTIgbCAtNCA0IG0gNCAtNCBsIDUgMiIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K">
</button>
</div>
<div class="inline-block no-wrap" title="automatically update display when anything is changed">
<input id="auto-update" type="checkbox" checked>
<label for="auto-update">auto-update</label>
</div>
</div>
<div class="ui-section">
Add <input type="text" id="widget-search" placeholder="Search">
<div id="widget-choices"></div>
<div id="widgets-container"></div>
</div>
</div>
<div id="ui-resize"></div>
<div id="canvas-container">
<canvas id="canvas">
<p>
Your browser doesn't support HTML5 <canvas>.<br>
Try upgrading to the latest version of Microsoft Internet Explorer®.
</p>
</canvas>
</div>
</div>
<div id="error">error</div>
<dialog id="about-dialog">
<h2>pugl</h2>
<i><b>p</b>ommicket's <b>u</b>tility for <b>gl</b> shaders</i>
<hr>
<p>
pugl is a tool that lets you create & share shaders without writing any code.
</p>
<p>
to learn how to use pugl, check out <a href="guide/index.html" target="_blank">the guide</a>.
</p>
<h3>credits</h3>
<hr>
<p>
icon based on
<a href="https://commons.wikimedia.org/wiki/File:Long-beakedEchidna.jpg" target="_blank">Long-beakedEchidna.jpg from WikiMedia</a>
CC BY-SA 3.0.
</p>
<p>
everything else is licensed under WTFPLv2.
</p>
<form method="dialog">
<button>close</button>
</form>
</dialog>
<dialog id="creations-dialog">
<h3>saved creations</h3>
<hr>
<div id="creations"></div>
<br>
<form method="dialog">
<button>close</button>
</form>
</dialog>
<dialog id="delete-dialog">
<h3>delete creation "<span id="delete-creation-title"></span>"?</h3>
<br>
<form method="dialog">
<button id="delete-creation-confirm">yes</button>
<button>no</button>
</form>
</dialog>
</div>
</body>
</html>
|
