{"id":2667,"date":"2016-02-28T21:34:06","date_gmt":"2016-02-28T20:34:06","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2667"},"modified":"2016-09-09T16:58:40","modified_gmt":"2016-09-09T15:58:40","slug":"p5-js-p_3_1_3_02","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2667","title":{"rendered":"\/ p5.js \/ P_3_1_3_02"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/generative\/P_3_1_3_02\" width=\"780\" height=\"780\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre style=\"text-align: left;\">\/\/ P_3_1_3_02\r\n\r\n\r\n\/**\r\n\u00a0* analysing and sorting the letters of a text \r\n\u00a0* connecting subsequent letters with lines\r\n\u00a0*\r\n\u00a0* MOUSE\r\n\u00a0* position x\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : interpolate between normal text and sorted position\r\n\u00a0*\r\n\u00a0* KEYS\r\n\u00a0* 1\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : toggle lines on\/off\r\n\u00a0* 2\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : toggle text on\/off\r\n\u00a0* 3\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : switch all letters off\r\n\u00a0* 4\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : switch all letters on\r\n\u00a0* a-z\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : switch letter on\/off\r\n\u00a0*\/\r\n\r\n\r\nvar lines = [];\r\nvar joinedText = [];\r\nvar alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\u00c9\u00c8\u00d4',.;:!? \";\r\ncounters = [alphabet.length];\r\nvar drawLetters = [alphabet.length];\r\nvar charSize;\r\nvar charColor = 0;\r\nvar posX = 20;\r\nvar posY = 50;\r\nvar drawLines = false;\r\nvar drawText = true;\r\n\r\n\r\nfunction preload(){\r\n\u00a0 lines = loadStrings(\"perec.txt\");\r\n}\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(780, 780);\r\n\u00a0 joinedText = join(lines, \" \");\r\n\r\n\u00a0\u00a0 textFont(\"Courier\");\r\n\u00a0 textSize(10);\r\n\r\n\u00a0 for (var i = 0; i &lt; alphabet.length; i++) {\r\n\u00a0\u00a0\u00a0 drawLetters[i] = true;\r\n\u00a0 }\r\n\r\n\u00a0 countCharacters();\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 background(255);\r\n\u00a0 noStroke();\r\n\u00a0 smooth();\r\n\r\n\u00a0 posX = 20;\r\n\u00a0 posY = 200;\r\n\u00a0 var oldX = 0;\r\n\u00a0 var oldY = 0;\r\n\r\n\u00a0 \/\/ go through all characters in the text to draw them \u00a0\r\n\u00a0 for (var i = 0; i &lt; joinedText.length; i++) {\r\n\u00a0\u00a0\u00a0 \/\/ again, find the index of the current letter in the alphabet\r\n\u00a0\u00a0\u00a0 s = str(joinedText.charAt(i)).toUpperCase();\r\n\u00a0\u00a0\u00a0 uppercaseChar = s.charAt(0);\r\n\u00a0\u00a0\u00a0 var index = alphabet.indexOf(uppercaseChar);\r\n\u00a0\u00a0\u00a0 if (index &lt; 0) continue;\r\n\r\n\u00a0\u00a0\u00a0 fill(87, 35, 129);\r\n\u00a0\u00a0\u00a0 textSize(18);\r\n\r\n\u00a0\u00a0\u00a0 var sortY = index*20+40;\r\n\u00a0\u00a0\u00a0 var m = map(mouseX, 50,width-50, 0,1);\r\n\u00a0\u00a0\u00a0 m = constrain(m, 0, 1);\r\n\u00a0\u00a0\u00a0 var interY = lerp(posY, sortY, m);\r\n\r\n\u00a0\u00a0\u00a0 if (drawLetters[index]) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (drawLines) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (oldX!=0 &amp;&amp; oldY!=0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 stroke(181, 157, 0, 100);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 line(oldX,oldY, posX,interY);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 oldX = posX;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 oldY = interY;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (drawText) text(joinedText.charAt(i), posX, interY);\r\n\u00a0\u00a0\u00a0 } \r\n\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 oldX = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 oldY = 0;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 posX += textWidth(joinedText.charAt(i));\r\n\u00a0\u00a0\u00a0 if (posX &gt;= width-200 &amp;&amp; uppercaseChar == ' ') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 posY += 40;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 posX = 20;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}\r\n\r\nfunction countCharacters(){\r\n\u00a0 for (var i = 0; i &lt; joinedText.length; i++) {\r\n\u00a0\u00a0\u00a0 \/\/ get one char from the text, convert it to a string and turn it to uppercase\r\n\u00a0\u00a0\u00a0 s = str(joinedText.charAt(i)).toUpperCase();\r\n\u00a0\u00a0\u00a0 \/\/ convert it back to a char\r\n\u00a0\u00a0\u00a0 uppercaseChar = s.charAt(0);\r\n\u00a0\u00a0\u00a0 \/\/ get the position of this char inside the alphabet string\r\n\u00a0\u00a0\u00a0 var index = alphabet.indexOf(uppercaseChar);\r\n\u00a0\u00a0\u00a0 \/\/ increase the respective counter\r\n\u00a0\u00a0\u00a0 if (index &gt;= 0) counters[index]++;\r\n\u00a0 }\r\n}\r\n\r\nfunction keyPressed(){\r\n\u00a0 if (keyCode == CONTROL) {\r\n\u00a0\u00a0\u00a0 save(\"P_3_1_3_02.png\");\r\n\u00a0 }\r\n}\r\n\r\nfunction keyTyped(){\r\n\u00a0 if (key == '1') drawLines = !drawLines;\r\n\u00a0 if (key == '2') drawText = !drawText;\r\n\u00a0 if (key == '3') {\r\n\u00a0\u00a0\u00a0 drawText = true;\r\n\u00a0\u00a0\u00a0 for (var i = 0; i &lt; alphabet.length; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 drawLetters[i] = true;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 var s = str(key).toUpperCase();\r\n\u00a0 var uppercaseKey = s.charAt(0);\r\n\u00a0 var index = alphabet.indexOf(uppercaseKey);\r\n\u00a0 if (index &gt;= 0) {\r\n\u00a0\u00a0\u00a0 drawLetters[index] = !drawLetters[index];\r\n\u00a0 }\r\n}<\/pre>\n<p style=\"text-align: left;\">\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2668,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2667"}],"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=2667"}],"version-history":[{"count":2,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2667\/revisions"}],"predecessor-version":[{"id":2670,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2667\/revisions\/2670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2668"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}