Napredna 3D računalniška grafika in vizualizacije 2. stopnja, magistrskega študija GIK

Transcription

1 Napredna 3D računalniška grafika in vizualizacije 2. stopnja, magistrskega študija GIK Helena Gabrijelčič Tomc (UL, NTF, Oddelek za tekstilstvo, grafiko in oblikovanje)

2 Processing

3 Processing Processing je odprtokodna fleksibilna programska skicirka in jezik, ki omogoča kodiranje v kontekstu vizualne umetnosti. "Processing is open-source a flexible software sketchbook and a language for learning how to code within the context of the visual arts" Processing foundation "Our mission is to promote software literacy within the visual arts, and visual literacy within technologyrelated fields and to make these fields accessible to diverse communities."

4 Uvod / Introduction

5

6 Java programski jezik Java je objektno usmerjeni, prenosljivi programski jezik "Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented"

7 Delovno okolje veter/ Working environment

8 Kodiranje/Coding veter običajni začetki kodiranja z definicijo velikosti površine / common beginnings of coding with size definition size() size(480, 120)

9 Risanje/Drawing sile po poti, gravitacija točka / point size(100, 100); point(50,50); point(53,53); point(56,56); point(59,59); elipsa / ellipse ellipse(50, 50, 80, 80);

10 Interaktivni krogi / Interactive circles void setup() { size(650, 650); void draw() { if (mousepressed) { fill(0); else { fill(255); ellipse(mousex, mousey, 80, 80); void setup() {

11 eksplozija Linije in trikotniki / Lines and triangles size(200,400); line(50,50,150,150); line(50,250,150,350); line(50,250,150,150); size(500,500); triangle(250,100,100,300,400,450);

12 eksplozija Večkotniki, krogle in loki / Polygons, circles and arcs size(500,500); rect(100,100,200,200); ellipse(350,350,200,100); size(500,500); arc(250,250,200,200, 0, HALF_PI); size(500,500); arc(250,250,200,200, PI, TWO_PI+HALF_PI); size(500,500); arc(250,250,200,200, QUARTER_PI, PI+QUARTER_PI);

13 Zaporedje risanja in lastnosti / Order of drawing and properties size(500, 500); triangle(250,100,100,300,400,450); ellipse(350,350,200,100); size(500, 500); ellipse(350,350,200,100); triangle(250,100,100,300,40 0,450); size(500, 500); smooth(); triangle(250,100,100,300,400,450); strokeweight(8); ellipse(350,350,200,100); strokeweight(25);

14 Sivine, barve in transparence / Grayscale, colors and transparency size(500, 500); nostroke(); smooth(); background(50); fill(255, 160); rect(150, 150, 200, 200); fill(0, 150, 0, 200); rect(200, 300, 200, 200); fill(0, 0, 100, 75); ellipse(350, 125, 100, 200);

15 Spremenljivke / Variables

16 Pomen spremenljivk / Meaning of variables Spremenljivke shranjujejo vrednosti v spominu z namenom kasnejše uporabe v programu. Variables store the values in the memory in order to use these values in the further program.

17 Spremenljivke / Variables size(500, 250); smooth(); int y=75; int a=100; rect(50,y,a,a); rect(150,y,a,a); rect(250,y,a,a); rect(350,y,a,a); size(500, 250); smooth(); int y=25; int a=75; rect(50,y,a,a); rect(150,y,a,a); rect(250,y,a,a); rect(350,y,a,a);

18 Operatorji/Operators Operatorji so aritmetične matematične funkcije vsote +, razlike -, množenja *, deljenja / ter enačaja =. Operators are aritmetic mathematical functions +, -, *, / and =. size(500, 250); int x = 50; int h = 40; int y = 75; ellipse(x, y, 100, h); x = x + 200; ellipse (x, y + h, 100, h); x = x + 200; ellipse (x, y + h*2, 100, h); > večji od / greater than < manjši od / less than >= večji ali enak / greater than or equal to <= manjši ali enak / less than or equal to == enak kot / equal to!= ni enak kot / not equal to

19 Ponavljanja in for zanke / Repetitions and for loops size(525, 250); smooth(); strokeweight(5); rect(25, 50, 70, 70); rect (125, 50, 70, 70); rect (225, 50, 70, 70); rect (325, 50, 70, 70); rect (425, 50, 70, 70); for zanka / for loop size(525, 250); smooth(); strokeweight(5); for(int i=25;i<475;i+=100) { rect(i,50,70, 70); blok / blocks

20 For zanke in struktura / For loops and their structure Struktura kode je sestavljena in iniciacije (ang. inicialization, init), testa (ang. test) ter posodabljanja (ang. update), tako kot prikazujejo spodnje vrstice. The statement is composed of initialization (init), the test, and the update: for (init; test; update) { statements Getting started with Processing: Casey Reas, Ben Fry

21 Odziv / Response

22 Odziv / Response v konzoli urejevalnika programa Processing se izpisuje "Jaz pišem", dokler ne zapremo okna ali pritisnemo gumb Stop. Vsako dejanje draw() se imenuje okno ali slika (frame). Println() je fukncija, ki izpisuje tekst, framecount pa je posebna spremenljivka zaporedij (1, 2, 3, ) In the programmes console the sentence "Jaz pišem" is written until the window is not closed or we press the buttom Stop. Each action draw() is called a frame, Println() is a function that writes text and framecount is a special variable of a sequence (1, 2, 3, ). void draw() { println("jaz pišem"); println(framecount);

23 Funkcija Setup / Setup function 1. spremenljivka je določena izven setup() ali draw() / variable is defined out of setup() or draw() 2. koda znotraj setup() je pognana enkrat / the code inside setup() is driven once 3. koda znotraj draw() je pognana neprekinjeno / the code inside draw () is driven continuously int x = 340; int y = -70; int diameter = 420; void setup() { size(500, 175); smooth(); fill(150); void draw() { background(230); ellipse(x, y, diameter, diameter);

24 Sledenje / Follow Ko imamo enkrat določeno kontinuirnost, lahko določimo slednje z miško When the continuity is setted it can be defined with the mouse void setup() { size(500, 175); fill(20, 175); smooth(); nostroke(); void draw() { rect(mousex, mousey, 15, 15);

25 Odziv na klikanje / Response on clicking void setup() { size(500, 175); smooth(); strokeweight(20); void draw() { background(50); stroke(210); line(40, 0, 70, height); if (mousepressed == true) { stroke(25); line(0, 70, width, 50); if (test) { statements

26 Struktura if else / if else structure

27 Pisanje črk, besedila / Fonts writting, text void setup() { size(120, 120); textsize(64); textalign(center); void draw() { background(0); char c = 'A'; if (keypressed) { text(c, 60, 80);

28 Medji / Media

29 Slike / Images Processing uporablja mapo data, kjer shranjuje medije kot so rastrske slike (.jpg,.gif,.png), ilustracije, vektorske slike. Mapo data dobimo v meniju Sketch, izberemo Add file, datoteka je pri nalaganju avtomatično naložena v mapo Data. Processing uses folder data, where media is stored (.jpg,.gif,.png), illustration, vector images. Folder data is in the meni Sketch, where we select Add file, the file is by the uploading automatically saved in folder Data. 1. sliko naložimo v mapo Data, kot je bilo predstavljeno v predhodnih stavkih, 2. ustvarimo spremenljivko PImage, kjer bo slika shranjena 3. naložimo sliko v spremenljivko z ukazom loadimage() 1. appload the image in the folder data 2. create a PImage variable (this is storing the image) 3. the image is then load into the variable with loadimage()

30 Slike / Images PImage img; void setup() { size(700, 467); img = loadimage("flower-life.jpg"); void draw() { image(img, 0, 0); PImage img; void setup() { size(700, 500); img = loadimage("flower-life.jpg"); void draw() { background(0); image(img, 0, 0, mousex, mousey);

31 Črke / Typography Fonte ustvarimo z ukazi Tools (glavni meni) ter Create font. Kjer izberemo želeni font in njegove velikosti. S klikom na OK se font ustvari v mapi Data kot format.vlw Fonts are created with Tools (main meni) and Create font. We can define size and properties. In folder Data.vlw format is cerated

32 Črke / Typography PFont font; void setup() { size(500, 250); smooth(); font = loadfont("arialmt-48.vlw"); textfont(font); void draw() { background(75); textsize(40); text("danes je prečudovit dan...", 35, 100); textsize(22); text("danes je prečudovit dan...", 35, 170);

33 Skladiščene besedila v nizu String / Storing of text in String PFont font; String quote = "Danes je prečudvit dan "; void setup() { size(500, 350); font = loadfont("arialmt-48.vlw"); textfont(font); void draw() { background(75); textsize(48); text(quote, 26, 30, 250, 250); textsize(30); text(quote, 26, 270, 250, 500);

34 Gibanje / Motion

35 Gibanje / Motion Processing privzeto poganja 60 slik na sekundo ter omogoča gibanje z ukazi Processing (by default) drives 60 iamges per second and defines motion void draw() { println(framerate);

36 Gibanje / Motion int radius = 80; float x = -radius; float speed = 1; void setup() { size(500, 250); smooth(); ellipsemode(radius); void draw() { background(0); x += speed; // poveča vrednost x arc(x, 60, radius, radius, 1, 5);

37 Interpolacija / Interpolation, tweening interpolacijo med dvema ključnima sličicama se določa tako da pred glavno kodo določimo skupino spremenljivk, ki bodo ustrezne prehode omogočale, kot prikazuje spodnja koda interpolation between two images is defined with the group of variables that enable the occurance of the interpolation int startx = 20; // začetna koordinata x int stopx = 420; // končna koordinata x int starty = 30; // začetna koordinata y int stopy = 180; // končna koordinata y float x = startx; // trenutna koordinata x float y = starty; // trenutna koordinata y float step = 0.009; // velikost vsakega koraka (0.0 to 1.0) float pct = 0.0; // procent potovanja (0.0 to 1.0) void setup() { size(500, 250); smooth(); void draw() { background(0); if (pct < 1.0) { x = startx + ((stopx-startx) * pct); y = starty + ((stopy-startx) * pct); pct += step; ellipse(x, y, 50, 50);

38 Naključnost / Randomness funkcije sin() and cos() vrnejo vrednosti med 1 in 1 za določene vrednosti kotov teh dveh funkcij functions sin() and cos() give back values between -1 and 1 for various values of angles of these functions float angle = 0.0; void draw() { float sinval = sin(angle); println(sinval); float gray = map(sinval, -1, 1, 0, 255); background(gray); angle += 0.1;

39 Spremembe: Premiki / Transformations: Translations transformacije lahko osamimo tako da ne vplivajo na nadaljnje ukaze; s tem namenom uporabimo funkcije pushmatrix() in popmatrix(); funkcija pushmatrix() shrani kopijo trenutnih koordinat, medtem ko funkcija popmatrix() resetira sistem transformations can be isolated so that they are not influencing on further statements; we use functions pushmatrix() and popmatrix(); function pushmatrix() saves the copy of actual coordinates, meanwhile function popmatrix() resets the system void setup() { size(250, 250); void draw() { translate(mousex, mousey); rect(0, 0, 50, 50); translate(45, 35); rect(0, 0, 25, 25); void setup() { size(250, 250); void draw() { pushmatrix(); translate(mousex, mousey); rect(0, 0, 50, 50); popmatrix(); translate(45, 35); rect(0, 0, 25, 25);

40 Spremembe: Rotacije in skaliranje / Transformations: Rotations, scaling float angle = 0.0; void setup() { size(250, 250); smooth(); void draw() { translate(mousex, mousey); rotate(angle); rect(-15, -15, 50, 50); angle += 0.1; float angle = 0.0; void setup() { size(400, 400); smooth(); void draw() { translate(mousex, mousey); scale(sin(angle) + 2); rect(-15, -15, 50, 50); angle += 0.1;

41 Funkcije / Functions

42 Trki, kolizija (Collision) Funkcije / Functions funkcije so osnovni gradniki Processing kode, ki so medseboj neodvisni zato se lahko modularno sestavljajo; funkcije so tako size(), line(), fill() functions are basic elements of Processing code that are not coindependent, consequently they can be modularly composed; functions are size(), line(), fill()

43 void setup() { size(480, 120); smooth(); void draw() { background(204); owl(110, 110); owl(180, 110); void owl(int x, int y) { pushmatrix(); translate(x, y); stroke(0); strokeweight(70); line(0, -35, 0, -65); // telo nostroke(); fill(255); ellipse(-17.5, -65, 35, 35); // podr. levega očesa ellipse(17.5, -65, 35, 35); // podr. desnega očesa arc(0, -65, 70, 70, 0, PI); // brada fill(0); ellipse(-14, -65, 8, 8); // levo oko ellipse(14, -65, 8, 8); // desno oko quad(0, -58, 4, -51, 0, -44, -4, -51); // kljun popmatrix(); void setup() { size(480, 120); smooth(); void draw() { background(204); for (int x = 35; x < width + 70; x += 70) { owl(x, 110); void owl(int x, int y) { pushmatrix(); translate(x, y); stroke(0); strokeweight(70); line(0, -35, 0, -65); // Body nostroke(); fill(255); ellipse(-17.5, -65, 35, 35); // podr. levega očesa ellipse(17.5, -65, 35, 35); // podr. desnega očesa arc(0, -65, 70, 70, 0, PI); // brada fill(0); ellipse(-14, -65, 8, 8); // levo oko ellipse(14, -65, 8, 8); // desno oko quad(0, -58, 4, -51, 0, -44, -4, -51); // kljun popmatrix();

44 Objekti / Objects

45 Trki, kolizija (Collision) Objekti / Objects Objekti so kolekcije spremenljivk in funkcij, ki so v določeni odvisnosti. V kontekstu objektov je spremenljivka imenovana polje (ang. field) ali spremenljivka primera (ang. instance variable) medtem ko je funkcija imenovana metoda (ang. method). Objects are the collections of variables and functions that are in some relationship; in the context of the object the variable is called field or instance variable and the function is called method Objekti in razredi (ang. objects and classes) Razred je specifikacija objekta, torej kot nek načrt objekta. Tako kot objekti, razredi definirajo tipe podatkov in obnašanje, a vsak objet ki je iz določenega razreda ima spremenljivke, ki imajo lahko različne vrednosti. Class is a specification of an object, as the plan of an object. As objects so classes define data type and their behaviour; each object that is from one class has its variables that have different values

46 Objekti / Objects Postopek poteka v štirih korakih: 1. ustvarjanje bloka (ang. block) 2. dodajanje polij (ang. fields) 3. pisanje konstruktorja (ang. constructor), ki dodeli vrednost polju 4. dodajanje metode. ustvarjanje bloka / block creating dodajanje polij preko konstruktorja / adding the fileds with the cinstructor pisanje konstruktorja / writing the constructor dodajanje metode / adding the method class JitterBug { float x; float y; int diameter; float speed = 0.5; JitterBug(float tempx, float tempy, int tempdiameter) { x = tempx; y = tempy; diameter = tempdiameter; void move() { x += random(-speed, speed); y += random(-speed, speed); void display() { ellipse(x, y, diameter, diameter);

47 Zbirke / Arrays

48 Trki, kolizija (Collision) Zbirke / Arrays Zbirke so seznami spremenljivk, ki delijo isto ime. Zbirke so uporabne, saj lahko ustvarjamo z več spremenljivkami brez da bi določevali nova imena za vsako od spremenljivk. To omogoča krajšo in optimalnejšo kodo. Arrays are the group of elements that share the same name. They are very useful, due to the ability of working with various variables without changing the names of these variables. Consequently, the code is optimised. Vsak del v zbirki se imenuje element (ang. element) ter vsak od teh elementov ima indeks vrednost (ang. index value), ki omogoča določanje pozicije znotraj zbirke. Each part of the Array is called element and each element has its own index value that defines the position inside of the Array.

49 Zbirke / Arrays Spremenljivko lahko ustvarimo z / Variable is defined with: int x; Zbirko pa le tako da dodamo oglate klepaje / Array is defined with: int[] x; Če tako želimo narediti 5000 spremenljivk / 5000 variables are created with: int[] x = new int[5000];

50 Zbirke / Arrays Delo z zbirkami vključuje tri korake / Working with Arrays includes: 1. deklaracija zbirke ter definicija tipa podatkov / Array declaration and definition of data type; 2. ustvarjanje zbirke s ključno besedo new ter definicija dolžine / creation of Array with the word new and definition of its length; 3. dodeljevanje vrednosti vsakemu elementu / definition of the values to each element. Spodaj so predstavljeni trije različni načini določevanja in dodeljevanja zbirke, ki pa imajo enak rezultat: int[] x; // deklaracija zbirke void setup() { size(200, 200); x = new int[2]; // ustvarjanje zbirke x[0] = 12; // dodeljevanje prve vrednosti int[] x = new int[2]; // deklaracija in ustvarjanje zbirke void setup() { size(200, 200); x[0] = 12; // dodeljevanje prve vrednosti x[1] = 2; // dodeljevanje druge vrednosti int[] x = { 12, 2 ; // deklaracija, kreiranje in dodeljevanje void setup() { size(200, 200); x[1] = 2; // dodeljevanje druge vrednosti

51 Trki, kolizija (Collision) Ponavljanje in zbirke / Repetition and arrays 1. Zbirka je najprej zapolnjena z naključnim številom znotraj setup() ter 2. nato so te vrednosti uporabljene za določanje debeline črt znotraj draw(). Vsakič ko se zažene program, je nova naključna številka uporabljena v zbirki. 1. the Array is filled with the random number inside setup() and 2. then these values are used for definition for width of the lines inside draw(), each time the programme is started, the new random number is used in the Array float[] gray; void setup() { size(500, 250); gray = new float[width]; for (int i = 0; i < gray.length; i++) { gray[i] = random(0, 255); void draw() { for (int i = 0; i < gray.length; i++) { stroke(gray[i]); line(i, 0, i, height);