{"id":438,"date":"2022-10-06T12:03:10","date_gmt":"2022-10-06T10:03:10","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=438"},"modified":"2022-11-13T14:30:50","modified_gmt":"2022-11-13T12:30:50","slug":"8-4-video","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/8-4-video\/","title":{"rendered":"8.4. V\u00eddeo"},"content":{"rendered":"

En nuestros sketches<\/em> de P5 podemos cargar y visualizar tambi\u00e9n v\u00eddeos. El proceso para hacerlo es muy similar al que seguimos con las im\u00e1genes, puesto que, en esencia, un v\u00eddeo no es m\u00e1s que una sucesi\u00f3n de im\u00e1genes que ir\u00e1n cambiando en cada uno de nuestros frames<\/em>. Para cargar el archivo de v\u00eddeo, haremos igual que para cargar cualquier otro archivo externo: utilizaremos la pesta\u00f1a Files de la barra lateral de Openprocessing. Una vez que lo tengamos subido en Openprocessing el proceso para mostrarlo en nuestro canvas<\/em> es tambi\u00e9n similar al que us\u00e1bamos para mostrar im\u00e1genes:<\/p>\n

let vid; \r\n\r\nfunction preload() {\r\n  vid = createVideo(\"myVideo.mp4 \");\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  vid.hide();\r\n  vid.play();\r\n}\r\n\r\nfunction draw() {\r\n  image(vid, 0, 0);\r\n}<\/pre>\n
Primero, creamos una variable para almacenar el v\u00eddeo. Despu\u00e9s en el preload()<\/span> utilizamos el m\u00e9todo createVideo()<\/span>, al que le pasaremos como par\u00e1metro el nombre del archivo de v\u00eddeo con su extensi\u00f3n. A continuaci\u00f3n, en el setup()<\/span> utilizamos el m\u00e9todo hide()<\/span>, ya que createVideo()<\/span> autom\u00e1ticamente crea un elemento HTML <video><\/span> en el DOM y nosotros no lo queremos mostrar, sino que queremos \u00fanicamente dibujarlo en nuestro canvas<\/em>. Despu\u00e9s, utilizamos play()<\/span> para que el v\u00eddeo inicie la reproducci\u00f3n, aunque alternativamente tambi\u00e9n podemos usar loop()<\/span> para que la reproducci\u00f3n del v\u00eddeo sea en bucle. Por \u00faltimo, para dibujar el v\u00eddeo utilizaremos image()<\/span>, al que le pasaremos como par\u00e1metro la variable donde almacenamos el v\u00eddeo y las coordenadas en las que queremos dibujarlo.<\/p>\n
\"\"
Figura 116. Mostrando un v\u00eddeo
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Todas las t\u00e9cnicas y los m\u00e9todos que hemos utilizado para las im\u00e1genes podemos aplicarlos tambi\u00e9n para v\u00eddeos, por lo que nuestras posibilidades creativas se multiplican, aunque debemos tener en cuenta que reproducir el v\u00eddeo es mucho m\u00e1s costoso en cuanto a computaci\u00f3n que mostrar una imagen, por lo que el rendimiento de nuestros sketches <\/em>manipulando v\u00eddeo en tiempo real puede verse afectado y nuestro frame rate<\/em> puede caer.<\/p>\n
Webcam<\/em><\/h3>\n
Otra fuente de v\u00eddeo que podemos mostrar en nuestros sketches<\/em> es el v\u00eddeo que procede de nuestra webcam<\/em>. Para acceder a esta, usaremos createCapture()<\/span> y le pasaremos como par\u00e1metro la constante VIDEO<\/span>; posteriormente seguiremos los mismos pasos que con archivos de v\u00eddeo para mostrarla en nuestro canvas<\/em>. Al igual que con el v\u00eddeo, deberemos usar hide()<\/span>, ya que P5 autom\u00e1ticamente crear\u00e1 un objeto en el DOM que nosotros no queremos mostrar, y dado que la c\u00e1mara est\u00e1 capturando im\u00e1genes de manera continua, no es necesario que usemos play()<\/span>, sino que autom\u00e1ticamente empezar\u00e1 a capturar.<\/p>\n
Por razones de seguridad, es muy probable que al iniciar un sketch<\/em> en el que se intente acceder a las im\u00e1genes de la webcam<\/em> nuestro navegador nos pida permiso para utilizarla. Simplemente deberemos aceptar cuando nos aparezca el mensaje del navegador y as\u00ed el sketch<\/em> se ejecutar\u00e1 con normalidad.<\/p>\n
\"\"
Figura 117. Mostrando la webcam<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Del mismo modo que ocurr\u00eda con el v\u00eddeo, podemos usar las t\u00e9cnicas y los m\u00e9todos que ya conocemos para manipular creativamente las im\u00e1genes que la webcam<\/em> nos ofrece.<\/p>\n
\"\"
Figura 118. Efecto puntillista con la webcam<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el ejemplo anterior estamos usando la t\u00e9cnica puntillista, pero en esta ocasi\u00f3n con la imagen de la webcam<\/em>. Dado que ahora en lugar de una imagen est\u00e1tica tenemos una imagen en movimiento, se ha incrementado el n\u00famero de c\u00edrculos que se dibujan en cada frame<\/em> hasta un total de 100 haciendo uso de un bucle for<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"
En nuestros sketches de P5 podemos cargar y visualizar tambi\u00e9n v\u00eddeos. El proceso para hacerlo es muy similar al que seguimos con las im\u00e1genes, puesto que, en esencia, un v\u00eddeo no es m\u00e1s que una sucesi\u00f3n de im\u00e1genes que ir\u00e1n cambiando en cada uno de nuestros frames. Para cargar el archivo de v\u00eddeo, haremos igual […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/438"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/438\/revisions"}],"predecessor-version":[{"id":803,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/438\/revisions\/803"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}