Számítógépes Grafika 1-2. gyakorlat

Slides:



Advertisements
Hasonló előadás
C# nyelvi áttekintő A „Programozás C# nyelven (Illés Zoltán)”
Advertisements

Számítógép bemeneti egységei
Billentyűzet és egér.
Grafikus tervezőrendszerek programozása 10. előadás.
A Windows használata Bevezetés.
Mellár János 3. óra Szeptember 16. v
1 Hernyák Zoltán Programozási Nyelvek II. Eszterházy Károly Főiskola Számítástudományi tsz.
2D grafikus rendszerek Szirmay-Kalos László. 2D grafikus editor: GUI, use-case, dinamikus modell L L L R LD LU MouseLDown első pont MouseLDown második...
Gyakori hibák C# programozásban
GPGPU labor I. OpenGL, Cg.
Számítógépes Grafika 6. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Csala Péter ANDN #4. 2 Tartalom  C# - ban előre definiált típusok  Változók  Változókkal műveletek  Elágazás  Ciklus.
1 Programozás alapjai GEIAL312B (ANSI C) BSc (Bachelor of Science) / Alap képzés 2005/2006. őszi félév Miskolci Egyetem Általános Informatikai Tanszék.
Tömbök ismétlés Osztályok Java-ban Garbage collection
Prototípuskészítés Verilog nyelven Screen Saver Készítette: Mészáros Péter.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Windows operációs rendszer
Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.
Készítette: Rummel Szabolcs
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
Számítógépes grafika OpenGL 1. gyakorlat.
Web-grafika (VRML) 10. gyakorlat Kereszty Gábor. Script típusok Elemi típusok: szám: egész vagy lebegőpontos – int / float – 1 / 1.1 string: ‘Hello World!’
C++ Alapok, első óra Elemi típusok Vezérlési szerkezetek
A JAVA TECHNOLÓGIA LÉNYEGE Többlépcsős fordítás A JAVA TECHNOLÓGIA LÉNYEGE Platformfüggetlenség.
HTML oldal felépítése Készítette: Pataki Arnold
,,Én így tanítanám az informatikát”
Számítógépes Grafika 1. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
PHP I. Alapok. Mi a PHP? PHP Hypertext Preprocessor Szkriptnyelv –Egyszerű, gyors fejlesztés –Nincs fordítás (csak értelmező) Alkalmazási lehetőségek:
Számítógépes Grafika 2. gyakorlat Programtervező informatikus (esti) 2011/2012 őszi félév.
Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév.
Számítógépes Grafika Programtervező informatikus (esti)‏ Textúrázás.
Számítógépes Grafika Megvilágítás Programtervező informatikus (esti)‏
Turbo Pascal 11..
Szoftvertechnológia alapjai Java előadások Förhécz András, doktorandusz tárgy honlap:
1. Gyakorlat - Alapok 1. Írjon konzolprogramot, amely kiírja a “Hello ELTE” üzenetet! Használja a System.out.println() -t! 2. Írjon konzolprogramot, amely.
Készítette: Csíki Gyula
Billentyűzet (keyboard) az alapértelmezett beviteli eszköz
Hernyák Zoltán Programozási Nyelvek II.
Paint.
Hyper Text Markup Language
Hyper Text Markup Language
Visual Basic 2008 Express Edition
Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév.
Számítógépes Grafika 7. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Web-grafika II (SVG) 1. gyakorlat
Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
Komoróczy Tamás 1 Java programozási nyelv Stringek.
Grafikai lehetőségek WPF-ben Egyszerű grafika (Shape-ek)
Számítógépes Grafika 6. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Táblázatok.
Számítógépes grafika I. AUTOCAD alapok
Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
SZÖVEGSZERKESZTÉS II. SZÖVEGSZERKESZTÉS LÉPÉSEI
Web-grafika (VRML) 1. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
Excel programozás (makró)
Számítógépes Grafika 3. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
V 1.0 Programozás III. Gyakorlás. V 1.0ÓE-NIK, 2014 Gyakorlás –Feladat: Tic Tac Toe játék –Szabályok: A játékosok felváltva teszik le a jelöléseiket.
ListBox CheckedListBox TextBox
Script nyelvek előadás
Rajzprogramok Bevezetés a Paint program használatába.
Neumann János Informatikai Kar
Neumann János Informatikai Kar
JavaScript a böngészőben
Hasznos billentyű kombinációk
A digitális kép bevezetés.
JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam
téma közlemény SmartArt-ábra piros hátterű képekkel (Haladó)
Előadás másolata:

Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév

