ME-C2400 Vuorovaikutustekniikan studio

Transkriptio

1 Luent ME-C2400 Vurvaikutustekniikan studi Teknistä harjittelua: graafiset bjektit graafinen interakti (GUI) Tassu Takala

2 Jatkuva piirtäminen ja animaati Ohjelman rakenne setup() suritetaan aluksi draw() tistetaan n. 30x/sec Taustaväri (backgrund) draw-hjelman alussa peittää edellisen kerran piirrksen Animaati, simulitu liike khteen sijainti (ja muita minaisuuksia) lasketaan jka piirtämiskerralla uudelleen ennalta määrätty funkti (parametrina aika) tai tilanteen mukaan päivittyvä muuts edelliseen 2 HCI studi 2016

3 Graafisten bjektien käsittely Objektilukka ja sen minaisuudet Lunti ja piirtfunktit Piirtattribuutit (väri, reunaviiva, kuvin täyttö, jne) Objektien tallentaminen taulukkna tai listana Gemetriset transfrmaatit translaati: bjektin sijainti rtaati: asent skaalaus: mittakaava piirtprsessin tila: pushmatrix() / ppmatrix() tyypillinen hjelmarakenne: ks. luentdem_161011b [ Objektin valinta kursrilla ] 3 HCI studi 2016

4 Harjitustehtäviä Generi satunnaisia kuviita ruudulle Pmppiva pall tteuta ensin yksi pall, jnka muuttujia (paikka, npeus) päivitetään animidessa tee sitten lukka, jssa jkaisella palllla mat muuttujat tyypillinen rakenne: bjektin lunti alkuasentn, lukan metdeja update() ja display() kutsutaan jka piirtkerralla Laita ensimmäisessä khdassa tehdyt kuvit liikkumaan lu tietrakenne, jka tallentaa erilaisia bjekteja 4 HCI studi 2016

5 Mallivastauksia Mahdllinen kdi ensimmäisen tehtävän ratkaisuksi è vid setup() { size(400,400); } vid draw() { flat x = randm(0,400); flat y = randm(0,400); flat w = randm(10,100); // tehdään rajallisen flat h = randm(10,100); // kkisia kuviita if(randm(1) < 0.5) // 50% tdennäköisyys rect(x,y,w,h); else ellipse(x,y,w,h); } Pmppiville pallille löytyy mallia Prcessingin demista: Tpics / Mtin / Bunce ja BuncyBubbles Satunnaiskuvita laitettu liikkumaan erillisen liitteen (MyCurses: luentharkka1_vk38.pde) kdissa ja esim. svelluksessa *) alkuperäistä innittajaa ei enää nähtävillä netissä vaan krvattu uudella, ehkä syystäkin J 5 HCI studi 2016

6 Graafinen käyttöliittymä (GUI) Hiiren ja näppäimistön perusfunktit systeemin muuttujat ja callback-funktit Vurvaikutuslaitteiden timintamdit request = hjelma dttaa käyttäjän timintaa sample = hjelma lukee input-laitteen tilan event = laite aiheuttaa tapahtumia (event) jtka käsitellään asynkrnisesti Cnsle.readLine (Scala) musex, keypressed keypressed() Yksinkertaiset eleet hiiren liikkeen havaitseminen ja "raahaus" (drag) Khteen valinta sittamalla kuvita rajaamalla alue 6 HCI studi 2016

7 Käyttöliittymän välineitä (widgets) Virtuaalisia laitteita, esim. Nappula (buttn) Valikk (menu) Liukusäädin (scrll bar) Piirtalue (canvas) Tällä kurssilla ei käytetä valmiita GUI-kirjastja vaan rakennetaan tarvittavat välineet hjelmallisesti. Tavanmaisia välineitä vidaan timinnallisesti simulida mnin eri tavin. 7 HCI studi 2016

8 enterface'13 -esitelmästä Input device abstractins a useful framewrk fr cnceptualizatin and generalizatin what infrmatin is transferred frm human t machine? state r its change (n/ff) è blean ne frm a set f alternatives è integer [enumeratin] text è character [string] cntinuus numeric value è flat lcatin (2D/3D) è vectr [x,y] reference t a pinted bject è id (name/address/number) may be implemented in many ways by different devices switch, functin key, alphanumeric key, slider, cursr n screen (indicatr f muse), drawing tablet, 3D tracker, camera, speech recgnizer Try it ut: implement devices by each ther J 8 HCI studi 2016

9 Exercise: fill the empty slts enterface'13 -esitelmästä infrmatin fr! the cmputer:! text string (char) real number (flat) chice (ne ut f few alternatives) 2D psitin (x,y) bject picked frm screen (identifier/name) native????? native????? native????? native??????

10 Harjitustehtäviä Tutustu Prcessingin esimerkkeihin Reference / Input Examples / Tpics / GUI Kkeile yksittäisen kuvin (esim. surakaide) luntia ja liikuttelua kuvaruudulla hiiren avulla jatka sitten niin, että kuviita vi lla useita erilaisia Phdittavaa: Millä eri tavin visi interaktiivisesti määritellä (ja muuttaa) kuvin kka ja asenta? 10 HCI studi 2016