Skip to content

Add taganliu page #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LiudmilaTa wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add taganliu page #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
12d9cf7
Add taganliu page
Oct 19, 2025
7019360
Change project idea
Oct 27, 2025
9b2fd5b
Added information about the project and a link to the code on GitHub.
Dec 16, 2025
945013d
Adding a project page Motion controller
Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions members/taganliu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/page.css">
<link rel="stylesheet" href="taganliu-page-styles.css" />
<!-- <link rel="stylesheet" href="../../page.css"> -->
<script src="/img.js"></script>
<title>NI-CCC</title>
</head>

<body>
<header>
<a href="/">
<h1>Creative Coding and Computational Art Course</h1>
</a>
<div>
<img src="/logo/logo_nic.png" alt="Logo NI-CCC">
</div>
</header>
<section id="main">
<!-- DO NOT CHANGE STUFF ABOVE IF YOU DONT KNOW WHAT YOU ARE DOING -->
<!-- here is place for your stuff, see examples bellow -->

<h1>Liudmila Taganashkina</h1>
<p>
Ahoj! Jmenuji se <b>Liudmila</b> a jsem studentkou <b>Fakulty informačních technologií ČVUT</b>,
oboru <b>Webové inženýrství</b>.
Předtím jsem absolvovala bakalářské a magisterské studium na
<b>mechanicko-matematické fakultě</b>, se zaměřením na <b>matematiku a počítačové vědy</b>.
</p>

<p>
V současnosti se zabývám problematikou <b>zvětšení rozlišení obrázků pomocí neuronových sítí</b>
, kde analyzuji a implementuji model <b>VDSR</b>
optimalizovaný pro webové aplikace. Zajímám se o <b>umělou inteligenci, počítačové vidění</b> a
jejich propojení s <b>interaktivní vizualizací</b> a <b>webovými technologiemi</b>.
</p>

<h2>Co mě baví a inspiruje</h2>
<div class="interests-grid">
<div class="interest-card">
<div class="interest-icon">🧠</div>
<h3>Umělá inteligence</h3>
<p>Experimentování s neuronovými sítěmi a jejich kreativní využití.</p>
</div>
<div class="interest-card">
<div class="interest-icon">🎨</div>
<h3>Vizuální umění</h3>
<p>Propojení technologií s estetikou, interaktivní vizualizace a digitální design.</p>
</div>
<div class="interest-card">
<div class="interest-icon">💻</div>
<h3>Webové technologie</h3>
<p>Moderní frontend, interaktivní rozhraní a datové vizualizace.</p>
</div>
<div class="interest-card">
<div class="interest-icon">📸</div>
<h3>Počítačové vidění</h3>
<p>Analýza obrazu, detekce pohybu, rozpoznávání gest.</p>
</div>
</div>

<h2>Nápad na projekt</h2>
<p>
<b>Motion Controller</b> - experimentální systém, který umožňuje
<b>ovládat počítač pomocí pohybů rukou</b> místo klávesnice.
</p>

<p>
Kamera detekuje klíčové body postavy - například <b>nos, zápěstí a boky</b> -
a podle jejich polohy rozpoznává směr pohybu: <b>doleva, doprava, nahoru nebo dolů</b>.
Tyto pohyby pak odpovídají virtuálnímu stisku příslušné klávesy.
</p>

<p>
Cílem projektu je <b>nahradit tradiční klávesnici přirozeným ovládáním tělem</b>
a experimentovat s <b>novými způsoby interakce mezi člověkem a počítačem</b>.
</p>

<h2>Výsledek</h2>
<p>
Vytvořena desktopová aplikace pro Windows, která pomocí
<b>OpenCV a MediaPipe</b> detekuje klíčové body těla v reálném čase
a transformuje pohyby na vstup klávesnice a myši.
</p>

<p>
Levá ruka ovládá WASD pohyb,
pravá ruka řídí kurzor myši a klikání, tělo slouží pro skok a další akce.
</p>

<p>
Odkaz na projekt: <a href="../../projects/Motion_Controller/">Motion Controller</a><br>
</p>

<h2>Kontakt</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</section>

<script>
makeImgsClickable();
</script>
</body>

</html>
65 changes: 65 additions & 0 deletions members/taganliu/taganliu-page-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.interests-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.2rem;
margin: 1.5rem 0;
}

.interest-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid #333;
border-radius: 10px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
}

.interest-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-3px);
}

.interest-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.8;
}

.interest-card h3 {
margin: 0.4rem 0;
color: #fff;
font-weight: 500;
font-size: 1.05rem;
}

.interest-card p {
color: #aaa;
font-size: 0.9rem;
line-height: 1.3;
}

.image-row {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}

.image-row figure {
flex: 1;
max-width: 400px;
margin: 0;
}

.image-row img {
width: 100%;
border-radius: 8px;
}

.image-row figcaption {
font-size: 0.85em;
color: #aaa;
margin-top: 0.5em;
text-align: center;
}
Binary file added projects/Motion_Controller/assets/instructions.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Motion_Controller/assets/loading_screen.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Motion_Controller/assets/zones_1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/Motion_Controller/assets/zones_2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 140 additions & 0 deletions projects/Motion_Controller/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="cs">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/page.css">
<script src="/img.js"></script>
<title>Motion Controller - NI-CCC</title>
</head>

