{"id":218,"date":"2019-06-28T18:18:55","date_gmt":"2019-06-28T16:18:55","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=218"},"modified":"2019-07-11T10:45:12","modified_gmt":"2019-07-11T08:45:12","slug":"portada-repte-2-automats","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/portada-repte-2-automats\/","title":{"rendered":"Portada repte 2. Aut\u00f2mats"},"content":{"rendered":"<div id=\"img1_javascript\" style=\"padding: 0; margin: 0; overflow-x:hidden; overflow-y:auto;\"><\/div>\r\n<script>\r\nlet larghezza;\r\nlet altezza;\r\n\r\nlet numeroElementi = 21;\r\nlet griglia;\r\n\r\nlet colori = [['#f3c450','#eA715e','#3778d2','#091533','#774427'],\r\n\t\t\t  ['#efc5c6','#d73705','#1d85e8','#e5e6eb','#0b233f'], \r\n\t\t\t  ['#007087', '#07253B', '#FFB182','#FF9100','#FFCD00'],\r\n\t\t\t  ['#FFBA17', '#F84353', '#17249C', '#FFD7DA', '#2E4057']\r\n\t\t\t  ];\r\nlet gammaColore = 0;\r\nlet valoreColore = 0;\r\nlet valorePrecedente = 0;\r\nlet lineaPrecedente;\r\n\r\nlet forme = 0;\r\n\/\/0 cerchio \/\/1 semicerchio \/\/2 quarto cerchio \/\/3 triangolo \/\/4 quadrato \/\/ 5 vuoto\r\n\r\nlet posX;\r\nlet posY;\r\n\r\nlet timer = 0;\r\nlet numeroFrames = 60;\r\n\r\nfunction setup() {\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n\tvar myCanvas = createCanvas(mida, mida);\r\n    myCanvas.parent(\"img1_javascript\");\r\n}\r\n\r\nfunction draw() {\r\n\t\r\n\tnoStroke();\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n\tlarghezza = mida;\r\n \taltezza = mida;\r\n \tgriglia = larghezza\/numeroElementi;\r\n\r\n\tif (timer == 0){\r\n\r\n\t\tbackground(255);\r\n\r\n\t\tif(gammaColore<colori.length-1) gammaColore++;\r\n\t\telse gammaColore=0;\r\n\t\t\r\n\t\tfor(i = 0; i < altezza\/griglia; i++){\r\n\t\t\t\r\n\t\t\tfor(j = 0; j < larghezza\/griglia; j++){\r\n\r\n\t\t\t\tposX = j * griglia;\r\n\t\t\t\tposY =  i * griglia;\r\n\r\n\t\t\t\tif(valoreColore < colori[0].length-1) valoreColore++;\r\n\t\t\t\telse valoreColore=0;\r\n\r\n\t\t\t\tfill(colori[gammaColore][valoreColore]); \r\n\r\n\t\t\t\tforme = Math.round(random(6));\r\n\t\t\t\trotazione = Math.round(random([1], [4]));\r\n\r\n\t\t\t\tswitch(forme) {\r\n\t\t\t\t  \r\n\t\t\t\t  case 0:\r\n\t\t\t\t  circle(posX+griglia\/2, posY+griglia\/2, griglia\/2);\r\n\t\t\t\t  break;\r\n\t\t\t\t  \r\n\t\t\t\t  case 1:\r\n\t\t\t\t  quartoCerchio();\r\n\t\t\t\t  break;\r\n\t\t\t\t  \r\n\t\t\t\t  case 2:\r\n\t\t\t\t  mezzoCerchio();\r\n\t\t\t\t  break;\r\n\t\t\t\t  \r\n\t\t\t\t  case 3:\r\n\t\t\t\t  triangolo();\r\n\t\t\t\t  break;\r\n\t\t\t\t  \r\n\t\t\t\t  case 4:\r\n\t\t\t\t  square(posX, posY, griglia);\r\n\t\t\t\t  break;\r\n\r\n\t\t\t\t  case 5:\r\n\t\t\t\t  triangolo();\r\n\t\t\t\t  break;\r\n\r\n\t\t\t\t  default:\r\n\t\t\t\t  quartoCerchio();\r\n\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t} \r\n\t}\r\n\r\n\ttimer++;\r\n\tif (timer == numeroFrames) timer = 0;\r\n\t\r\n}\r\n\r\nfunction quartoCerchio(){\r\n\r\n \tswitch (rotazione){\r\n\r\n \t\tcase 1:\r\n \t\tposX = posX+griglia;\r\n \t\tbreak;\r\n\r\n \t\tcase 2:\r\n \t\tposX = posX+griglia;\r\n \t\tposY = posY+griglia;\r\n \t\tbreak;\r\n\r\n\r\n \t\tcase 3:\r\n \t\tposY = posY+griglia;\r\n \t\tbreak;\r\n \t}\r\n\t\r\n\tpush();\r\n\ttranslate(posX, posY);\r\n\trotate(HALF_PI * rotazione);\r\n\tarc(0, 0, griglia*2, griglia*2, 0, HALF_PI);\r\n\tpop(); \r\n\r\n}\r\n\r\nfunction mezzoCerchio(){\r\n\r\n \tswitch (rotazione){\r\n\r\n \t\tcase 0:\r\n \t\tposX = posX+griglia\/2;\r\n \t\tbreak;\r\n\r\n \t\tcase 1:\r\n \t\tposX = posX+griglia;\r\n \t\tposY = posY+griglia\/2;\r\n \t\tbreak;\r\n\r\n \t\tcase 2:\r\n \t\tposX = posX+griglia\/2;\r\n \t\tposY = posY+griglia;\r\n \t\tbreak;\r\n\r\n \t\tcase 3:\r\n \t\tposY = posY+griglia\/2;\r\n \t\tbreak;\r\n \t}\r\n\t\r\n\tpush();\r\n\ttranslate(posX, posY);\r\n\trotate(HALF_PI * rotazione);\r\n\tarc(0, 0, griglia, griglia, 0, PI);\r\n\tpop(); \r\n}\r\n\r\nfunction triangolo(){\r\n\r\n \tswitch (rotazione){\r\n\r\n \t\tcase 0:\r\n\t\ttriangle(posX, posY, posX, posY+griglia , posX+griglia, posY+griglia);\r\n\t\tbreak;\r\n\r\n\t\tcase 1:\r\n\t\ttriangle(posX, posY, posX, posY+griglia , posX+griglia, posY);\r\n\t\tbreak;\r\n\r\n\t\tcase 2:\r\n\t\ttriangle(posX, posY, posX+griglia, posY , posX+griglia, posY+griglia);\r\n\t\tbreak;\r\n\r\n\t\tcase 3:\r\n\t\ttriangle(posX, posY+griglia, posX+griglia, posY , posX+griglia, posY+griglia);\r\n\t\tbreak;\r\n\t}\r\n}\r\n\r\nfunction windowResized() {\r\n\tmida = document.getElementById('img1_javascript').offsetWidth;\r\n\tresizeCanvas(mida, mida);\r\n\tredraw();\r\n}\r\n\r\n\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page_portada.php","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/218"}],"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=218"}],"version-history":[{"count":3,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/218\/revisions"}],"predecessor-version":[{"id":2046,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/218\/revisions\/2046"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}