Post on 10-Oct-2020
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