{"id":2664,"date":"2016-02-28T21:28:01","date_gmt":"2016-02-28T20:28:01","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2664"},"modified":"2016-09-09T17:00:08","modified_gmt":"2016-09-09T16:00:08","slug":"p5-js-p_3_1_3_01","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2664","title":{"rendered":"\/ p5.js \/ P_3_1_3_01"},"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_01\" 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_01\r\n\/\/ \r\n\/**\r\n\u00a0* analysing and sorting the letters of a text \r\n\u00a0* changing the letters alpha value in relation to frequency\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 alpha mode\r\n\u00a0* s\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : save png\r\n\u00a0 *\/\r\n\r\nvar joinedText;\r\n\r\nvar alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\u00c9\u00c8\u00d4',.;:!? \";\r\ncounters = [alphabet.length];\r\n\r\nvar charSize;\r\nvar charColor = 0;\r\nvar posX, posY;\r\nvar drawAlpha = true;\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 \r\n\u00a0 joinedText = join(lines, \" \");\r\n\u00a0 textFont(\"Arial\");\r\n\u00a0 textSize(10);\r\n\u00a0 countCharacters();\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 textFont(\"Arial\");\r\n\u00a0 background(255);\r\n\u00a0 noStroke();\r\n\u00a0 smooth();\r\n\r\n\u00a0 posX = 20;\r\n\u00a0 posY = 40;\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 var s = str(joinedText.charAt(i)).toUpperCase();\r\n\u00a0\u00a0\u00a0 var 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\u00a0\u00a0\u00a0 if (drawAlpha) fill(87, 35, 129, counters[index]*3);\r\n\u00a0\u00a0\u00a0 else fill(87, 35, 129);\r\n\u00a0\u00a0\u00a0 textSize(18);\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\u00a0\u00a0\u00a0 text(joinedText.charAt(i), posX, interY);\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 += 30;\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 var c = joinedText.charAt(i);\r\n\u00a0\u00a0\u00a0 var s = str(c);\r\n\u00a0\u00a0\u00a0 s = s.toUpperCase();\r\n\u00a0\u00a0\u00a0 \/\/ convert it back to a char\r\n\u00a0\u00a0\u00a0 var 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 keyTyped(){\r\n\u00a0 if (key == 's' || key == 'S') save(\"P_3_1_3_01.png\");\r\n\r\n\u00a0 if (key == '1') drawAlpha = !drawAlpha;\r\n}<\/pre>\n<p style=\"text-align: left;\">\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2665,"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\/2664"}],"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=2664"}],"version-history":[{"count":2,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2664\/revisions"}],"predecessor-version":[{"id":2898,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2664\/revisions\/2898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/media\/2665"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}