diff --git a/index.html b/index.html index 5d3c4e0..a94b44b 100644 --- a/index.html +++ b/index.html @@ -142,6 +142,13 @@

ReDrawMe audio extension

Integrace přehrávání hudby do kreslicí aplikace za účelem animace obrázku. + + + project image +

StableMap

+
Ondřej Sakala
+
Interaktivní generativní videomapping.
+
diff --git a/members/sakalond/calib_1.jpeg b/members/sakalond/calib_1.jpeg new file mode 100644 index 0000000..cddb9c4 Binary files /dev/null and b/members/sakalond/calib_1.jpeg differ diff --git a/members/sakalond/calib_2.jpeg b/members/sakalond/calib_2.jpeg new file mode 100644 index 0000000..68c2309 Binary files /dev/null and b/members/sakalond/calib_2.jpeg differ diff --git a/members/sakalond/calib_3.jpeg b/members/sakalond/calib_3.jpeg new file mode 100644 index 0000000..e0928cd Binary files /dev/null and b/members/sakalond/calib_3.jpeg differ diff --git a/members/sakalond/calib_4.jpeg b/members/sakalond/calib_4.jpeg new file mode 100644 index 0000000..d9594c3 Binary files /dev/null and b/members/sakalond/calib_4.jpeg differ diff --git a/members/sakalond/extracted_view.jpeg b/members/sakalond/extracted_view.jpeg new file mode 100644 index 0000000..f8fca03 Binary files /dev/null and b/members/sakalond/extracted_view.jpeg differ diff --git a/members/sakalond/homography.jpeg b/members/sakalond/homography.jpeg new file mode 100644 index 0000000..43fe764 Binary files /dev/null and b/members/sakalond/homography.jpeg differ diff --git a/members/sakalond/house.mp4 b/members/sakalond/house.mp4 new file mode 100644 index 0000000..a489b5a Binary files /dev/null and b/members/sakalond/house.mp4 differ diff --git a/members/sakalond/house_1.jpeg b/members/sakalond/house_1.jpeg new file mode 100644 index 0000000..57a7656 Binary files /dev/null and b/members/sakalond/house_1.jpeg differ diff --git a/members/sakalond/house_2.jpeg b/members/sakalond/house_2.jpeg new file mode 100644 index 0000000..8e5d1f6 Binary files /dev/null and b/members/sakalond/house_2.jpeg differ diff --git a/members/sakalond/house_3.jpeg b/members/sakalond/house_3.jpeg new file mode 100644 index 0000000..0315f69 Binary files /dev/null and b/members/sakalond/house_3.jpeg differ diff --git a/members/sakalond/index.html b/members/sakalond/index.html index 4c54af9..18702d3 100644 --- a/members/sakalond/index.html +++ b/members/sakalond/index.html @@ -61,6 +61,100 @@ font-size: 0.9em; border: 1px solid #444; } + + /* Pipeline Visualization Styles */ + .pipeline-container { + display: flex; + align-items: flex-end; + justify-content: center; + gap: 1.5rem; + margin: 2rem 0; + flex-wrap: nowrap; + /* overflow-x removed to avoid ugly scrollbars */ + } + + .photo-pile { + position: relative; + width: 90px; + /* Increased height to match neighboring portrait images ensuring alignment */ + height: 140px; + flex-shrink: 0; + cursor: pointer; + margin-bottom: 0rem; + overflow: visible; + } + + .photo-pile img { + position: absolute; + width: 50%; + height: auto; + border: 1px solid #eee; + box-shadow: 1px 1px 3px rgba(0,0,0,0.6); + transition: transform 0.3s ease, z-index 0s, scale 0.3s; + background: #000; + transform-origin: center center; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + .photo-pile:hover img { + /* On hover, slightly spread them apart or just scale the one being hovered if I could target it, + but CSS hover on parent affects all. Let's just make the hover effect scale the top one + or maybe just scale the whole pile? The previous rule was specific to img on hover. + Let's keep it simple: hover brings the specific image to front if possible, but we can't do that easily without JS or complex selectors. + Just scale on hover for now. + */ + } + + .photo-pile img:hover { + z-index: 100 !important; + /* Recalculate transform on hover to maintain centering + scale */ + transform: translate(-50%, -50%) scale(1.5) rotate(0deg) !important; + box-shadow: 0 5px 15px rgba(0,0,0,0.8); + } + + .pipeline-step { + display: flex; + flex-direction: column; + align-items: center; + width: 90px; + text-align: center; + } + + .pipeline-step > img { + width: 100%; + border: 2px solid #555; + border-radius: 4px; + margin-bottom: -2rem; + } + + .pipeline-step span { + font-size: 0.8em; + color: #aaa; + position: relative; + z-index: 200; + margin-top: 3rem; + display: block; + } + + .pipeline-arrow { + font-size: 1.5rem; + color: #666; + font-weight: bold; + flex-shrink: 0; + margin-bottom: -0.3rem; + } + + @media (max-width: 800px) { + .pipeline-container { + flex-direction: column; + gap: 2rem; + } + .pipeline-arrow { + transform: rotate(90deg); + } + } @@ -141,6 +235,121 @@

