![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_003.jpg\")
<\/p>\n
Una carpeta que se llame Programaci\u00f3n<\/strong> y dentro de una carpeta que se llamar\u00e1 js<\/strong>.<\/p>\n Lo segundo<\/strong> que haremos ser\u00e1 ir a la p\u00e1gina https:\/\/p5js.org\/es\/download\/<\/a> y de all\u00ed bajarnos la versi\u00f3n comprimida.<\/p>\n Nos bajar\u00e1 un archivo que se llama p5.min.js<\/strong> que guardaremos dentro de la carpeta js<\/strong> que acabamos de crear.<\/p>\n La tercera<\/strong> tarea que tenemos que hacer es seleccionar un editor. Para empezar, podemos usar el editor de texto de nuestro sistema operativo (el Bloque de notas<\/em> de Windows, el editor de Mac o el editor de Linux). Conforme vamos avanzando, seguramente estos editores se nos quedar\u00e1n cortos y nos ir\u00e1 bien disponer de alguno m\u00e1s potente.<\/p>\n Algunas opciones pueden ser:<\/p>\n Los ejemplos que veremos aqu\u00ed se han hecho usando Atom, pero pod\u00e9is usar cualquier otro.<\/p>\n Ya tenemos el entorno de trabajo. Ahora hay que hacer unos pasos que nos faciliten la tarea de crear despu\u00e9s nuestros programas.<\/p>\n Primero, abrimos nuestro editor de texto y creamos un nuevo archivo. Si usamos Atom (ser\u00eda similar a Sublime y a Brackets) podemos crear un nuevo proyecto. En Atom haremos File: Add project folder\u2026<\/em> Y seleccionaremos la carpeta Programaci\u00f3n<\/strong> que hab\u00edamos creado en la primera parte.<\/p>\n En la columna de la izquierda del editor veremos la carpeta Programaci\u00f3n<\/strong> y la carpeta js<\/strong> que tenemos dentro. En la imagen pod\u00e9is ver c\u00f3mo queda.<\/p>\n Seleccionamos la carpeta Programaci\u00f3n<\/strong> haciendo un clic (es posible que desaparezca la carpeta js<\/strong>, no os preocup\u00e9is, otro clic la hace aparecer de nuevo) y hacemos File: New File<\/em>.<\/p>\n Ahora copiaremos el siguiente c\u00f3digo:<\/p>\n Una vez copiado vamos al men\u00fa y hacemos File: Save<\/em> y lo guardamos con el nombre index.html<\/strong>.<\/p>\n Como ahora el editor sabe en qu\u00e9 lenguaje est\u00e1 escrito este c\u00f3digo, puede usar la opci\u00f3n de colorearlo.<\/p>\n Como se puede ver en la imagen, adem\u00e1s de colorear el c\u00f3digo, tambi\u00e9n ha aparecido el fichero en la columna de la izquierda.<\/p>\n Nos queda un paso m\u00e1s para hacer antes de empezar con el primer programa. Ahora crearemos un nuevo archivo.<\/p>\n Dentro de este nuevo archivo copiaremos este c\u00f3digo:<\/p>\n Guardaremos este nuevo archivo con la opci\u00f3n de men\u00fa Save As\u2026<\/em> y nos aseguraremos que lo guardamos dentro de la carpeta js<\/strong> y con el nombre sketch.js<\/strong>.<\/p>\n Este c\u00f3digo que acabamos de copiar consiste en dos funciones, setup()<\/span> y draw()<\/span>. Pondremos c\u00f3digo en las dos funciones, pero cada una de ellas tiene una funci\u00f3n espec\u00edfica. La funci\u00f3n setup()<\/span> la usaremos para establecer condiciones iniciales. Lo que ponemos dentro solo se ejecutar\u00e1 una vez. La funci\u00f3n draw() <\/span>ser\u00e1, como su nombre indica, la que usaremos realmente para dibujar.<\/p>\n Este ser\u00e1 el aspecto de nuestro editor una vez est\u00e9 todo preparado:<\/p>\n Todav\u00eda tenemos abierta la pesta\u00f1a Welcome<\/em>. Si nos ponemos encima, aparece una cruz que nos permite cerrarla. Tambi\u00e9n podemos cerrar la pesta\u00f1a del archivo index.html<\/strong>. De momento no lo usaremos.<\/p>\n En la imagen que veis a continuaci\u00f3n ten\u00e9is un esquema de c\u00f3mo se organizan los archivos que necesitamos para guardar nuestros programas. Ser\u00e1 conveniente que tengamos una carpeta para cada ejercicio. En la carpeta del ejercicio tenemos dos cosas: el archivo HTML<\/strong>, que presenta el programa en el navegador, y la carpeta js<\/strong>, que es donde guardaremos los archivos JavaScript. Dentro de esta carpeta pondremos, por un lado, el archivo de p5.js, que nos bajamos de la web (p5.min.js), y el archivo sketch.js, que es donde escribiremos el programa.<\/p>\n Para cada ejercicio podemos copiar todo el esquema (archivo HTML y carpeta js) y borrar el contenido del archivo sketch.js para escribir el nuevo programa sin interferencias.<\/p>\n A pesar de que el editor web lo usamos para hacer los ejercicios del cap\u00edtulo 2, esta no es la mejor manera de trabajar con p5.js si queremos incluir nuestros proyectos en nuestras propias p\u00e1ginas web, as\u00ed que vamos a prepararnos un entorno de trabajo que nos permita editar y ejecutar nuestros programas en JavaScript […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1989"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=1989"}],"version-history":[{"count":14,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1989\/revisions"}],"predecessor-version":[{"id":3369,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1989\/revisions\/3369"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_005.jpg\")
<\/p>\n\n
Archivos b\u00e1sicos<\/h2>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_007.jpg\")
<\/p>\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>\r\n <style> body {padding: 0; margin: 0;} <\/style>\r\n <script src=\"js\/p5.min.js\"><\/script>\r\n <script src=\"js\/sketch.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_009.jpg\")
<\/p>\nfunction setup() {\r\n \/\/ put setup code here\r\n}\r\nfunction draw() {\r\n \/\/ put drawing code here\r\n}<\/pre>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_011.jpg\")
<\/p>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258587_3_013.jpg\")
<\/p>\n","protected":false},"excerpt":{"rendered":"