somars-ucsc.github.io/simulations.html at main · Slugbotics/somars-ucsc.github.io · GitHub

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Slugbotics | SOMARS – Simulations</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Navbar -->
  <header class="navbar">
    <div class="nav-container">
      <div class="nav-logo">
        <span class="slug-icon">🚁</span>
        <span class="nav-title">Slugbotics | SOMARS</span>
      </div>

      <nav class="nav-links">
        <a href="index.html">Home</a>

        <div class="nav-item has-dropdown">
          <a href="team.html" class="nav-link-with-dropdown active">Team</a>
          <div class="dropdown">
            <a href="mechanical.html">Mechanical</a>
            <a href="embedded.html">Embedded Systems</a>
            <a href="perception.html">Perception</a>
            <a href="simulations.html">Simulations</a>
          </div>
        </div>

        <a href="sponsors.html">Sponsors</a>
        <a href="index.html#contact">Contact</a>
      </nav>

      <button class="nav-toggle" id="navToggle">☰</button>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-emoji-bg">🌐</div>
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>Simulations</h1>
      <p>Using Gazebo to visualize, validate, and simulate autonomous flight before real-world testing.</p>
    </div>
  </section>

  <!-- Who we are -->
  <section id="about" class="section-split">
    <div class="split-text">
      <h2>Who We Are</h2>
      <p>
        The Simulations subteam builds the virtual world where our autonomous
        drone learns to fly. Using Gazebo, we create realistic 3D environments
        that replicate competition arenas, terrain, and obstacles — allowing
        the entire autonomy stack to be tested safely before any real flight.
      </p>
      <p>
        Our work dramatically reduces the risk of crashes and dramatically
        speeds up iteration: bugs in the control stack can be caught and fixed
        in simulation at near-zero cost.
      </p>
    </div>
    <div class="split-image">
      <div class="split-emoji">
        🌐
        <span class="emoji-label">[ Gazebo simulation screenshot — TO BE FINISHED LATER ]</span>
      </div>
    </div>
  </section>

  <!-- What we work on -->
  <section id="work" class="section alt">
    <h2>What We Work On</h2>
    <div class="card-grid" style="margin-top:1.25rem;">
      <div class="info-card">
        <h3>🏟️ Competition World Models</h3>
        <p style="font-size:0.95rem; color:#c4dcc4; margin-top:0.35rem;">
          Building accurate Gazebo models of the SUAS and C-UASC competition
          arenas — including waypoint fields, obstacle configurations, and
          target placement zones — so the team can rehearse full mission runs.
        </p>
      </div>
      <div class="info-card">
        <h3>✈️ Drone Model &amp; Physics</h3>
        <p style="font-size:0.95rem; color:#c4dcc4; margin-top:0.35rem;">
          Creating a high-fidelity URDF / SDF model of our physical drone with
          accurate mass, inertia, motor thrust curves, and aerodynamic drag so
          simulated behavior matches real flight.
        </p>
      </div>
      <div class="info-card">
        <h3>🔁 Hardware-in-the-Loop (HIL)</h3>
        <p style="font-size:0.95rem; color:#c4dcc4; margin-top:0.35rem;">
          Setting up Software-in-the-Loop (SITL) and Hardware-in-the-Loop (HIL)
          pipelines with ArduPilot / PX4 so the flight controller firmware runs
          against the simulated plant in real time.
        </p>
        <span class="placeholder-note">TO BE FINISHED LATER — detail current SITL setup</span>
      </div>
      <div class="info-card">
        <h3>📐 Flight Path Validation</h3>
        <p style="font-size:0.95rem; color:#c4dcc4; margin-top:0.35rem;">
          Validating planned flight paths and waypoint sequences in simulation
          before they are uploaded to the real vehicle, checking for obstacle
          conflicts and mission timing.
        </p>
      </div>
    </div>
  </section>

  <!-- Simulation environment -->
  <section id="environment" class="section">
    <h2>Simulation Environment</h2>
    <p>Our primary simulation stack:</p>
    <ul class="skills-list" style="margin-top:0.75rem;">
      <li><strong>Simulator:</strong> Gazebo (Harmonic / Classic)</li>
      <li><strong>Middleware:</strong> ROS 2</li>
      <li><strong>Flight stack integration:</strong> ArduPilot SITL / PX4 SITL via MAVROS</li>
      <li><strong>Visualization:</strong> RViz 2, Gazebo GUI</li>
      <li><strong>Drone model format:</strong> SDF / URDF</li>
      <li><strong>Operating system:</strong> Ubuntu 22.04</li>
    </ul>
    <span class="placeholder-note" style="margin-top:1rem; display:block;">TO BE FINISHED LATER — add links to sim repo and setup instructions</span>

    <div class="stack-diagram-placeholder" style="margin-top:1.5rem;">
      🗺️
      <span class="emoji-label">[ Gazebo world screenshot or simulation diagram — TO BE FINISHED LATER ]</span>
    </div>
  </section>

  <!-- Leads -->
  <section id="leads" class="section alt">
    <h2>Leads</h2>
    <div class="member-grid leads-grid">
      <div class="member-card lead-card">
        <div class="member-avatar-emoji">🌐</div>
        <h3 class="placeholder-note" style="display:block; margin:0 auto 0.25rem;">TO BE FINISHED LATER</h3>
        <p class="member-major">Major</p>
        <p class="member-role">Year · Simulations Lead</p>
      </div>
    </div>
  </section>

  <!-- Members -->
  <section id="members" class="section">
    <h2>Meet the Simulations Team</h2>
    <p><span class="placeholder-note">TO BE FINISHED LATER — add team member cards</span></p>
    <div class="member-grid" style="margin-top:1.25rem;">
      <div class="member-card">
        <div class="member-avatar-emoji">👤</div>
        <h3>Member Name</h3>
        <p class="member-major">Computer Science</p>
        <p class="member-role">Focus: World modeling</p>
      </div>
      <div class="member-card">
        <div class="member-avatar-emoji">👤</div>
        <h3>Member Name</h3>
        <p class="member-major">Computer Engineering</p>
        <p class="member-role">Focus: SITL / HIL</p>
      </div>
      <div class="member-card">
        <div class="member-avatar-emoji">👤</div>
        <h3>Member Name</h3>
        <p class="member-major">Any major</p>
        <p class="member-role">Focus: Flight path testing</p>
      </div>
    </div>
  </section>

  <!-- Meetings -->
  <section id="meetings" class="section alt">
    <h2>Meeting Times</h2>
    <div class="info-card wide">
      <p>Simulations meets for world building, SITL testing, and integration with the autonomy stack.</p>
      <div class="meeting-grid">
        <div class="meeting-slot">
          <h3>Sim Dev Session</h3>
          <p><span class="placeholder-note">TO BE FINISHED LATER</span></p>
          <p class="card-meta">Location: SlugWorks / Remote</p>
        </div>
        <div class="meeting-slot">
          <h3>Integration Testing</h3>
          <p><span class="placeholder-note">TO BE FINISHED LATER</span></p>
          <p class="card-meta">Location: SlugWorks BE-49</p>
        </div>
      </div>
      <p class="card-meta" style="margin-top:0.75rem;">
        Familiarity with Linux is helpful but not required — we'll get you set up.
      </p>
    </div>
  </section>

  <script src="script.js"></script>
</body>
</html>