Vytvoř program v HTML/JavaScript, který nakreslí čtyřstěn s náhodně zvolenými vrcholy a náhodně zvolenými barvami stěn tak, aby jej bylo možno pomocí myši natáčet, pro pozorování pod různými úhly.
Tento prompt byl zadán následujícím systémům (odkaz spustí program, vytvořený na základě promptu):
Jak bylo možné při prohlížení zjistit, LLM ChatGPT, Claude Code a Gemini fungují nesprávně - při některých pozorovacích úhlech zobrazí část nebo celou neviditelnou (odvrácenou) stěnu.
Copilot promeškal příležitost podat vadné řešení tím, že program pro kreslení čtyřstěnu nalezl hotový v knihovně THREE.js, která je vybudována nad WebGL (Web Graphics Library). Jeho řešení, které ale nejspíše bylo vytvořeno lidmi, je proto perfektní (Copilot se přitom předváděl - stěny tělesa jsou provedeny i s různými odlesky).
Je třeba uvést, že ChatGPT, Clause a Gemini knihovny THREE.js a WebGL také znají, ale zřejmě jim úloha přišla dostatečně lehká na přímé řešení - a selhaly.
Proto zde podávám přístup, kdy si uživatel s dobrou znalostí algoritmů napíše program s pomocí GenAI sám a to tak, že vůbec nemusí znát programovací jazyk, ve kterém bude program vytvořen.
Podstatou této metody je, že lidský programátor rozloží program do kompozice založené na tak jednoduchých a standardních funkcích, popsaných v přirozeném jazyce, že AI agent při jejich vytváření zcela určitě neudělá chybu, ale souhru funkcí v programu naplánuje sám, aby v tom AI nenadělala zmatek.
K našem konkrétním případě ty jednoduché funkce jsou: rotace 3D prostoru kolem osy X nebo Y o daný úhel, promítnutí 3D prostoru do 2D prostoru zapomenutím souřadnice Z a rozhodnutí, zda vrcholy trojúhelníka v rovině v daném pořadí představují obíhání kolem obvodu trojúhelníka ve směru nebo proti směru hodinových ručiček.
Poslední úkol se snadno vyřeší pomocí vektorového součinu orientovaných hran trojúhelníka (což ale GenAI systémům nebylo navrženo, přišly na to bez problémů samy, zase nejsou tak hloupé, jak by se mohlo z kreslení čtyřstěnu zdát). Podobněji je tato otázka i s využitím obrázku popsána v odkazu níže.
Problém s nenakreslením nebo zakrytím odvrácené stěny nebo stěn čtyřstěnu nebo obecněji jakékoli triangulované plochy v 3D se obvykle řeší jedním z následujících přístupů:
1. Painter's algorithm (malířův algoritmus) nebo také Z-buffer: nakreslí se všechny stěny, ale v pořadí vzdáleností od pozorovatele - nejdříva nejvzdálenější, nakonec ty blízké. Odvrácené stěny jsou pozorovateli vzdálenější a proto jsou pak zakryty těmi viditelnými. Problémem ale může být, jak určit vzdálenost stěny od pozorovatele - vzdálenost k nejbližšmu či nejvzdálenějšímu vrcholu nebo střední vzdálenost? Tady asi je příčina selhání GPT, Claude a Gemini, patrně zvolily špatnou definici vzdálenosti.
2. Pokud trojúhelník v 3D prostoru vyrobíme z papísu, má dvě strany, které mohou mít různé barvy. Jednu stranu můžeme nazvat líc, druhou rub (angličtina grafických knihoven používá front a back).
Jestliže si označíme vrcholy trojúhelníka v 3D písmeny (třeba) u,v,w, nastavíme trojúhelník do jisté polohy a pak se na něj podíváme nebo jej promítneme do roviny, rozeznáme rub a líc podle toho, zda vrcholy u,v,w v tomto pořadí jdou ve směru nebo proti směru hodinových ručiček (viz obrázek v odkazu dole).
Směr po nebo proti hodinovým ručičkám se pozná podle vektorového součinu vektorů orientovaných hran uv a uw. To jsem ale AI agentům neříkal, věděly to samy (některé se zmi(novaly i o determinantu, kterám se ten vektorový součin počítá), takže to zde nebude podrobněji rozebírat.
V textu Popis promptu pro kreslení čtyřstěnu je popsáno, co napsat, aby AI vytvořila HTML-JavaScript program pro kreslení. Svůj výsledek si pak můžete porovnat s tím, co AI dala mně a je to k vidění zde .
Program je rozdělen do 5 souborů:
Main.html je spouštěcí soubor, který také obsahuje direktivu pro zahrnutí dalších 4 souborů.
Listener.js naslouchá událostem myši a na jejich základě volá odpovídající funkce v souboru Tester.js.
Painter.js má funkci, jejíž zavolání na obrazovce nakreslí vyplněný trojúhelník. (snadno by se rozšířil i pro kreslení dalších geometrických obrazců nebo textu).
Tyto tři soubory jsou to, co se nazývá "boilerplate code" a označuje "části programu, které musí být na mnoha místech zahrnuty s malými nebo žádnými úpravami, aby vykonávaly běžné úlohy, jako jsou počáteční konfigurace, importy nebo standardní HTML struktury. Slouží jako nezbytný znovupoužitelný základ, který omezuje opakované psaní kódu, zajišťuje konzistenci a umožňuje vývojářům soustředit se na jedinečnou logiku projektu" (jak mi řekl CHatGPT). U takových funkcí stačí jen naznačit a AI soubory napíše naprosto spolehlivě bez dalšího vysvětlování.
Soubor Observer.js obsahuje funkce, které umí oročit 3D prostor o úhel alpha podle osy X, o úhel phi podle osy Y, promítnout bod do 2D zapomenutím Z-souřadnice a hlavně rozpoznat zda po těchto rotacích vidíme líc nebo rub trojúhelníka.
Nakonec soubor Tester.js si označí stěny čtyřstěnu tak, aby vnější strany byly líc a pak nakreslí jen ty stěny, které vidíme z lícové strany (odvrácené stěny, pokud bychom je viděli skrz těleso, by byly vidět z rubové strany. Pak ještě Tester.js přijímá informace o událostech myši a snadno pochopitelným způsobem podle nich nastavuje úhly alpha a phi observeru.
Co ze zde popsaného 5-souborového promptu vytvořili AI agenti je vidět zde:
Anthropic Claude Code jsem zatím nezkoušel