Obrázky vygenerované pomocí různých promptů

Prompt: "historical building, medieval castle"
Prompt: "large building, drawing, gloomy"
+

Výsledek: StableMap

+

Projekt je úspěšně dokončen. Aplikace StableMap umožňuje interaktivní generativní videomapping na libovolné objekty, od interiérů po celé budovy.

+ +

Popis aplikace

+

Aplikace využívá sofistikový proces pro vytváření projekcí v reálném čase. Celý proces je poháněn moderními AI modely a počítačovým viděním.

+ + +

Průběh vývoje

+ +

1. Počátky: Homografie a interiérové projekce

+

Prvotní fáze vývoje se soustředila na základní mapping v interiéru pomocí manuální homografie. Testoval jsem projekci na jednoduché plochy a ladil generativní pipeline.

+
+
+ Ukázka interiérové projekce a homografie +
Testování mappingu v interiéru
+
+
+
+ Visualizace 1 + Visualizace 2 + Visualizace 3 + Visualizace 4 +
+
První generované vizualizace
+
+
+ +

2. Pokročilá kalibrace a exteriér (Muzeum Prahy)

+

Implementace Gray Code kalibrace umožnila přesun na členité fasády. Níže uvedená vizualizace ukazuje proces pipeline při projekci na budovu Muzea Prahy.

+ +
+ +
+
+ Kalibrace + Kalibrace + Kalibrace + Kalibrace + Kalibrace +
+ 1. Kalibrace +
+ +
+ + +
+ Pohled projektoru + 2. Extrakce pohledu +
+ +
+ + +
+ Depth Map + 3. Hloubková mapa +
+ +
+ + +
+
+ Výsledek + Výsledek + Výsledek + Výsledek + Výsledek +
+ 4. Projekce +
+
+ +

3. Další experimenty

+

Rodinný dům: Systém byl testován také na rodinném domě. Zde je ukázka tří vygenerovaných projekcí v různých stylech a video s přechodovými efekty.

+
+
+ Vizualizace domu 1 +
+
+ Vizualizace domu 2 +
+
+ Vizualizace domu 3 +
+
+ +
+ +

Ukázka přechodových efektů na rodinném domě

+
+ +

Muzeum Prahy: Ukázka z slavnostního otevření Muzea Prahy. (zrychleno)

+
+ +

Záznam z projekce na Muzeum Prahy

+

Kontakt

Email: sakalaondrej@gmail.com

