Vizuální programovací jazyk

Vizuální programovací jazyk Adam Zmrzlý Seminář LaSArIS, 24. 04. 2013

Obsah Motivace Vizuální programování Jazyk Shades Jazyk Tints Interpret a běhové prostředí Shader Vývojové prostředí CodePainter Ukázky vizuálních programů

Motivace Zvýrazňování syntaxe pro různé jazyky v různých IDE V praxi neexistuje jednotná norma stejný jazyk v různých IDE stejné konstrukty jednotlivých jazyků v rámci jednoho IDE

Motivace Java v Netbeans 6+

Motivace JavaScript v Netbeans 6+

Motivace JavaScript v Aptana Studio 3+

Motivace Zvýrazňování syntaxe by mělo pomáhat programátorům pracovat efektivněji subjektivní možnost úpravy nenese žádnou dodatečnou informaci, neukládá se, často ani nelze zkopírovat zvýraznění syntaxe logicky seskupuje jednotlivé tokeny kódu (velmi hrubozrnně) zkusme se na kód se zvýrazněnou syntaxí podívat z jiného úhlu

Motivace

Motivace

Vizuální programování Způsob reprezentace aplikační logiky pomocí grafických elementů Cílem jsou obrázky s přidanou hodnotou Důraz kladen na estetiku výsledných programů Lze použít pro libovolné paradigma Snaha přivést k programování grafiky a designéry, ale neodradit programátory Přináší nové možnosti, využití ale i výzvy

Vizuální programování Nové možnosti: 2D programování a řízení toku výpočtu Nezávislost na konkrétním přirozeném jazyce a národních zvyklostech Platformní nezávislost (u obrázků víceméně zaručena, záleží na interpretu)

Vizuální programování Způsoby využití se liší v závislosti na konkrétním vizuálním jazyce. Možná využití: Chytré profilové obrázky (varianta k Identiconu) Programy reflektující korporátní identitu (vizitky, webové stránky, hlavičkové papíry) Vyplnění hluchých míst v již existujících obrázcích kódem (např. nebe, tráva, ) Steganografie a šifrovací hry

Vizuální programování Výzvy a úskalí: Nový přístup k programování (zatím) neexistují nástroje, komunita strmá křivka učení Pomalejší zpracování intepretace kódu práce s obrazovými daty Vyšší paměťové nároky základní jednotky kódu znak vs. pixel výrazně ovlivněno konkrétním jazykem

Vizuální programování Výzvy a úskalí: Nečitelnost kódu chybí možnost psát komentáře přímo v kódu Obtížné modifikování kódu, pokud modifikace mění velikost obsahu obě tato úskalí musí minimalizovat IDE Jak uživatel pozná, že se jedná o vizuální program a ne pouze o obyčejný obrázek?

Různé přístupy: varianta 1 zdrojový kód zapsán (nakreslen) ve formě obrázku a následně přeložen do spustitelné podoby ztrácí se základní myšlenka vizuálního programování, spíše ezoterický přístup ztráta platformní nezávislosti, nutnost vytvořit minimálně back-endy překladačů pro více operačních systémů a platforem rychlejší běh programů, skrytý zdrojový kód

Různé přístupy: varianta 2 zdrojový kód zapsán jako text a přeložen do podoby interpretovatelného obrázku základní myšlenka vizuálního programování částečně zachována vstupní programovací jazyk může být zcela nový, lze ale použít libovolný již existující nutné řešit mapování konkrétního jazyka do podoby obrázku (anotace, metadata), poměrně složité

Různé přístupy: varianta 2 zdrojový kód zapsán jako text a přeložen do podoby interpretovatelného obrázku musí existovat překladač jazyka do obrázku pro každý takto použitý jazyk musí existovat interpret obrázků (obdoba VM), případně dekompilátor obrázku zpět do původního jazyka a jeho následné zpracování konkrétním interpretem (překladačem), podobně jako v rámci platformy.net

Různé přístupy: varianta 2 zdrojový kód zapsán jako text a přeložen do podoby interpretovatelného obrázku výhodou je možnost použít známé jazyky a již existující nástroje (IDE, profilery, ) nevýhodou je složité mapování kódu do podoby požadovaného obrázku, pomalejší zpracování než v případě první varianty

Různé přístupy: varianta 3 zdrojový kód je nakreslen přímo jako interpretovatelný obrázek plně splňuje myšlenky vizuálního programování vyžaduje vizuální programovací jazyk a interpret přináší prakticky neomezené možnosti použití v závislosti na daném jazyku (zatím) neexistuje žádný takový jazyk ani vývojové nástroje

Různé přístupy: varianta 3 zdrojový kód je nakreslen přímo jako interpretovatelný obrázek podobně jako varianta 2 je pomalejší (samotná režie zpracování obrázku a jeho interpretace) s pomocí vývojových nástrojů lze kombinovat s variantou 2 cílem usnadnění a urychlení vývoje

