5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 1/64

UVOD U RACUNARSKU GRAFIKU

NA WEB-U

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 2/64

VECERAS PROLAZIMO

JAVASCRIPT

CANVAS

2D GRAFIKA

3D GRAFIKA

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 3/64

C--> JS

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 4/64

INT MAIN()

==

#include <stdio.h> int main() { return 0; }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 5/64

PROMENLJIVE,PRINTF, SCANF

// dinamcki jezik // ne naglasavamo tipove var broj = 2; var ime = "pera"; var drugoIme = prompt( 'Unesi ime...' ); // scanf console.log(ime); // printf console.log(drugoIme);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 6/64

IF THEN ELSE

if(sati < 12 ){ console.log('dobro jutro!' ); } else if(sati > 12 && sati < 18) { console.log('dobar dan!'); } else { console.log('dobro vece'); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 7/64

PETLJE

for(var i =0; i < arr.length; i++){ console.log("Zdravo " + arr[i]); }

unos = prompt( 'Pogodi komandu za izlaz' ); while(unos !== 'exit') { console.log('idemo opet..' ); unos = prompt( 'Opet probaj komandu' ); } alert('bravo'); // printf v2

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 8/64

FUNKCIJE

function obavesti(poruka) { alert(poruka); }

//anonimne funkcije var obavesti = function (poruka) { alert(poruka); }

function primeni(f, args) { f(args); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 9/64

OOP U JS

// objekti se mogu praviti funkcijama function Student(ime, prezime, index ) { this.ime = ime; this.prezime = prezime; this.index = index; this.getIme = function (){ return this.ime; } } var pera = new Student('pera', 'peric', 'mn12345'); console.log(pera.getIme());

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 10/64

OOP U JS

// JSON == JavaScript Object Notation var pera = { ime: 'pera', prezime: 'peric', pozdrav: function (){ alert( "Pozdrav od Pere." ); } }; console.log(pera[ime]); pera.pozdrav();

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 11/64

JS + HTML

// selektovanje elemenata var text = document.getElementById( 'text'); text.style.color = "green"; // menjamo element console.log(text.inner); // citamo iz elementa

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 12/64

CANVAS

KORISTI ZA GRAFIKU

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 13/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 14/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 15/64

CANVAS

POSTAVKA CANVAS ELEMENTA

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 16/64

JS + CANVAS

// grafika.js var canvas = document.getElementById( 'canvas'); var ctx = canvas.getContext( '2d'); // moze i 3D canvas.height = 500; canvas.width = 500;

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 17/64

PARALELOGRAM

// vec imamo ctx ctx.fillRect( 20,20,100,200);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 18/64

KOORDINATE

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 19/64

BOJENJE

// vec imamo kontekst u ctx ctx.fillStyle = '#ff2d3d'; ctx.fillRect( 20, 20, 50, 50); ctx.fillStyle = rgb( 20, 40, 60); ctx.fillRect( 80, 20, 50, 50);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 20/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 21/64

PIRAMIDA

for(var i = 0; i < 15; i++) for(var j = 0; j < i; j++){ if(i % 2 === 0) ctx.fillStyle = '#ff2d3d'; else ctx.fillStyle = 'rgb(20, 40, 60)' ; ctx.fillRect(j* 25, i*25, 20,20); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 22/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 23/64

ANIMACIJA

var x = 0, y = 20; var xspeed = 2, yspeed = 2; function draw(){ ctx.fillRect(x,y, 10, 10); x += xspeed; y += yspeed; } setInterval(draw, 30);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 24/64

gif animacije

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 25/64

BOLJA ANIMACIJA

var x = 0, y = 20; var xspeed = 2, yspeed = 2; function draw(){ ctx.fillStyle = "#232d3d"; ctx.fillRect( 0, 0, canvas.width, canvas.height); ctx.fillStyle = "red"; ctx.fillRect( 0, 0, canvas.width, canvas.height); ctx.fillRect(x,y, 10, 10); x += xspeed; y += yspeed; } setInterval(draw, 30);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 26/64

gif animacije

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 27/64

P5.JS

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 28/64

OSNOVE

function setup(){ // izvrsava se jednom na pocetku } function draw() { // izvarsava se 60 puta u sekundi }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 29/64

OSNOVE

function setup(){ createCanvas( 640, 480); } function draw() { ellipse(32, 32, 25, 50); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 30/64

TRANSFORMACIJE

function setup(){ createCanvas( 640, 480); } function draw() { transform(width/ 2, height/2); scale(2); rotate(30); ellipse(64, 64, 20, 20); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 31/64

OBJEKTI

ellipse(x, y, width, height); rect(x, y, width, height); line(x1, y1, x2, y2); triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 32/64

PARAMETARSKE JEDNACINE

x = g(t) y = h(t)

function x(t) { return sin(t); } function y(t) { return cos(t); }

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 33/64

POLARNE KOORDINATE

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 34/64

SUPERFORMULA

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 35/64

SUPERFORMULA

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 36/64

M.C ESCHER

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 37/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 38/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 39/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 40/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 41/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 42/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 43/64

VICTOR VASARELY

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 44/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 45/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 46/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 47/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 48/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 49/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 50/64

3D

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 51/64

WEBGL

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 52/64

THREE.JS

var scene = new THREE.Scene(); var aspect = window.innerWidth / window.innerHeight; //fov, aspect, near, far var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 640, 480 ); document.body.appendChild( renderer.domElement );

FOV

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 53/64

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshNormalMaterial(); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 54/64

var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; render();

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 55/64

TRANSFORMACIJE

cube.position.x = 2; cube.position.set( 2,3,4); cube.rotation.x = 2; cube.scale.set( 2,3,4);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 56/64

OBJEKTI

new THREE.SphereGeometry( 1, 5, 5); new THREE.TorusGeometry( 1, 0.2, 10, 100); new THREE.BoxGeometry( 1, 1, 1 ); new THREE.ConeGeometry( 12, 10,10);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 57/64

MATERIJALI

var normal = new THREE.MeshNormalMaterial({ }); var basic = new THREE.MeshBasicMaterial({ color: 0xff2d3d, wireframe: true }); var phong = new THREE.MeshPhongMaterial({ color: 0xff2d3d, specular: 0xffaaff, shininess: 20 }); var lambert = new THREE.MeshLambertMaterial({ color: 0x11aabb });

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 58/64

OSVETLJENJE

new THREE.DirectionalLight( 0xffffff, 1.0); new THREE.AmbientLight( 0x404040); new THREE.PointLight( 0xff0000, 1, 100); new THREE.SpotLight( 0xff0000, 1, 100);

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 59/64

DEMOSCENE

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 60/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 61/64

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 62/64

kosmoplovcipouet.netwe are back

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 63/64

GAME DEVELOPMENTBabylon3dPhaserUnity3dUnreal Engine

5/7/2017 reveal.js

file:///home/doctor/Codebin/risk-grafika/prezentacija/index.html#/ 64/64

GAME UP

18. DOM OMALDINE