-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (46 loc) · 1.88 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
<!DOCTYPE html>
<html>
<head>
<title>Example Implementation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body style="background-color:#F8F8F8;">
<div class="container">
<div class="row">
<h4 style="padding-top: 5px; font-size: 16px;">Welcome to the SmokeBrush interface! Click and drag the cursor to draw a new curve. Design your sketch by adjusting the customization properties below. Right click to clear the canvas.</h4>
</div>
<div class="row">
<form class="form-inline" id="customize" >
<div class="form-group">
<label for="segLength">Segment Length</label>
<input type="range" class="form-control-range" style="width: 180px;" max="20" id = "segLength"/>
</div>
<div class="form-group">
<label for="strokeWeight">Stroke Weight</label>
<input type="range" class="form-control-range" style="width: 180px;" max="6" id = "strokeWght"/>
</div>
<div class="form-group">
<label for="colour">Color (HEX):</label>
<input type="color" input id = "colour"/>
</div>
<div class="form-group">
<label for="randomcolor"> Rainbow Mode</label>
<input type="checkbox" id = "randomcolor" checked/>
</div>
<div class="form-group">
<label for="randomseglength"> Randomize Segment Length</label>
<input type="checkbox" id = "randomseglength"/>
</div>
<div class="form-group">
<label for="randomstrokeweight"> Randomize Stroke Weight</label>
<input type="checkbox" id = "randomstrokeweight"/>
</div>
</form>
</div>
</div>
<br>
<script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js></script>
<script src="smokebrush.js"></script>
<script src="index.js"></script>
</body>
</html>