-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathRLGL.html
More file actions
117 lines (90 loc) · 6.4 KB
/
RLGL.html
File metadata and controls
117 lines (90 loc) · 6.4 KB
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
<!DOCTYPE HTML>
<!--
Massively by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Davin Landry -RLGL</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">Davin Landry</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Projects</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="About.html">About Me</a></li>
</ul>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/davinlandry/" class="icon brands fa-linkedin"><span class="label">Linkedin</span></a></li>
<li><a href="https://github.com/dlandry97" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
<h1>Redlight Greenlight Game<br />
</h1>
</header>
<span class="image fit"><img src="assets/RLGL/RLGLEric.gif" alt="" /></span>
<!-- Text stuff -->
<!-- <h2>Text</h2>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
Finally, this is a <a href="#">link</a>.</p> -->
<h2>overview</h2>
<p>For this project I created the computer vision system and the interactive game mechanics for redlight greenlight. To develop this game into a project, I chose to replace the role of the seeker with a robot. This robot would watch the players, call out the redlight/greenlight phases, eliminate players, and keep score with no assistance from humans.</p>
<h3>Game Mechanics</h3>
<p> Redlight Greenlight is the kids game where a seeker player tries to catch the other players moving while they try to cross a field. When the seeker calls "greenlight", the seeker covers their eyes while the other players are able to move across the field to reach the other side. Once the seeker calls "redlight", they uncover their eyes and the other players must freeze in place to not get caught moving by the seeker. If a player is caught moving during the redlight phase, they are eliminated from the game by the seeker. </p>
<p>In my project, the players would start at a distance from the robot and try to get close to the robot without being eliminated. If they are caught moving during the wrong phase, they would lose one of three lives. The game would end when the players lose all lives or they reach the robot.</p>
<h3>Computer Vision</h3>
<p>I used the python libraries OpenCV, ROS, and pyrealsense2 to create the image processing pipeline for tracking the players. I used color recognition to identify the contours of the players and track their movements. Movement detection was determined by a change in position of the centroid of the contoured area beyond a certain threshold. The player's distance from the goal was detected by utilizing the Intel Realsense D435i's depth perception camera. </p>
<span class="image fit"><img src="assets/RLGL/playertracking.png" alt="" /></span>
<h3>Integration</h3>
<p>To combine the computer vision and game algorithm together, I used the ROS python package. I made a node to manage the image pipeline and send the data to another node that manages the game mechanics and score. The game node would use state machines and timers to manage the game phases and data triggers to keep track of the score. There is an additional node to manage the sound ques to prevent process halting issues.
</p>
<h2>Video Presentation</h2>
<iframe width="720" height="480" src="assets/RLGL/presentation.mp4" title="Youtube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>Player Elimination</h3>
<iframe width="560" height="315" src="assets/RLGL/elimination.mp4" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>Full Game</h3>
<iframe width="560" height="315" src="assets/RLGL/Rolling.mp4" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<header id="header">
<a href="https://github.com/dlandry97/Redlight_Greenlight" class="logo">Github Link</a>
</header>
</section>
</footer>
<!-- Copyright -->
<div id="copyright">
<ul><li>© Davin Landry</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li></ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>