-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
154 lines (135 loc) · 9.58 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
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Aaron Kanzer - Building Game Engines - Final Project</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
<noscript><link rel="stylesheet" href="noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<h1>Visualizing Spatial Partitioning</h1>
<p>A Final Project by Aaron Kanzer<br />
CS 4850 / 5850 - Northeastern University - Building Game Engines - Spring 2019</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Video Demo</a></li>
<li><a href="#first">Project Screenshots</a></li>
<li><a href="#second">Further Comments</a></li>
<li><a href="#third">Project Structure</a></li>
<li><a href="#fourth">Spatial Partitioning</a></li>
<li><a href="#fifth">Post Mortem Review</a></li>
<li><a href="./html/index.html" target="_blank">CLICK HERE FOR CODE DOCUMENTATION</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content" style="text-align: center">
<header>
<h2 style="border-style: solid"><b><a target="_blank" href="https://github.com/aaronkanzer/Spatial-Partition-Visualizer">CLICK HERE TO FOR GITHUB REPOSITORY</a></b></h2>
<br>
<h2 style="border-style: solid"><b><a href="SP-Visualizer-FINAL.zip" download="SP-Visualization - Aaron Kanzer">CLICK HERE TO DOWNLOAD BINARY FILE</a></b></h2>
<br>
<p><b>How to compile and run if Binary does not work (please compile on MacOS -- (SDL Libraries (SDL, SDL Mixer, SDL image, SDL TTF) may need to be installed locally))</b> <ul style="list-style-type: none;"><li>1. Clone Github Repository locally</li> <li>2. Navigate to ../Project/SP-Viz/temp directory</li> <li>3. Enter "python build.py".</li> <li>4. Run "SP-Visualizer" locally"</li></ul><hr>
<h2>Video Demo</h2>
</header>
<iframe style= "display: block;
margin-left: auto;
margin-right: auto;" width="560" height="315" src="https://www.youtube.com/embed/4rWz3QXzrjA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
<h2>Project Screenshots</h2>
</header>
<ul class="features">
<li>
<span><img width="300" height="300" src="playAsteroids.png"></span>
<h3><b>Play the classic Asteroids game</b></h3>
<p>Using the classic game Asteroids as a way of displaying how spatial partitioning works</p>
</li>
<li>
<span><img width="300" height="300" src="demoScreenshot.png"></span>
<h3><b>Utilize the Demo tool</b></h3>
<p>Visualize a 2D grid which tracks the number of objects occupying certain areas of the game space</p>
</li>
<li>
<span><img width="300" height="300" src="editorScreenshot.png"></span>
<h3><b>Edit the Scene</b></h3>
<p>Drag and drop each individual asteroid to set up the level as you please</p>
</li>
</ul>
</section>
<!-- Second Section -->
<section id="second" class="main special">
<header class="major">
<h2>Further Comments on Each Component of the Tool</h2>
<h3><b>Explaining each component of the tool</b></h3>
</header>
<p><b>Asteroids Game: </b>This is a simple implementation of the classic Asteroids game. The user can achieve a high score. The game ends once a collision occurs between the main character and any of the opponents.</p>
<br>
<p><b>Spatial Partitioning Demo: </b> This component is used to display how many game objects occupy certain areas of the game scene. It renders the numbers in each square in the grid dynamically as objects pass through. The green grid that surrounds the main character is meant to represent a range in which it could possibly interact with the current scene. A key element of spatial partitioning is emphasizing elements closer to the main character -- this helps with overall performance.</p>
<br>
<p><b>Editor Component: </b> This part of the project allows the user to drag and drop the location of any of the opponents. Both of the other components will then operate with the opponents in their new given locations.</p>
</section>
<section id="third" class="main special">
<header class="major">
<h2>Project Structure</h2>
</header>
<p>The following diagram (while not an exact UML diagram) illustrates the important aspects and components of the project. The project is heavily dependent on multiple SDL Libraries, and is mainly centered around the Tool.cpp file.</p>
<div class="content" style="text-align: center">
<span><img width="460" height="450" src="projectStructure.png"></span>
</div>
</section>
<section id="fourth" class="main special">
<header class="major">
<h2>Explanation of Spatial Partitioning</h2>
<h3><b>What is it? Why does it matter? How is this demo applicable?</b></h3>
</header>
<p>Spatial partitioning is a method used in games to efficiently store and evaluate data based on their locations. It can greatly assist with performance, as more emphasis can be put on objects closer to the main focal point of the game, giving the user a better experience.<br>
<br>In games, spatial partitioning is implemented using specific data structures, such as grids (2D arrays), quadtrees (nodes with 4 children), or binary space partitioning trees (BSPs operate with a nearest-neighbor type behavior). By having the location of objects organized in a well-structured manner, updates and events can be prioritized in which are closer to the main character. In general, this can minimize the complexity of updating the game, as travesing relevant objects can occur faster.
<br><br>My demo uses a grid-like data structure to show how many objects are located within a certain index at a certain time. The main character has an arbitrary sized green box around it, symbolizing the potential surrounding distance that could be relevant at a given time as the character moves. Since this visualization is able to record the given number of objects in a location at a time, the code could be modified and used within a game to further implement aspects of spatial partitioning.
</p>
</section>
<section id="fifth" class="main special">
<header class="major">
<h2>Post Mortem Review</h2>
<h3><b>A Reflection On My Final Project</b></h3>
</header>
<p>Creating this tool was a fun and educational experience; however, there was still a decent amount of work I wish I could've implemented.<br><br>One important part of spatial partitioning is the emphasis of sub-division of the space. My visualization uniformly divides the space, whereas, a more accurate depiction would subdivide the spaces closer to the main character into even smaller spaces. Also, I would've liked to implement the demo with a few different data structures that are used. Perhaps trying some form of a search tree, rather than just a grid, to render parts of the window would've been interesting to implement.
<br><br>
I also wished that I could've implemented some form of dynamic loading (e.g. loading by chunks) in my demo. I think it could've been interesting to have a toggle view, where the only elements rendered in the scene were those that had been visited by the main character -- rather than the whole scene being rendered at once.<br><br>I definitely faced a lot of challenges with the timeline of this assignment as well. Since I was fairly interested in this topic, I did decide to leave a team of 4 with only ~10 days remaining until the deadline. While I felt a bit more agile as a one-person team, I did feel somewhat pressured by the deadline while working by myself. Also, I did feel that there are aspects of my submission that are lacking -- especially the size of the Tool.cpp file, and the lack of smaller functions, and files, that could've made the code more readable.<br><br>Overall, I am happy with what I have made, and I hope it conveys in an understandable manner the importance of spatial partitioning.<br>
</p>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p><a target="_blank" href="https://html5up.net/stellar">Credit: Website Template utilized from HTML5Up. I used the Stellar template</a></p>
</footer>
</div>
<!-- Scripts -->
<script src="jquery.min.js"></script>
<script src="jquery.scrollex.min.js"></script>
<script src="jquery.scrolly.min.js"></script>
<script src="browser.min.js"></script>
<script src="breakpoints.min.js"></script>
<script src="util.js"></script>
<script src="main.js"></script>
</body>
</html>