Információk ETR kód: IP-eSZG1G Időpont: csütörtök, 16:00-17:30 Helyszín: D. 2.709 (PC9 labor) Jegyszerzés: két beadandó + órai/házik Gyakorlati diák: http://cg.elte.hu/~valasek/esti

Mire lesz szükség Processing: http://processing.org/download/

Ajánlott irodalom Processing reference: http://processing.org/reference/ Casey Reas, Ben Fry: Processing: A Programming Handbook for Visual Designers and Artists

Processing Java-ra épülő nyelv, grafikus, interaktív, vizualizációs alkalmazások fejlesztésére Nem szükséges előzetes Java tudás Tud futtatható fájlba exportálni Linux, Mac és Windows alá is Saját IDE-vel jön: Processing Development Environment

Példaprogram 1

Példaprogram 1

Utasítások print(s): A státuszsorba ír Konkatenáció jele: + Támogatott típusok: boolean, byte, char, color, int, float, String, Object float a = 4.3; int b = 2; print(“a = “ + a + “ és b = “ + b);

Utasítások println(s): Új sort kezd A print típusain túl tömböket is meg tud jeleníteni float[] a = {4.3, 2.4, 3, 5}; println(a);

Utasítások Kommentek a szokásos módon: // egysoros komment print(“Hello!”); /* hosszú komment */

Alap típusok long color double char float int boolean byte

Példaprogram 2 // Helló Vonal példaprogram line(15, 25, 70, 90);

Példaprogram 2

Utasítások size(width, height): (több később) A megjelenítő ablak méretének beállítása line(fromX, fromY, toX, toY): KKR-ben, tehát (0,0) a bal-felső sarok (0,0) X Y

Utasítások stroke(r, g, b [, t] ): background(r, g, b [, t] ): A kirajzolás vonalának színe Minden paraméter 0-255 között A t az átlátszóság stroke(s [, t]): r=g=b=s, pl. stroke(255) = fehér background(r, g, b [, t] ): Háttérszín beállítása Egyúttal törli is a képernyő tartalmát

Színmegadás A fenti stroke és background példák is lényegében egy szín paramétert várnak Ez Processingben ez a color, ami lehet: 1 skalár = szürkeárnyalat (0-255) 2 skalár = szürkeárnyalat (0-255) és átlátszatlanság (0-255) 3 skalár = R, G, B vörös, zöld és kék komponensek (mind 0-255) 4 skalár = R, G, B és A, átlátszatlanság (mind 0-255)

Példaprogram 3 size(400, 400); background(192, 64, 0); stroke(255); line(150, 25, 270, 350);

Példaprogram 3’ size(400, 400); color bg = color(192, 64, 0); color st = color(255); background(bg); stroke(st); line(150, 25, 270, 350);

Processing A programokat sketch-eknek hívják Háromféle módon programozható: Alap Folytonos Java

Példaprogram 4 void setup() { size(400, 400); stroke(255); background(32, 64, 16); } void draw() line(0, 0, mouseX, mouseY);

Processing Az előző kód már folytonos típusú volt A setup() függvény a program inicializálásakor A draw() minden egyes képkocka kirajzolásakor meghívódik

Utasítások mouseX, mouseY: rect(x, y, width, height): Az egér pillanatnyi X és Y koordinátái (KKR)‏ rect(x, y, width, height): Egy téglalapot rajzol ki Bal-felső sarka: (x,y) szélessége/magassága: width/heigth random(min, max)‏ fill(r, g, b [, t] ): Kitöltési szín zárt alakzatok rajzolásakor

Feladat 1 Az egérmutató pozíciójába egy 10x10-es négyzet kirajzolása véletlenszerű kitöltési- és keretszínnel