diff --git a/members/sakalond/midas_depth.jpeg b/members/sakalond/midas_depth.jpeg new file mode 100644 index 0000000..7ebc7b7 Binary files /dev/null and b/members/sakalond/midas_depth.jpeg differ diff --git a/members/sakalond/museum.mp4 b/members/sakalond/museum.mp4 new file mode 100644 index 0000000..064d358 Binary files /dev/null and b/members/sakalond/museum.mp4 differ diff --git a/members/sakalond/result_1.jpeg b/members/sakalond/result_1.jpeg new file mode 100644 index 0000000..aaf8ce9 Binary files /dev/null and b/members/sakalond/result_1.jpeg differ diff --git a/members/sakalond/result_2.jpeg b/members/sakalond/result_2.jpeg new file mode 100644 index 0000000..3606730 Binary files /dev/null and b/members/sakalond/result_2.jpeg differ diff --git a/members/sakalond/result_3.jpeg b/members/sakalond/result_3.jpeg new file mode 100644 index 0000000..b3488bf Binary files /dev/null and b/members/sakalond/result_3.jpeg differ diff --git a/members/sakalond/result_4.jpeg b/members/sakalond/result_4.jpeg new file mode 100644 index 0000000..952445f Binary files /dev/null and b/members/sakalond/result_4.jpeg differ diff --git a/members/sakalond/wall_1.jpeg b/members/sakalond/wall_1.jpeg new file mode 100644 index 0000000..53a2d38 Binary files /dev/null and b/members/sakalond/wall_1.jpeg differ diff --git a/members/sakalond/wall_2.jpeg b/members/sakalond/wall_2.jpeg new file mode 100644 index 0000000..9d4eda2 Binary files /dev/null and b/members/sakalond/wall_2.jpeg differ diff --git a/members/sakalond/wall_3.jpeg b/members/sakalond/wall_3.jpeg new file mode 100644 index 0000000..9c69f38 Binary files /dev/null and b/members/sakalond/wall_3.jpeg differ diff --git a/members/sakalond/wall_4.jpeg b/members/sakalond/wall_4.jpeg new file mode 100644 index 0000000..c07a0cd Binary files /dev/null and b/members/sakalond/wall_4.jpeg differ diff --git a/projects/stablemap/index.html b/projects/stablemap/index.html new file mode 100644 index 0000000..ce66399 --- /dev/null +++ b/projects/stablemap/index.html @@ -0,0 +1,244 @@ + + + + + + + + StableMap - NI-CCC + + + + + +
+ +

Creative Coding and Computational Art Course

+
+
+ Logo NI-CCC +
+
+
+

StableMap

+

Ondřej Sakala; projekt předmětu NI-CCC

+ +

Projekt je úspěšně dokončen. Aplikace StableMap umožňuje interaktivní generativní videomapping na libovolné objekty, od interiérů po celé budovy.

+ +

Popis aplikace

+

Aplikace využívá sofistikový proces pro vytváření projekcí v reálném čase. Celý proces je poháněn moderními AI modely a počítačovým viděním.

+ + +

Průběh vývoje

+ +

1. Počátky: Homografie a interiérové projekce

+

Prvotní fáze vývoje se soustředila na základní mapping v interiéru pomocí manuální homografie. Testoval jsem projekci na jednoduché plochy a ladil generativní pipeline.

+
+
+ Ukázka interiérové projekce a homografie +
Testování mappingu v interiéru
+
+
+
+ Visualizace 1 + Visualizace 2 + Visualizace 3 + Visualizace 4 +
+
První generované vizualizace
+
+
+ +

2. Pokročilá kalibrace a exteriér (Muzeum Prahy)

+

Implementace Gray Code kalibrace umožnila přesun na členité fasády. Níže uvedená vizualizace ukazuje proces pipeline při projekci na budovu Muzea Prahy.

+ +
+ +
+
+ Kalibrace + Kalibrace + Kalibrace + Kalibrace + Kalibrace +
+ 1. Kalibrace +
+ +
+ + +
+ Pohled projektoru + 2. Extrakce pohledu +
+ +
+ + +
+ Depth Map + 3. Hloubková mapa +
+ +
+ + +
+
+ Výsledek + Výsledek + Výsledek + Výsledek + Výsledek +
+ 4. Projekce +
+
+ +

3. Další experimenty

+

Rodinný dům: Systém byl testován také na rodinném domě. Zde je ukázka tří vygenerovaných projekcí v různých stylech a video s přechodovými efekty.

+
+
+ Vizualizace domu 1 +
+
+ Vizualizace domu 2 +
+
+ Vizualizace domu 3 +
+
+ +
+ +

Ukázka přechodových efektů na rodinném domě

+
+ +

Muzeum Prahy: Ukázka z slavnostního otevření Muzea Prahy. (zrychleno)

+
+ +

Záznam z projekce na Muzeum Prahy

+
+ +
+ + + \ No newline at end of file diff --git a/projects/stablemap/stablemap.gif b/projects/stablemap/stablemap.gif new file mode 100644 index 0000000..7fe7cbc Binary files /dev/null and b/projects/stablemap/stablemap.gif differ