Naprogramujeme si život v Petriho misce a nebezpečnou bakterii Živěae coli

Zatímco se odborná komunita i konspirační teoretikové už déle než rok dohadují, kde se přesně vzala rodina variant a mutací viru SARS-CoV-2, odkud pochází životu nebezpečná bakterie Živěae coli, víme velmi dobře.

Prozkoumejte další projekty ze seriálu Pojďme programovat elektroniku

Bakterie nepochází ani z Wuchanského institutu virologie, ani z tamní tržnice, a dokonce jsme ji nenašli ani na stěru z nádržky našeho redakčního kávovaru. Vysoce turbulentní Živěae coli, jejíž DNA náhodně mutuje po každém třetím dělení, jsme zrodili v digitální Petriho misce.

Dnes si ji společně naprogramujeme v běžném Javascriptu, HTML a pro samotnou vizualizaci a zrychlené bujení života na maličkém prostoru využijeme také grafickou knihovnu Raphaël, která nám usnadní práci s vektorovou webovou grafikou SVG.

Podívejte se na naši Petriho misku v akci:

Naše Petriho miska bude velmi jednoduchý případ autonomního systému – tzv. celulárního automatu, který česká Wikipedie popisuje jako: „souhrnné označení pro určitý typ fyzikálního modelu reálné situace, ať již v podobě reálného přístroje či mnohem častěji počítačového algoritmu (programu). Slouží k časové i prostorové diskrétní (nespojité) idealizaci (ideální modelaci) fyzikálních systémů, kde hodnoty veličin nabývají pouze diskrétních hodnot v průběhu času.“

Pokud z odstavečku výše nejste ani o píď chytřejší, náš automat jednoduše vnímejte jako prachsprostou simulaci, které na počátku stanovíme několik vstupních parametrů a pravidla. Jakmile ji spustíme zobrazením ve webovém prohlížeči, začne si žít vlastním životem.

Nejprve vytvoříme Petriho misku

Petriho misku bude reprezentovat obdélník na webové stránce s rozměry 800 × 800 pixelů. V běžném HTML kódu si pro něj vytvoříme kontejner DIV:

<div id="petrihoMiska"></div>

V Javascriptu jej pak pomocí knihovny Raphaël proměníme v kreslící plátno SVG a nakreslíme do něj šedé pozadí – vektorový obdélník s výplní a se stejnými rozměry jako celé plátno:

let petrihoMiska = Raphael("petrihoMiska", 800, 800);
let pozadi = petrihoMiska.rect(0, 0, 800, 800).attr("fill", "#aaaaaa");

Kdybychom nyní nad tento šedý obdélník chtěli doprostřed nakreslit vektorový kruh vyplněný červenou barvou a s poloměrem 100 pixelů, do kódu vložíme další řádek ve znění:

petrihoMiska.circle(400, 400, 100).attr("fill", "#FF0000");

Pomocí objektu petrihoMiska, kterým ovládáme knihovnu Raphaël pro kreslení vektorové grafiky, a jeho metody circle vytvoříme kruh se středem na souřadnicích 400,400 a s poloměrem 100. Nový kruh je SVG objekt, ke kterému můžeme dále přistupovat a měnit jeho parametry jako u každého jiného objektu HTML.

Šedé SVG plátno s rozměry 800 × 800 pixelů a uprostřed rudý kruh s poloměrem 100 pixelů