{"id":614,"date":"2022-10-13T10:18:10","date_gmt":"2022-10-13T08:18:10","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=614"},"modified":"2022-11-22T12:30:25","modified_gmt":"2022-11-22T10:30:25","slug":"portada-2-primeros-pasos-formas-y-colores","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/portada-2-primeros-pasos-formas-y-colores\/","title":{"rendered":"Portada 2. Primeros pasos: formas y colores"},"content":{"rendered":"<div id=\"img1_javascript\" style=\"padding: 0; margin: 0; overflow-x:hidden; overflow-y:auto;\"><\/div>\r\n<script>\r\n\/*\r\n *  Autora: Roc\u00edo M\u00e1rquez \r\n *  2019\r\n *\/\r\n \r\n \r\n \/\/ PORTADA RETO 1 - Ejercicios\r\n \/\/ ^^^^^^^^^^^^^^^^^^^^^^^^^^^\r\n\r\n\r\nvar escala = -0.7;\r\n\r\nfunction setup() {\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n\tvar myCanvas = createCanvas(mida, windowHeight);\r\n    myCanvas.parent(\"img1_javascript\");\r\n}\r\n\r\n\r\nfunction draw() {\r\n  \tbackground(\"#ffffff\");\r\n  \tdibujarLineas();\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n  \ttranslate(mida\/2, windowHeight\/2 - 40);\r\n  \tdibujarMono(-210, 520);\r\n    translate(-80, -10);\r\n    scale(escala);\r\n    dibujarMono(-445, 755);\r\n}\r\n\r\n\r\nfunction dibujarLineas(){\r\n\tstroke(\"#000078\");\r\n\tstrokeWeight(10);\r\n    noFill();\r\n    \r\n    \/\/derecha arriba\r\n    beginShape();\r\n        vertex(20, 20);\r\n        vertex(50, 20);\r\n\t\tvertex(20, 20);\r\n    \tvertex(20, 50);\t\r\n    endShape();\r\n    \r\n    \/\/izquierda arriba\r\n    beginShape();\r\n        vertex(width-20, 20);\r\n        vertex(width-50, 20);\r\n\t\tvertex(width-20, 20);\r\n    \tvertex(width-20, 50);\t\r\n    endShape();\r\n    \r\n    \/\/derecha abajo\r\n    beginShape();\r\n        vertex(20, height-20);\r\n        vertex(50, height-20);\r\n\t\tvertex(20, height-20);\r\n    \tvertex(20, height-50);\t\r\n    endShape();\r\n    \r\n    \/\/izquierda abajo\r\n\tbeginShape();\r\n        vertex(width-20, height-20);\r\n        vertex(width-50, height-20);\r\n\t\tvertex(width-20, height-20);\r\n    \tvertex(width-20, height-50);\t\r\n    endShape();\r\n    \r\n    \r\n    \/\/AZUL\r\n    noStroke();\r\n\tfill(\"#78edfe\");\r\n    \r\n    \/\/izquierda arriba\r\n    triangle(30, 30, 30, 52, 50, 30);\r\n    \r\n    \/\/derecha arriba\r\n    triangle(width-30, 30, width-30, 52, width-50, 30);\r\n    \r\n    \/\/izquierda abajo\r\n    triangle(30, height-30, 30, height-52, 50, height-30);\r\n    \r\n    \/\/derecha abajo\r\n\ttriangle(width-30, height-30, width-30, height-52, width-50, height-30);\r\n}\r\n\r\n\r\n\r\n\r\n\r\nfunction dibujarMono(_y, _h){\r\n\t\r\n    \/\/ RELLENO\r\n\tnoStroke();\r\n\tfill(\"#78edfe\");\r\n\t\r\n    \/\/Ojos\r\n    arc(110, 41, 65, 65, PI, 0);\r\n    arc(190, 41, 65, 65, PI, 0);\r\n    \r\n    \/\/Orejas\r\n    arc(50, 41, 65, 65, HALF_PI, 0-HALF_PI);\r\n    arc(250, 41, 65, 65, 0-HALF_PI, HALF_PI);\r\n\r\n    \/\/Tronco\r\n    rect(295, _y - 5, 40, _h);\r\n\r\n    \/\/Sombrero\r\n    rect(125, -75, 40, 40);\r\n\r\n    fill(\"#000078\");\r\n    \/\/Boca\r\n    ellipse(150, 55, 20, 25);\r\n\r\n\t\r\n\t\/*************\/\r\n\t\r\n\t\/\/ LINEAS\r\n\tstroke(\"#000078\");\r\n\tstrokeWeight(10);\r\n    noFill();\r\n\r\n    \/\/Sombrero\r\n    line(100, -20, 200, -20);\r\n    rect(125, -75, 50, 50);\r\n\r\n    \/\/Ojos\r\n    circle(110, 41, 36);\r\n    circle(190, 41, 36);\r\n    \r\n    \/\/Orejas\r\n    arc(50, 41, 71, 71, HALF_PI, 0-HALF_PI);\r\n    arc(250, 41, 71, 71, 0-HALF_PI, HALF_PI);\r\n\r\n    \/\/Boca\r\n    circle(150, 91, 20);\r\n\r\n    \/\/Patas\r\n    arc(250, 141, 41, 41, 0-HALF_PI, HALF_PI);\r\n    line(200, 120.6, 248, 120.6);\r\n    line(200, 161.4, 248, 161.4);\r\n\r\n    arc(220, 182, 41, 41, 0-HALF_PI, HALF_PI);\r\n    line(200, 120.6, 248, 120.6);\r\n    line(200, 161.4, 248, 161.4);\r\n\r\n    \/\/Cuerpo\r\n    arc(150, 127, 151, 151, HALF_PI, 0-HALF_PI+30);\r\n    line(153, 202.6, 218, 202.6);\r\n\r\n    \/\/Tronco\r\n    line(320, _y, 320, 300);\r\n    line(230, _y, 230, -20);\r\n    line(230, 200, 230, 300);\r\n\t\r\n}\r\n\r\nfunction windowResized() {\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n\tresizeCanvas(mida, windowHeight);\r\n}\r\n\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","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\/614"}],"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=614"}],"version-history":[{"count":3,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/614\/revisions"}],"predecessor-version":[{"id":1124,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/614\/revisions\/1124"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}