{"id":90,"date":"2019-06-27T11:51:35","date_gmt":"2019-06-27T09:51:35","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=90"},"modified":"2019-07-29T16:49:09","modified_gmt":"2019-07-29T14:49:09","slug":"1-2-comencem-a-programar-dibuixem-un-cercle","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/1-2-comencem-a-programar-dibuixem-un-cercle\/","title":{"rendered":"1.2.\u00a0Comencem a programar: dibuixem un cercle"},"content":{"rendered":"

En el cap\u00edtol 2 hi tenim els primers programes amb qu\u00e8 treballarem. Tot i que el llibre ens explica alguns detalls de com preparar el nostre ordinador per a editar i executar el codi, per a comen\u00e7ar ho farem d\u2019una manera m\u00e9s senzilla. M\u00e9s endavant ja veurem com instal\u00b7lar tot el necessari per a editar el codi localment.<\/p>\n

Per tant, comen\u00e7arem aquest segon cap\u00edtol del llibre per la p\u00e0gina 11, en l\u2019apartat titulat \u00abExemple 2-1: Draw an Ellipse\u00bb.<\/p>\n

Per a escriure aquest primer exemple anirem a la p\u00e0gina web https:\/\/editor.p5js.org\/<\/a><\/p>\n

Ens apareixer\u00e0 una p\u00e0gina com aquesta:<\/p>\n

\"\"<\/p>\n

Tenim un petit programa ja fet que l\u2019\u00fanica cosa que fa \u00e9s preparar l\u2019espai on dibuixar (el canvas<\/em>) i pintar-lo de color gris. Ho provem? Fem clic al bot\u00f3 amb la fletxa vermella i el que veurem ser\u00e0 aix\u00f2:<\/p>\n

\"\"<\/p>\n

Un quadrat de 400 per 400 p\u00edxels de color gris.<\/p>\n

Ara farem l\u2019exemple del llibre: a la part draw()<\/span> posarem aquest codi:<\/p>\n

background(204);\r\nellipse(50, 50, 80, 80);<\/pre>\n
Si executem aquest programa, el resultat ser\u00e0 aquest:<\/p>\n
\"\"<\/p>\n
Per qu\u00e8?<\/p>\n
Repassem el codi que hem escrit:<\/p>\n
createCanvas(400, 400);<\/pre>\n
Aquesta instrucci\u00f3 crea un espai on poder dibuixar dins de la p\u00e0gina web. Tindr\u00e0 400 p\u00edxels d\u2019amplada i 400 d\u2019al\u00e7ada.<\/p>\n
background(204);<\/pre>\n
Aquesta instrucci\u00f3 pinta el fons de l\u2019espai de dibuix en un color gris (0 \u00e9s negre, 255 blanc).<\/p>\n
ellipse(50, 50, 80, 80);<\/pre>\n
Finalment, aquesta instrucci\u00f3 dibuixa una el\u00b7lipse. Els dos primers valors indiquen la posici\u00f3 del centre de l\u2019el\u00b7lipse (en p\u00edxels) i els dos seg\u00fcents l\u2019amplada i l\u2019al\u00e7ada, respectivament.<\/p>\n
Exercicis<\/h2>\n
Canvieu els par\u00e0metres de les diferents instruccions que hem fet servir:<\/p>\n
    \n
  • Canviar la mida de l\u2019espai de dibuix.<\/li>\n
  • Canviar el color de fons (diferents tons de gris).<\/li>\n
  • Canviar la posici\u00f3 de l\u2019el\u00b7lipse.<\/li>\n
  • Canviar les mides de l\u2019el\u00b7lipse.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    En el cap\u00edtol 2 hi tenim els primers programes amb qu\u00e8 treballarem. Tot i que el llibre ens explica alguns detalls de com preparar el nostre ordinador per a editar i executar el codi, per a comen\u00e7ar ho farem d\u2019una manera m\u00e9s senzilla. M\u00e9s endavant ja veurem com instal\u00b7lar tot el necessari per a editar […]<\/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\/wp-json\/wp\/v2\/pages\/90"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":11,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":3079,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/90\/revisions\/3079"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}