Skip to content

Commit 3babd60

Browse files
goyalchirag2222goyalchirag2222
committed
Merge branch 'dev' into testing
2 parents bf2ffc2 + 7638914 commit 3babd60

File tree

7 files changed

+160
-168
lines changed

7 files changed

+160
-168
lines changed

‎experiment/procedure.md‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
11
## Step-by-Step Procedure
22

3-
## Step 1: Interface and Controls
3+
### Step 1: Interface and Controls
44

5-
1. **Interface Overview**:
65
- Familiarize yourself with the simulation interface: control panel on the left and main workspace.
76
- Note the checkboxes for grid display and lock options.
87
- Adjust the number of frames for animation in the settings.
98

10-
## Step 2: Model Structure
9+
### Step 2: Model Structure
1110

12-
2. **Understand the Model**:
1311
- Identify parts by color coding: Shoulder (Blue), Arm (Orange), Elbow (Pink), Fore-arm (Green), Wrist (Brown), Palm (Cyan).
1412
- Note the hierarchical levels: Shoulder (Level 1), Elbow (Level 2), Wrist (Level 3).
1513

16-
## Step 3: Transformation Basics
14+
### Step 3: Transformation Basics
1715

18-
3. **Manipulate Sliders**:
1916
- Use the sliders for Shoulder, Elbow, and Wrist levels to initiate transformations.
2017
- Observe how changes in each level affect the connected parts in the hierarchy.
2118
- Monitor the transformation matrix to understand the numerical impact of your adjustments.
2219

23-
## Step 4: Hands-On Exploration
20+
### Step 4: Hands-On Exploration
2421

25-
4. **Interactive Controls**:
2622
- Experiment with mouse controls: left click (translation), right click (rotation), scroll wheel (zoom).
2723
- Test touch controls on mobile devices for translation and rotation (if applicable).
2824
- Toggle lock options and grid displays to observe their effects on movement and visualization.
2925

30-
## Step 5: Observations and Conclusion
26+
### Step 5: Observations and Conclusion
3127

32-
5. **Explore and Learn**:
3328
- Make observations on how hierarchical structures influence object manipulation and animation.
3429
- Summarize your findings on how transformations cascade through hierarchical levels.
3530
- Reflect on the practical applications of hierarchical transformations in 3D modeling and animation.