<body>
<header>
<a href="/">
<h1>Creative Coding and Computational Art Course</h1>
</a>
<div>
<img src="/logo/logo_nic.png" alt="Logo NI-CCC">
</div>
</header>
<section id="main">
<!-- DO NOT CHANGE STUFF ABOVE IF YOU DONT KNOW WHAT YOU ARE DOING -->
<!-- here is place for your stuff, see examples bellow -->

<h1>Motion Controller - Gestové ovládání her</h1>

<h2>Autoři:</h2>
<a href="../../members/taganliu/">Liudmila Taganashkina</a><br>
<a href="../../members/efimovla/">Vladimir Efimov</a>
<br>

<div style="margin: 30px 100px;">
<img src="assets/loading_screen.png" alt="Loading screen" style="max-width: 100%;">
<i>Úvodní obrazovka</i>
</div>

<h2>O projektu</h2>

<p><b>Motion Controller</b> je aplikace pro bezkontaktní ovládání počítačových her pomocí pohybů těla. Využívá běžnou webkameru a technologie strojového učení k detekci pózy uživatele v reálném čase, kterou převádí na herní vstupy (klávesnice a myš).

<h2>Odkazy</h2>
<p><b>GitHub:</b> <a href="https://github.com/LiudmilaTa/Motion-Controller" target="_blank">https://github.com/LiudmilaTa/Motion-Controller</a>

<h2>Realizovaná myšlenka</h2>
<p>Původní nápad byl vytvořit <b>univerzální herní ovladač bez speciálního hardwaru</b>. Cílem bylo umožnit hráčům ovládat hry pouze pomocí pohybů těla před webkamerou, čímž se stane hraní interaktivnějším a dostupnějším.

<h2>Co jsme implementovali</h2>

<p><b>Detekce pózy v reálném čase:</b>
<ul>
<li>Využití <b>MediaPipe</b> od Google pro detekci klíčových bodů těla
<li>Zpracování 30 snímků za sekundu s latencí &lt; 50 ms
<li>Normalizované souřadnice nezávislé na rozlišení kamery
</ul>

<p><b>Mapování pohybů na vstupy:</b>
<ul>
<li><b>Levá ruka:</b> WASD ovládání (pohyb ve hrách)
<li><b>Pravá ruka:</b> Ovládání kurzoru myši + detekce kliknutí
<li><b>Tělo:</b> Skok (mezerník) při zvednutí ruky
</ul>

<div style="margin: 30px 100px;">
<img src="assets/instructions.png" alt="Instructions" style="max-width: 100%;">
</div>

<p><b>Vyhlazování a stabilizace:</b>
<ul>
<li>Implementace <b>dead zone</b> pro eliminaci třesu
<li>Vyhlazování pohybu myši (smoothing algoritmus)
<li>Prahové hodnoty pro prevenci falešných vstupů
</ul>

<div style="margin: 30px 100px;">
<img src="assets/zones_1.png" alt="Control Zones" style="max-width: 70%;">
<br>
</div>

<div style="margin: 30px 100px;">
<img src="assets/zones_2.png" alt="Control Zones" style="max-width: 70%;">
<br>
</div>

<p><b>Vizualizace v reálném čase:</b>
<ul>
<li>Vykreslení ovládacích zón
<li>Real-time feedback o stavu detekce
</ul>

<h2>Technologie</h2>
<ul>
<li><b>Python 3.8</b> - Hlavní programovací jazyk
<li><b>MediaPipe 0.10.8</b> - ML framework pro detekci pózy
<li><b>OpenCV 4.8.1</b> - Zpracování video streamu
<li><b>NumPy 1.23.5</b> - Matematické operace
<li><b>PyDirectInput 1.0.4</b> - Simulace herních vstupů
<li><b>PyAutoGUI 0.9.54</b> - Univerzální ovládání myši/klávesnice
</ul>

<h2>Aktuální stav projektu</h2>

<p>Projekt je ve <b>funkčním stavu</b> a obsahuje všechny plánované základní funkce:

<p><b>Plně funkční:</b>
<ul>
<li>Detekce pózy pomocí webkamery
<li>Real-time mapování pohybů na vstupy
<li>Ovládání WASD a myši
<li>Vizuální feedback
</ul>

<p><b>Známé problémy:</b>
<ul>
<li>Vyžaduje dobré osvětlení pro přesnou detekci
<li>Vyšší CPU náročnost (40-60%)
<li>První spuštění může trvat dele (3-5 minut (načítání ML modelů)), je to normální.
</ul>

<h2>Možná budoucí vylepšení</h2>
<ul>
<li><b>Kalibrace:</b> Individuální nastavení pro různé uživatele
<li><b>GPU akcelerace:</b> Využití CUDA pro lepší výkon
<li><b>Více gest:</b> Detekce komplexnějších pohybů rukou
<li><b>Profily:</b> Různá mapování pro různé typy her
<li><b>Konfigurátor:</b> GUI pro nastavení citlivosti
</ul>

<h2>Závěr</h2>
<p>Motion Controller úspěšně demonstruje možnosti využití počítačového vidění a strojového učení pro herní ovládání. Projekt dosáhl funkčního stavu s real-time detekcí a responsivním ovládáním. Díky standalone distribuci je aplikace snadno sdílitelná a použitelná bez technických znalostí.

<footer></footer>

</section>

<script>
makeImgsClickable();
</script>
</body>

</html>