Jazyk Shades Vytvářený vizuální programovací jazyk Odpovídá výše uvedené variantě 3 IDE umožňuje použít také prvky z varianty 2 Inspirace jazyky Java (včetně nepoužitých prvků z jazyka Oak), Python a JavaScript Nevnucuje konkrétní styl programování podpora jak procedurálního tak objektově orientovaného, včetně kombinací

Jazyk Shades Obsahuje velké množství nových a neotestovaných funkcí spíše výzkumný než produkční jazyk Je vhodný pro interpretaci přímo na koncovém zařízení Dva hlavní cíle možnost napodobit existující obrázek (vhodné pro kresby, loga, symboly, ) vyplnění ploch v obtížně napodobitelných obrázcích (fotografie, složitější grafika, )

Jazyk Shades - struktura kódu Základním prvkem jazyka je odstín reprezentován jedním pixelem sám o sobě nemá žádný význam

Jazyk Shades - struktura kódu Základním prvkem jazyka je odstín reprezentován jedním pixelem sám o sobě nemá žádný význam Odstíny sdružovány do stínovaných bloků souvislé oblasti (čtyřsměrová sousednost) všechny odstíny mají stejný základní barevný tón, liší se pouze světlostí

Jazyk Shades - struktura kódu Odstíny se dělí na tři typy: Základní odstín nenese žádný význam, slouží pouze jako referenční odstín vždy umístěn na souřadnici [0, 0] v rámci daného bloku

Jazyk Shades - struktura kódu Odstíny se dělí na tři typy: Významový odstín základní stavební jednotka kódu vlastní význam určen rozdílem světlosti základního odstínu a konkrétního významového odstínu

Jazyk Shades - struktura kódu Odstíny se dělí na tři typy: Vyplňující odstín nenese žádný význam slouží výhradně k estetickým účelům (vyplnění volných ploch, zarovnání stínovaných bloků do požadovaného obrazce, )

Jazyk Shades - struktura kódu Umístění stínovaných bloků v rámci obrázku nehraje roli Stínované bloky mohou mít libovolný tvar Mohou být dokonce vnořené, ale bez jakékoliv logické vazby (pouze estetický účel) Jediné omezení stínované bloky se stejným tónem základního odstínu spolu nesmí sousedit

Jazyk Shades - barevný model Z důvodu práce se světlostí a barevnými tóny je model RGB nevhodný (navržen primárně pro mapování barev na CRT monitorech) HSL model je ideální pro reprezentaci barev jako kombinace světlosti a tónu (a sytosti) přirozenější model pro vnímání barev lidským okem použit pro interní reprezentaci obrázku

Jazyk Shades - barevná škála RGB model používán jako externí model (využíván většinou grafických formátů) Při převodu může nastat problém se ztrátou informace některé barvy lze v HSL modelu vyjádřit více kombinacemi (typicky achromatické barvy nebo barvy s nízkou sytostí), v RGB však pouze jedinou kombinací nutné omezit použitelnou barevnou škálu

Jazyk Shades - barevná škála Barevná škála byla také omezena z estetických důvodů snaha o eliminaci rušivých a opakujících se artefaktů v obrázku Shades využívá: všech 360 barevných tónů každý tón může nabývat 60 různých úrovní světlosti (rozsah 20-79 % včetně) celkově je možné použít 21 600 odstínů

Jazyk Shades - barevná škála Z estetického hlediska je 21 600 různých odstínů dostatečný počet. Z hlediska vizuální reprezentace dat je však tento počet limitující. Zejména je problémem omezení světlosti: v každém stínovaném bloku je možné rozlišit pouze 60 odstínů pro samotný jazyk není tolik omezující problémem je kódování dat, zejména Unicode textových řetězců

Jazyk Shades - barevná škála Řešením je použití rozšířeného HSLA modelu, který umožňuje specifikovat jednotlivým pixelům také průsvitnost. průsvitnost lze nastavit ve škále od 0 (průhledný pixel) do 255 (neprůsvitný pixel) počet rozlišitelných odstínů v rámci stínovaného bloku zvýšen na 15 360 různé úrovně průsvitnosti slouží k určení typu jednotlivých tokenů v kódu nevýhoda nárůst velikost všech pixelů

Jazyk Shades - vlastnosti Z pohledu konvenčních programovacích jazyků je Shades: interpretovaný dynamicky typovaný imperativní (budoucí rozšíření o funkcionální aspekty programování)

Jazyk Shades - vlastnosti Jednotlivé obrázky mohou obsahovat více tříd i funkcí (obdoba modulu v Pythonu). Členění programu odpovídá Javě (balíková struktura, importy, ) Argumenty funkcí vždy předávány hodnotou (kopírování hodnoty skalárního typu a kopírování reference u složeného typu), dereferencování probíhá automaticky (Java)

