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