Rajzoljunk a számítógéppel! :-)

Kultúránk részben vizuális. Sőt, mondhatjuk, hogy a szöveg és hang mellett a kultúránk egyik legfontosabb és legalapvetőbb része a látvány, a kép.

. Ábra: Barlangrajz a 3 fivér barlangból. Jobbra egy zenélő íjon játszó sámán – forrás: Wikimedia Commons

Az alaptechnika szerinti 2D számítógépes rajzolásnak rengeteg, egymással átjárható eszköze van, közösen – például megint csak a Google Drive-on a Google rajzokkal – vagy egyénileg is alkothatók és később akár meg is oszthatók rajzok. A legprofibb rajzprogram, amit általánosan használhatunk az Inkscape, de, amint írtuk, ezek teljesen átjárhatók.

A rajzokon objektumokat hozunk létre, rétegeken lehet egyszerűeket is, de görbék/ívek segítségével tetszőleges nyílt vagy zárt útvonalakat is létre lehet hozni, ezt a technikát kell először megtanulni.

A rajzok előnye, mentése, megosztása

A rajzok animációs és minden szempontból is sokkal rugalmasabbak – persze másra is jók – mint a fényképek. Tetszőlegesen nagyíthatók is, mivel „csupán” útvonalak létrehozásához szükséges csomópontokat írnak le szerencsés módon pici szöveges kódú SVG fájlokban. Az online készített rajz megosztása a szokásos módon történik, az offline készítetteké pedig szintén lehetséges például a szokásos platformokon: az OpenClipart.org -on vagy a Wikimedia Commonson és így tovább.

Kitöltés és körvonal

A nyílt vagy zárt útvonalakból létrehozott objektumok színezésében is számos lehetőség van, az egyik a körvonal.

Rendkívül látványos viszont a kitöltés színek beállítása, amely történhet palettából, de sokkal izgalmasabb lehetőségekkel egyénileg is! :) :

Tanuljuk meg a számítógépes színkeverést! :)

A kijelző vörös (R), zöld (G) és kék (B) fényeket kever össze hozzáadó módon, ennek a logikának a mentén a legegyszerűbb színkeverés a 4 byte-os RGBA, ahol az A az alfa-csatornát, az adott szín fedését jelenti.

Az RGBA színkeverésnél tehát mind a három fény összetevő tízes számrendszerben 0 és 255 közti értéket vehet fel (16-os számrendszerben 00 és FF közöttit).

Rétegek

Amint írtuk, az objektumok, és objektumcsoportok egymás feletti rétegeken jönnek létre. A sorrendiség bármikor változtatható.

Kijelölés, objektumcsoportok és lehetőségek az átalakításra

A 4 fő eszköztípus közül (kijelölés, toll/görbék/ívek, előre elkészített alakzatok, szöveg) az eszköztáron a mutatókurzor szerű, balra ferdén (általában fehér) fel-nyilat mutató kijelölő eszköz gomb az egyik legfontosabb. Bármelyik objektumhoz ezzel lehet általánosan (például mozgatáshoz, átméretezéshez), vagy még egy kattintás után például forgatáshoz hozzányúlni.

Az objektumokat össze lehet fogni („egyesíteni”) csoportokba úgy, hogy a kijelöléshez a szokásos Ctrl/Shift segédbillentyűket is, majd a megfelelő gyorsbillentyű-kombinációt vagy menüpontot használjuk. Ez segít abban, hogy akár együttesen is át tudjuk alakítani őket, például elmozgatni, elforgatni.

Inkscape: csomópontok szerkesztése

A profi rajzprogramokban a csomópontok és ezáltal az útvonalak görbéi utólag is szerkeszthetők. Az eszközöket a bal oldalon találjuk, a csomópont eszközzel egy objektumra rákattintva csomópontjai, görbéi szerkeszthetővé válnak.

A dokumentum-kód hekkelése, betekintés a módosításhoz

Az SVG-rajzok kódja XML-formátumú elemeket ír le <nyitó> és </záró> címkével, <!-- → megjegyzésekkel, akárcsak egy weblap, amibe természetesen be is ágyazható és animálható. A fő elem maga az <svg>, vagyis maga a rajzdokumentum különféle tulajdonságaival. Nézzük egy példát, hogy is néz ki a kódban a legfontosabb részlet, ha például csak egy pontos kört rajzolunk! Ez megtekinthető az Inkscape XML-szerkesztőben is:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- az xmlns rész elhagyható egy weblapban -->

<circle cx="36" cy="36" r="12" fill="red" /> <!-- egyesített nyitó-zárótag forma -->

</svg>

Nézzük meg közelről ugyanezt megjegyzések nélkül, mindössze ez a pár karakter az egész kód:

<svg xmlns="http://www.w3.org/2000/svg">

<circle cx="36" cy="36" r="12" fill="red" />

</svg>

Vagyis van maga az <svg> elemünk, aminek adhatunk attribútumokat, például méretet, és azon belül egy szép, piros kör.

Animálás

Az SVG rajz a feladat összetettsége szerint 3 technikával is animálható, közöttük van a szokásos lépcsőzetes stílusmegadás lehetősége (CSS) és az alapszintű programozás (JavaScript segítségével) is.

A legegyszerűbb a SMIL animáció, ez is képes a mozgatásra és minden más animáció megjelenítésére a webböngészőben is, ezt is próbáljuk ki a digitális kultúra órán! :))

Feladatok:

1.: Próbáld ki a rajzolást, akár online, akár az Inkscape program eszközeit felfedezve. Első körben azt az eszközt fedezd fel, amivel görbéket/íveket tudsz rajzolni. Ezek lehetnek zárt útvonalak is. Készíts 2 ilyet eltérő kitöltő színnel. Húzd a másodikat az első fölé, színének fedése legyen féláttetsző. Tetszik, ugye? Ha láttatok már színes üvegekből készült műalkotást, például gótikus rózsaablakokat, akkor ilyen szépeket Ti is nagyon könnyen tudtok már csinálni! :-)

2.: Próbáljatok figurákat, például állatkákat rajzolni több objektumból, amiket csoportosítsatok össze és mozgassátok! :-)

Folytatása következik ...