-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
142 lines (126 loc) · 7.02 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
135
136
137
138
139
140
141
142
<html>
<head>
<title>Shape Grammars in Javascript - CGAjs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css">
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<div id="layout" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<canvas></canvas>
</div>
<div class="col-sm-4 lhs">
<div class="form-group">
<textarea rows="20" class="form-control"></textarea>
<pre id="out">
</pre>
</div>
<form class="form">
<div class="form-group">
<button type="button" id="updateBtn" class="btn btn-primary">regenerate</button>
</div>
<div class="form-group">
<label>Lot
<select class="lot-selector form-control">
<option>triangle</option>
<option>square</option>
<option>rectangle</option>
<option>circle</option>
<option value="4squares">4 squares</option>
<option value="9squares">9 squares</option>
<option value="25random">25 random</option>
</select>
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" class="grid-checkbox">
Show grid
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" checked class="regenerate-checkbox">
Regenerate on changes
</label>
</div>
<div class="form-group">
<label>Example
<select class="example-selector form-control">
<optgroup label="tutorials">
<option value="tut1">Basics</option>
<option value="tut2">More rules</option>
<option value="tut3">Splitting</option>
<option value="tut4">Components</option>
<option value="tut5">addng randomness</option>
</optgroup>
<optgroup label="examples">
<option>house</option>
<option>church</option>
<option>castle</option>
<option value="officebuilding">office building</option>
</optgroup>
</select>
</label>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h1>Read this:</h1>
<p>This is a parser, processor and visualiser for CGA Shape Grammars. It currently only implements a very small subset, and is certainly very buggy. It is only really tested in Chrome. </p>
<p>Rotate the 3d view with left-mouse button, pan with the right, zoom with the scroll wheel. Type in the box, see changes in the 3d view. Chose the things from the drop-down menus.</p>
<p>You grammar will be saved in localStorage, so you can come back later!</p>
<p>
Go look at the complete <a href="https://esri.github.io/esri-cityengine-sdk/html/cgaref/cgareference/cgaindex.html">CGA reference</a>.
</p>
<p>
Grab <a href="https://github.com/gromgull/cgajs">the source from GitHub</a>.
</p>
<h2>Implemented bits:</h2>
<ul>
<li>the grammar eval stack</li>
<li>the world/object/pivot coordinate systems/transforms</li>
<li>splitting in x/y/z axis (<code>split</code>)</li>
<li>splitting faces into components (<code>comp</code>)</li>
<li>single level stochastic rules</li>
<li>setting color (<code>color("red")</code>)</li>
<li><code>extrude</code> and <code>taper</code></li>
<li>scale, rotate, translate by absolute/relative amounts<code>s, t, r</code></li>
<li>stack push/pop operator <code>[ .. ]</code></li>
<li>the <code>rand</code> function</li>
<li>inserting primitives</li>
</ul>
<h2>Missing bits I'd like to add</h2>
<ul>
<li>aritmetic <code>scope.width/2</code> / comparisons <code>scope.height>3</code></li>
<li>parameterised rules</li>
<li>builtin math functions</li>
<li>nested splitting blocks</li>
<li>conditional rules</li>
<li>nested stochastic/conditional rules</li>
<li>rotating in other coordinate systems</li>
<li><code>roof*</code></li>
<li><code>envelope, offset, setback, ...</code></li>
</ul>
<h2>Missing bits I have no intention of adding</h2>
<ul>
<li>texture support</li>
<li>inserting predefined obj files</li>
<li>styles</li>
<li>imports</li>
</ul>
<p>
Have fun! If you make anything cool I'd love for you to tell me on twitter: <a href=""https://twitter.com/gromgull">@gromgull</a>
</p>
</div>
</div>
</div>
<script src="build/bundle.js"></script>
</body>
</html>