Feladat 2 Az egérmutató pozíciójába egy 10x10-es négyzet kirajzolása véletlenszerű kitöltési- és keretszínnel Ne látszódjanak a korábbi képkockákban kirajzolt dolgok

Egér mouseDragged(): mouseMoved(): mouseClicked(): Meghívásra kerül, ha mozgatják az egeret és közben valamelyik gomb nyomva van mouseMoved(): Az egér mozgatásakor hívódik meg mouseClicked(): Meghívódik ha valamelyik egérgombot megnyomták majd felengedték

Egér mousePressed(): mouseReleased(): Egérgomb lenyomásakor hívódik A mousePressed bool típusú változó azt tárolja le van-e nyomva egy egérgomb mouseReleased(): Egérgomb felengedésekor hívódik

Egér változók mouseButton: mousePressed: pmouseX, pmouseY: melyik egérgomb van lenyomva LEFT, RIGHT, CENTER mousePressed: Változó, true, ha le van nyomva egy egérgomb pmouseX, pmouseY: Az X és Y irányú elmozdulás mértéke a legutóbbi pozícióhoz képest Más a draw() és más az egér callback függvényekben!

Billentyűzet keyType(): keyReleased(): Az OS billentyűismétlési szabályának megfelelően hívódik meg A módosítók (ctrl, alt, shift stb.) nincsenek figyelembe véve keyReleased(): Billentyű felengedésekor A felengedett billentyű: Nem ASCII karakterek: keyCode ASCII karakterek: key

Billentyűzet keyPressed(): Megjegyzés: Lenyomott billentyű: Nem ASCII karakterek: keyCode ASCII: key Megjegyzés: ASCII specifikációban benne vannak ezek is: BACKSPACE, TAB, ENTER, RETURN, ESC, DELETE PC, Linux, …: ENTER Mac: RETURN Iránybillentyűk keyCode-ban (UP, DOWN, LEFT, RIGHT)

Utasítások A szokásos módon: switch-case for ciklus if-else

Billentyűzet void keyPressed() { switch (keyCode) case UP: // felfelé break; } if (key == ‘c’) // c

Példaprogram 5 void setup() { size(400, 400); stroke(255); } void draw() background(32, 64, 16); strokeWeight(10); point(mouseX, mouseY);

Utasítások strokeWeight(w): int millis() A vonalvastagság pixelben, nemnegatív érték kell legyen int millis() Az alkalmazás indítása óta eltelt idő ms-ben year(), month(), day(), hour(), minute(), second(): Aktuális dátum Mind int, megfelelő intervallumokból sin(x), cos(x): Az x radiánban adott

Utasítások PImage: .gif, .jpg, .tga és .png képek megjelenítését szolgáló osztály A .width és .height mezők az adott kép szélességét és magasságát tárolják A .pixels tömbje pedig a színeket A képet a Sketch/Add file-lal hozzá kell adni a sketch-hez

Utasítások A pixels[] tömb használata a következő: Először img.loadPixels() függvényhívás kell, ami feltölti a pixels[] tömböt Utána használhatjuk a img.pixels[]-t a kép pixeleinek lekérdezésére és módosítására (1D-s a tömb!) Végül ha módosításokat végeztünk, akkor img.updatePixels()-t kell hívnunk

Utasítások loadImage(eleres): visszaad egy PImage-t, ami az első paraméterben megadott elérési útvonalon található (lehet URL is!) image(img, x, y, width, height): kirajzol Az img nevű PImage típusú képet kifeszíti az (x, y, width, height) által meghatározott téglalapra (ha kell nagyít/kicsinyít)

Házi feladat – 1 pontért Kiindulás: http://cg.elte.hu/~valasek/esti/02/Img.zip Bal egérgombos vonszolás: kép elhelyezésének meghatározása (mintha kijelölés téglalap lenne) Jobb egérgombos vonszolás: a kép kimozdítása a helyéből (NE ugorjon a jobb-klikk helyére, az elmozdulás legyen relatív!)

Házi feladat - +0.5 pontért Egér görgetésének hatására növekedjen/csökkenjen a kép (=nagyítás/kicsinyítés)