-
Notifications
You must be signed in to change notification settings - Fork 252
/
index.html
96 lines (74 loc) · 3.62 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fluid Paint</title>
<meta name="description" content="Fluid paint simulation">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="paint.css">
</head>
<body>
<script type="text/template" id="main">
<div id="ui">
<div id="clear-button" class="button">Clear</div><div id="save-button" class="button">Save</div>
<div class="control-label">Quality</div>
<div class="buttons" id="qualities"></div>
<div style="clear:both"></div>
<div class="control-label">Color Mode</div>
<div class="buttons" id="models"></div>
<div style="clear:both"></div>
<div class="control-label">Paint Fluidity</div>
<div id="fluidity-slider" class="slider"></div>
<div class="control-label">Bristle Count</div>
<div id="bristles-slider" class="slider"></div>
<div class="control-label">Brush Size</div>
<div id="size-slider" class="slider"></div>
<div class="control-label">Paint Color</div>
<div id="undo-button" class="button">Undo</div><div id="redo-button" class="button">Redo</div>
</div>
<div id="instructions">
<span>Click and hold</span> to paint <br/>
<span>Scroll</span> to change brush size<br/>
<span>Space + drag</span> to pan<br/>
<span>Drag edges</span> to resize canvas
</div>
<div id="footer">
<a href="http://david.li">david.li</a> | <a href="http://github.com/dli/paint">Source code</a>
</div>
</script>
<script type="text/template" id="no-support">
<div id="no-support-container">
<div id="error"></div>
<div id="backlink"><a href="http://david.li">Back to david.li</a></div>
</div>
</script>
<div id="placeholder"></div>
<script src="wrappedgl.js"></script>
<script src="utilities.js"></script>
<script src="rectangle.js"></script>
<script src="brush.js"></script>
<script src="simulator.js"></script>
<script src="colorpicker.js"></script>
<script src="slider.js"></script>
<script src="buttons.js"></script>
<!--<script src="brushviewer.js"></script>-->
<script src="paint.js"></script>
<script>
'use strict';
var canvas = document.createElement('canvas');
var wgl = WrappedGL.create(canvas);
if (wgl !== null && wgl.hasFloatTextureSupport()) { //required features are supported
document.body.appendChild(canvas);
document.getElementById('placeholder').outerHTML = document.getElementById('main').innerHTML;
var painter = new Paint(canvas, wgl);
} else { //required features unsupported
document.getElementById('placeholder').outerHTML = document.getElementById('no-support').innerHTML;
if (wgl === null) {
document.getElementById('error').innerHTML = 'Unfortunately, your browser does not support WebGL.';
} else {
document.getElementById('error').innerHTML = 'Unfortunately, your browser does not support WebGL floating point textures.';
}
}
</script>
</body>
</html>