{"id":2990,"date":"2016-09-11T17:56:04","date_gmt":"2016-09-11T16:56:04","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2990"},"modified":"2016-09-11T18:00:44","modified_gmt":"2016-09-11T17:00:44","slug":"p5-re-code-19","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2990","title":{"rendered":"\/ p5 \/ re-code 19"},"content":{"rendered":"<p><a href=\"http:\/\/lyceelecorbusier.eu\/p5\/recode\/06_COMPUTER_GRAPHICS_AND_ART_Aug1977_v2_n3.pdf\" target=\"_blank\">De Computer Graphics and Art vol2 n\u00b03 page 28<\/a><\/p>\n<p><img loading=\"lazy\" width=\"541\" height=\"542\" class=\"aligncenter size-full wp-image-2995\" src=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/09\/019.jpg\" alt=\"019\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/09\/019.jpg 541w, https:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/09\/019-150x150.jpg 150w, https:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/09\/019-300x300.jpg 300w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/p>\n<pre>\/\/ This sketch is part of the ReCode Project - http:\/\/recodeproject.com\r\n\/\/ From Computer Graphics and Art vol2 no3 pg 28\r\n\/\/ Segrid\r\n\/\/ by John Roy\r\n\/\/ \r\n\/\/ Quin Kennedy\r\n\/\/ 2012\r\n\/\/ Creative Commons license CC BY-SA 3.0\r\n\r\n\/\/Since there are \r\n\/\/8 sets of images plus a center empty image plus a 1\/2 width of black border\r\n\/\/this gives a canvas size of 8*2+1+.5*2 = 9*2 = 18 cells\r\n\/\/each cell is 20 pixels wide (see comment in drawTile(...))\r\nvar pixelSize = 1.5;\r\nvar linesPerQuadrant = 5;\r\n\/\/the tile size is the \r\n\/\/(lines per quadrant + spaces per quadrant) * 2 quadrants per side * pixelSize\r\nvar tileSize = linesPerQuadrant*2*2;\r\nvar visualTileSize = tileSize*pixelSize;\r\n\/\/subtract 1 because the center is not doubled\r\n\/\/subtract another 1 because we only see half of the last tiles\r\nvar numTiles = linesPerQuadrant*4-1-1;\r\nvar windowSize = numTiles*tileSize;\r\nvar visualWinSize = numTiles*visualTileSize;\r\n\r\nfunction setup(){\r\n createCanvas(ceil(visualWinSize), ceil(visualWinSize));\r\n noLoop();\r\n}\r\n\r\nfunction draw(){\r\n background(255);\r\n stroke(0);\r\n fill(0);\r\n strokeWeight(1);\r\n strokeCap(SQUARE);\r\n push();\r\n scale(pixelSize);\r\n \/\/translate(-tileSize\/2., -tileSize\/2.);\r\n \/\/pick a random grid cell to be the focal point\r\n \/\/for now we will restrict it to have at most one row\/column of empty squares\r\n var focusX = numTiles\/2;\r\n var focusY = numTiles\/2;\r\n \/\/for each grid cell...\r\n for(var i = 0, gi = 0; i &lt;= numTiles; i++, gi += tileSize){\r\n for(var j = 0, gj = 0; j &lt;= numTiles; j++, gj += tileSize){\r\n push();\r\n translate(gi,gj);\r\n var num = min(max(abs(focusX-i), abs(focusY-j)), linesPerQuadrant*2);\r\n drawTile(num);\r\n pop();\r\n }\r\n }\r\n pop();\r\n}\r\n\r\nfunction drawTile(iteration){\r\n \/\/there are two versions of the tile, the first where 5 lines (with 5 spaces)\r\n \/\/grow in,\r\n \/\/and the second where each consecutive space gets filled in.\r\n if (iteration == 0){\r\n return;\r\n }\r\n push();\r\n for(var i = 0; i &lt; 4; i++){\r\n push();\r\n translate(-linesPerQuadrant*2, -linesPerQuadrant*2);\r\n drawQuadrant(iteration);\r\n pop();\r\n rotate(HALF_PI);\r\n }\r\n pop();\r\n}\r\n\r\nfunction drawQuadrant(iteration){\r\n if (iteration &lt; linesPerQuadrant){\r\n push();\r\n for(var i = 0; i &lt; linesPerQuadrant; i++){\r\n line(0, .5, iteration*linesPerQuadrant*2.0\/(linesPerQuadrant-1.0), 0.5);\r\n translate(0, 2);\r\n }\r\n pop();\r\n } else {\r\n drawQuadrant(linesPerQuadrant - 1);\r\n var lines = iteration - linesPerQuadrant;\r\n push();\r\n translate(0, linesPerQuadrant*2-1);\r\n for(var i = 0; i &lt;= lines; i++){\r\n line(0, .5, linesPerQuadrant*2, .5);\r\n translate(0, -2);\r\n }\r\n pop();\r\n }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>De Computer Graphics and Art vol2 n\u00b03 page 28 \/\/ This sketch is part of the ReCode Project &#8211; http:\/\/recodeproject.com \/\/ From Computer Graphics and Art vol2 no3 pg 28 \/\/ Segrid \/\/ by John Roy \/\/ \/\/&#8230; <a class=\"read-more\" href=\"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2990\">Lire la suite&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":2993,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2990"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2990"}],"version-history":[{"count":4,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2990\/revisions"}],"predecessor-version":[{"id":2996,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2990\/revisions\/2996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2993"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}