Jazyk Shades - API Díky provázanosti s platformou Java využití některých prvků z Java core a utils API (práce s řetězci, I/O, ) Webové API uplatnění zejména při vytváření programů odrážející korporátní identitu Obrázkové API umožňuje lehce generovat konkrétní Shades obrázky (profilové ikony, ) šifrovací hry, výuka kryptografie

Jazyk Tints Doprovodný jazyk pro Shades Jedná se o část jazyka Shades, kterou lze vyjádřit jako text v principu konvenční programovací jazyk nepodporuje aspekty 2D programování (chystané rozšíření o některé aspekty pomocí anotací) Cílem je usnadnění tvorby vizuálních programů v IDE

Jazyk Tints Používán také ve specifikaci jazyka Shades pro pojmenování klíčových slov Klíčová slova jsou primárně v angličtině, ve finální verzi ale bude možné používat lokalizované varianty (podpora nezávislosti na určitém přirozeném jazyce) Ve své podstatě pouze mapování jmen na jednotlivé konstrukty jazyka Shades

Shader Interpret a zároveň běhové prostředí pro jazyk Shades. V prvních verzích jazyka samostatná aplikace běžící nad JVM Po ustálení vývoje nahrazení vlastního běhového prostředí samotnou JVM (využití bytecodové instrukce invokedynamic)

Shader výběr platformy Při výběru platformy pro implementaci interpretu a běhového prostředí bylo zvažováno několik možností. Výběr byl ovlivněn podporou hlavních cílů jazyka Shades, zejména pak platformní nezávislostí. Z tohoto důvodu byla zamítnuta varianta nativní aplikace

Shader výběr platformy V užším výběru 3 platformy:.net rozsáhlé API velká provázanost s rodinou OS Windows s pomocí rámce Mono dostupné také pro Unix-like operační systémy

Shader výběr platformy V užším výběru 3 platformy: JavaScript + webový prohlížeč téměř 100% platformně nezávislé rozdílné chování JavaScriptu v různých prohlížečích, na různých OS poměrně omezené API, i přes standardizaci nekonzistentní chování

Shader výběr platformy V užším výběru 3 platformy: Java velká míra platformní nezávislosti rozsáhlé API open source řešení relativně konzistentní napříč operačními systémy a HW platformami menší rozšířenost na koncových zařízeních

Shader interpret Snaha o maximální využití výhod objektové orientace při návrhu interpretu Zrychlení zpracování vizuálních programů pomocí paralelismu jak na vnitřní, tak vnější úrovni Minimalizace paměťových nároků na reprezentaci gramatiky (opět s využitím objektové orientace, zejména dědičnosti)

Shader běhové prostředí Podobně jako u interpretu snaha o maximální využití výhod objektové orientace Práce s pamětí přenechána JVM otestované a optimalizované algoritmy Programy jsou spuštěny až po zpracování interpretem (včetně všech odkazovaných programů)

CodePainter IDE Zatímco u konvenčního programování lze používat běžný textový editor (byť je to neefektivní a náchylné k chybám), u vizuálního programování je použití speciálních vývojových prostředí víceméně nutnost.

CodePainter IDE Pro tvorbu vizuálních programů je samozřejmě možné použít libovolný grafický editor, ale přináší to s sebou vysokou pravděpodobnost vzniku chyby. Tuto chybu může navíc způsobit samotný grafický editor.

CodePainter IDE Pro tvorbu vizuálních programů je samozřejmě možné použít libovolný grafický editor, ale přináší to s sebou vysokou pravděpodobnost vzniku chyby. Tuto chybu může navíc způsobit samotný grafický editor. Ukázka: Jak určitě nepostupovat :)

CodePainter IDE Ani sofistikovanější grafické editory nejsou příliš vhodné pro vizuální programování. Ukázka: Ani drahé grafické editory nemusejí stačit :)

CodePainter IDE I pro jednoduché vizuální programy je vhodné použít specializované vývojové prostředí. Nejjednodušší programy se skládají z desítek pixelů a jejich manuální tvorba by zabrala netriviální množství času. CodePainter představuje kombinaci běžného vývojového prostředí a grafického editoru I přes značné usnadnění výběru správných pixelů je manuální tvorba programů časově náročná

CodePainter IDE Řešením je využít doprovodný jazyk Tints Kód zapsaný v jazyce Tints je transformován na blok odstínů, který je poté nakreslen na požadované pozici a v tvaru, který vyhovuje uživateli Jedná se o princip dávkového zpracování Dávky lze uložit pro opakované použití Dávky se také automaticky ukládají spolu s celým sezením při uzavření IDE

CodePainter IDE Představení CodePainteru Ukázka: Hello, LaSArIS!

Ukázky Ukázka: Hello, LaSArIS! s využitím korporátní identity

Ukázky Ukázka: I/O a jednoduchá kalkulačka, příklad vyplnění míst v existujícím obrázku

Závěr Vizuální zpracování dat a programování má budoucnost.

Děkuji za pozornost