‎experiment/references.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
-[https://ocw.mit.edu/courses/6-837-computer-graphics-fall-2012/2b1e96254c4dc35b2f5cb1d48714c6d4_MIT6_837F12_Lec04.pdf](https://ocw.mit.edu/courses/6-837-computer-graphics-fall-2012/2b1e96254c4dc35b2f5cb1d48714c6d4_MIT6_837F12_Lec04.pdf)
1+
-[MIT Lectures](https://ocw.mit.edu/courses/6-837-computer-graphics-fall-2012/2b1e96254c4dc35b2f5cb1d48714c6d4_MIT6_837F12_Lec04.pdf)
2+
3+
-[University of Texas, Computer Graphics Lectures](https://www.cs.utexas.edu/~fussell/courses/cs384g-fall2011/lectures/lecture13-Hierarchical_modeling.pdf)

‎experiment/simulation/css/main.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,3 +453,25 @@
453453

454454
overflow-y: auto; /* Enable scrollbar if content overflows */
455455
}
456+
457+
458+
459+
#apply-translation-btn {
460+
background: linear-gradient(to right, #2196F3, #1976D2); /* Blue gradient */
461+
color: white; /* White text */
462+
padding: 10px 20px; /* Padding */
463+
border: none; /* Remove border */
464+
cursor: pointer; /* Cursor style */
465+
border-radius: 5px; /* Rounded corners */
466+
text-align: center; /* Center text */
467+
text-decoration: none; /* Remove underline */
468+
display: inline-block; /* Display as block */
469+
font-size: 16px; /* Font size */
470+
transition-duration: 0.4s; /* Smooth transition */
471+
}
472+
473+
/* Hover effect */
474+
#apply-translation-btn:hover {
475+
background: linear-gradient(to right, #1976D2, #0D47A1); /* Darker blue gradient */
476+
color: white; /* White text */
477+
}

‎experiment/simulation/index.html‎

Lines changed: 103 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,15 @@
6464
<strong style="font-size: 19px;">🛠️Translation Vector</strong>: Defines how much to move the shape
6565
along the <strong>X</strong>,
6666
<strong>Y</strong>, and <strong>Z</strong> axes in 3D space.
67+
<ul style="list-style-type: disc; padding-left: 20px;">
68+
<li>
69+
<strong style="color:#1976D2">Apply Translation:</strong> Click to apply the specified
70+
translation factors to
71+
the current
72+
shapes.
6773

74+
</li>
75+
</ul>
6876
</li>
6977

7078

@@ -80,57 +88,86 @@
8088
<strong style="font-size: 19px;">🔍 Transformation Matrix</strong>:
8189
<ul style="list-style-type: disc; padding-left: 20px;">
8290
<li>Monitor the values of the transformation matrix while adjusting the slider.</li>
83-
<li>The transformation matrix multiplies the point’s homogeneous coordinates, resulting in new coordinates for
91+
<li>The transformation matrix multiplies the point’s homogeneous coordinates, resulting in new
92+
coordinates for
8493
the translation effect.</li>
94+
<li>Note: This transformation matrix exclusively represents translation and does not include any
95+
rotation
96+
factors.</li>
8597
</ul>
8698
</li>
8799

88-
<li class="instr-font">
89-
<strong style="font-size: 19px;">🔍 Model Hierarchy and Transformation Instructions</strong>:
90-
<ul style="list-style-type: disc; padding-left: 20px;">
91-
<li><strong>Model Parts and Colors:</strong></li>
92-
<ul style="list-style-type: circle; padding-left: 20px;">
93-
<li><span style="color: blue;">Blue</span>: Represents the Shoulder. This is the highest level (Level 1) of
94-
the model hierarchy.</li>
95-
<li><span style="color: rgb(199, 140, 31);">Orange</span>: Represents the Arm, which is a child of the Shoulder.</li>
96-
<li><span style="color: rgb(244, 14, 140);">Pink</span>: Represents the Elbow, also a child of the Shoulder.</li>
97-
<li><span style="color: rgb(8, 76, 8);">Green</span>: Represents the Fore-arm, a child of the Elbow.</li>
98-
<li><span style="color: rgb(182, 22, 22);">Brown</span>: Represents the Wrist, another child of the Elbow.</li>
99-
<li><span style="color: rgb(10, 152, 152);">Cyan</span>: Represents the Palm, which is a child of the Wrist.</li>
100-
</ul>
101-
<li><strong>Hierarchical Structure:</strong></li>
102-
<ul style="list-style-type: circle; padding-left: 20px;">
103-
<li><strong>Level 1 (Shoulder):</strong> This level contains the Arm and Elbow.</li>
104-
<li><strong>Level 2 (Elbow):</strong> Contains the Fore-arm and Wrist.</li>
105-
<li><strong>Level 3 (Wrist):</strong> Contains the Palm.</li>
106-
</ul>
107-
<li><strong>Transformation and Animation:</strong></li>
108-
<ul style="list-style-type: circle; padding-left: 20px;">
109-
<li>When adjusting sliders:</li>
110-
<ul style="list-style-type: disc; padding-left: 20px;">
111-
<li>Slider for <span style="color: blue;">Shoulder (Level 1)</span> affects all parts of the model
112-
(Levels 1, 2, and 3). Any transformation applied here cascades down to all child elements.</li>
113-
<li>Slider for <span style="color: rgb(238, 18, 205);">Elbow (Level 2)</span> affects Level 2 and Level 3 parts.
114-
Transformations here affect the Fore-arm and Wrist, as well as their child elements like the Palm.
115-
</li>
116-
<li>Slider for <span style="color: #A52A2A;">Wrist (Level 3)</span> specifically affects the Palm.
117-
Transformations at this level only impact the Palm and not higher-level parts.</li>
100+
101+
<li class="instr-font">
102+
<strong style="font-size: 19px;">🔍 Model Hierarchy and Transformation Instructions</strong>:
103+
<ul style="list-style-type: disc; padding-left: 20px;">
104+
<li><strong>Model Parts and Colors:</strong></li>
105+
<ul style="list-style-type: circle; padding-left: 20px;">
106+
<li><span style="color: blue;">Blue</span>: Represents the Shoulder. This is the highest
107+
level (Level 1) of
108+
the model hierarchy.</li>
109+
<li><span style="color: rgb(199, 140, 31);">Orange</span>: Represents the Arm, which is a
110+
child of the Shoulder.</li>
111+
<li><span style="color: rgb(244, 14, 140);">Pink</span>: Represents the Elbow, also a child
112+
of the Shoulder.</li>
113+
<li><span style="color: rgb(8, 76, 8);">Green</span>: Represents the Fore-arm, a child of
114+
the Elbow.</li>
115+
<li><span style="color: rgb(182, 22, 22);">Brown</span>: Represents the Wrist, another child
116+
of the Elbow.</li>
117+
<li><span style="color: rgb(10, 152, 152);">Cyan</span>: Represents the Palm, which is a
118+
child of the Wrist.</li>
119+
</ul>
120+
<li><strong>Hierarchical Structure:</strong></li>
121+
<ul style="list-style-type: circle; padding-left: 20px;">
122+
<li><strong>Level 1 (Shoulder):</strong> This level contains the Arm and Elbow.</li>
123+
<li><strong>Level 2 (Elbow):</strong> Contains the Fore-arm and Wrist.</li>
124+
<li><strong>Level 3 (Wrist):</strong> Contains the Palm.</li>
125+
</ul>
126+
<li><strong>Transformation and Animation:</strong></li>
127+
<ul style="list-style-type: circle; padding-left: 20px;">
128+
<li>When adjusting sliders:</li>
129+
<ul style="list-style-type: disc; padding-left: 20px;">
130+
<li>Slider for <span style="color: blue;">Shoulder (Level 1)</span> affects all parts of
131+
the model
132+
(Levels 1, 2, and 3). Any transformation applied here cascades down to all child
133+
elements.
134+
<ul style="list-style-type: circle; padding-left: 20px;">
135+
136+
<li>
137+
<strong style="color: rgb(31, 12, 176);">Note:</strong> Rotating the shoulder affects the
138+
entire model. Subsequent translations will
139+
adjust according to the updated coordinate system after rotation, impacting
140+
the model's positioning and orientation.
141+
</li>
142+
</ul>
143+
</li>
144+
<li>Slider for <span style="color: rgb(238, 18, 205);">Elbow (Level 2)</span> affects
145+
Level 2 and Level 3 parts.
146+
Transformations here affect the Fore-arm and Wrist, as well as their child elements
147+
like the Palm.
148+
</li>
149+
<li>Slider for <span style="color: #A52A2A;">Wrist (Level 3)</span> specifically affects
150+
the Palm.
151+
Transformations at this level only impact the Palm and not higher-level parts.</li>
152+
</ul>
153+
</ul>
154+
<li><strong>Observing Transformations:</strong></li>
155+
<ul style="list-style-type: circle; padding-left: 20px;">
156+
<li>Understand how hierarchical transformations work: changes at a parent level affect all
157+
child elements,
158+
demonstrating the cascading effect of transformations.</li>
118159
</ul>
119160
</ul>
120-
<li><strong>Observing Transformations:</strong></li>
121-
<ul style="list-style-type: circle; padding-left: 20px;">
122-
<li>Understand how hierarchical transformations work: changes at a parent level affect all child elements,
123-
demonstrating the cascading effect of transformations.</li>
124-
</ul>
125-
</ul>
126-
</li>
161+
</li>
127162

128163

129164
<li class="instr-font">
130-
<strong style="font-size: 19px;">🎚️ Slider Control</strong>: Adjust translation along the X, Y, and Z axes using
165+
<strong style="font-size: 19px;">🎚️ Slider Control</strong>: Adjust translation along the X, Y, and
166+
Z axes using
131167
the sliders.
132168
<ul style="list-style-type: disc; padding-left: 20px;">
133-
<li>The sliders at the bottom control <strong>translation</strong> along the X, Y, and Z axes.</li>
169+
<li>The sliders at the bottom control <strong>translation</strong> along the X, Y, and Z axes.
170+
</li>
134171
</ul>
135172
</li>
136173

@@ -165,8 +202,8 @@
165202
</section>
166203

167204
<main class="columns is-centered is-variable is-1-mobile is-flex is-flex-wrap-wrap workspace">
168-
<aside id="left" class="column is-2-desktop is-5-tablet is-5-mobile apparatus" >
169-
<div class="v-datalist-container" style="max-height: 100%; overflow-y: auto;">
205+
<aside id="left" class="column is-2-desktop is-5-tablet is-5-mobile apparatus">
206+
<div class="v-datalist-container" style="max-height: 100%; overflow-y: auto;">
170207
<div class="v-datalist-row">
171208
<div class="v-datalist-title">Display Settings</div>
172209

@@ -212,17 +249,22 @@
212249
name="noofframes" min="1" step="1" value="1000">
213250
</div>
214251

215-
216-
</div>
217-
<div class="v-datalist-row" id="top-border">
218-
<label for="quantity" style="font-size: 20px;font-weight: bold;">Translation Vector</label></br>
219-
<span style="font-size: 20px;">x</span>:<input style="width: 25%" class="input is-responsive fields" type="number"
220-
id="x-value" name="x-value" step=".1" value="4">
221-
<span style="font-size: 20px;">y</span>:<input style="width: 25%" class="input is-responsive fields" type="number"
222-
id="y-value" name="y-value" step=".1" value="2">
223-
<span style="font-size: 20px;">z</span>:<input style="width: 25%" class="input is-responsive fields" type="number"
224-
id="z-value" name="z-value" step=".1" value="-3">
252+
225253
</div>
254+
<div class="v-datalist-title" id="top-border">Translation Vector</div>
255+
<form id="translation-form">
256+
<label for="value-x">x</label>
257+
<input type="number" id="value-x" name="value-x" step="0.01" value="2"
258+
class="input is-responsive is-small" style="width: 25%">
259+
<label for="value-y">y</label>
260+
<input type="number" id="value-y" name="value-y" step="0.01" value="1"
261+
class="input is-responsive is-small" style="width: 25%">
262+
<label for="value-z">z</label>
263+
<input type="number" id="value-z" name="value-z" step="0.01" value="0"
264+
class="input is-responsive is-small" style="width: 25%">
265+
<button type="submit" id="apply-translation-btn" class="v-button is-responsive is-small">Apply
266+
Translation</button>
267+
</form>
226268

227269
<!-- Reset Button -->
228270
<div style="padding-top: 5px;">
@@ -243,7 +285,7 @@
243285
</div>
244286
</div>
245287

246-
<div id="observations" class="column has-text-centered is-2-desktop is-5-tablet is-5-mobile right" >
288+
<div id="observations" class="column has-text-centered is-2-desktop is-5-tablet is-5-mobile right">
247289
<div class="v-datalist-container" style="max-height: 100%; overflow-y: auto;">
248290

249291
<!-- Transformation Matrix -->
@@ -292,24 +334,27 @@
292334
</div>
293335
</div>
294336
</div>
295-
337+
296338
<div class="v-datalist-row is-responsive is-small" style="padding-top: 100px;">
297339
<div class="col-md-4"> <!-- Adjust the column size based on your layout needs -->
298340
Level 1 (Shoulder)
299-
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="shoulder" value="0" type="range">
341+
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="shoulder"
342+
value="0" type="range">
300343
</div>
301344
<div class="col-md-4"> <!-- Adjust the column size based on your layout needs -->
302345
Level 2 (Elbow)
303-
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="elbow" value="0" type="range">
346+
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="elbow" value="0"
347+
type="range">
304348
</div>
305349
<div class="col-md-4"> <!-- Adjust the column size based on your layout needs -->
306350
Level 3 (Wrist)
307-
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="wrist" value="0" type="range">
351+
<input class="v-slider-full is-centered column exptwoslider is-fullwidth" id="wrist" value="0"
352+
type="range">
308353
</div>
309354
</div>
310355

311356

312-
357+
313358
</div>
314359
</div>
315360

0 commit comments

Comments
 (0)