If you have not read the previous posts, you will require a great library for processing named “Geomerative” \u00a0(Website<\/a>) by Ricard Marxer<\/a>.\u00a0 I have struggled to find many similar sketches online other than those included in the examples, so i figured I would share my progress with the community which has always given me so much! This post whilst keeping a log for my own future use, I hope may serve as a reference for others\u00a0out there with the same aims as me.<\/p>\n So first up, lets just get some text on the points we established in the last post. This looks like:<\/p>\n The code\u00a0to make this:<\/p>\n Now, this is a good first step, but we want our lettering to follow the curves, so next we must calculate the angle of each section of curve to correctly rotate our characters.<\/p>\n We can do this with a simple function calculating the angle between two points. Mine simply looks something like this:<\/p>\n Now we can rotate the canvas where we were translating with a quick call to this new function:<\/p>\n Resulting in: Most definitely a step in the right direction, but we still see this is not perfect, because the text character is being placed on the first point, where as the angle is being calculated between the points. The best solution would be to place the characters in the center of the two points. We can do this with some simple calculation, or better still use the built in features of the Geomerative library! So after some exploring in the Geomerative Documentation I came across the getCenter()<\/a> function, perfect!<\/p>\n Turning off the text, we are not getting:<\/p>\nFirst – Get some characters\u00a0in place<\/h2>\n
![\"Geromerative](\"http:\/\/louisc.co.uk\/wp-content\/uploads\/2016\/06\/louisc_co_uk_Geromerative2-000697.jpg\")
<\/a><\/p>\n\r\nimport geomerative.*;\r\nRShape wave;\r\nRFont font;\r\n\r\nfloat plusminus =0.0;\r\nfloat scale = 3;\r\nString message = "hello bendy world &gt;&gt;&gt;";\r\nint index = 0;\r\n\r\n\/\/Somwhere to store our curve points\r\nRPoint[] points;\r\n\r\nvoid setup()\r\n{\r\n \/\/ From the examples we must always initialise the library using this command\r\n RG.init(this);\r\n \r\n \/\/Usual Processing Jazz\r\n size(800 ,450);\r\n background(255);\r\n frameRate(25);\r\n \r\n font = new RFont("Impact Label Reversed.ttf", 72, RIGHT);\r\n}\r\n\r\nvoid draw(){\r\n \/\/Blank Background each frame\r\n background(255);\r\n \r\n \/\/Create a new RShape each frame\r\n RShape wave = new RShape();\r\n \r\n \/\/At the moment the wave object is empty, so lets add a curve:\r\n wave.addMoveTo(0*scale, 100*scale);\r\n wave.addBezierTo(0*scale, 100*scale, 50*scale, 25*scale, 100*scale, 100*scale);\r\n wave.addBezierTo(100*scale, 100*scale, 150*scale, 175*scale, 200*scale, 100*scale); \r\n \r\n \r\n \/\/Lets draw away from the edges\r\n translate(100,-80);\r\n \r\n \/\/Draw our wave\r\n noFill();\r\n stroke(0);\r\n strokeWeight(60);\r\n strokeCap(PROJECT);\r\n wave.draw();\r\n strokeCap(ROUND);\r\n \r\n \/\/Collect some points along the curve\r\n RG.setPolygonizer(RG.UNIFORMLENGTH);\r\n RG.setPolygonizerLength(35);\r\n points = wave.getPoints(); \r\n \r\n index=0; \/\/Letter index within the string message\r\n \r\n \/\/Loop through and place a letter at each point\r\n for(int i=0; i&lt;points.length-1; i++){ \r\n \/\/Add a dot for the point\r\n stroke(0, 90, 255); \/\/Blue\r\n strokeWeight(5);\r\n point(points[i].x, points[i].y);\r\n \r\n fill(255);\r\n noStroke();\r\n\r\n \/\/Draw the current letter\r\n pushMatrix();\r\n translate(points[i].x, points[i].y);\r\n \/\/This is for centering up the font on the line\r\n translate(5, 20); \r\n font.draw(message.charAt(index));\r\n \r\n popMatrix();\r\n \r\n index++;\r\n }\r\n}\r\n}\r\n<\/pre>\n\r\n\/\/Simple function to calculate the angle between two points\r\nfloat getAngle(RPoint p1, RPoint p2){\r\n float deltax = p1.x - p2.x;\r\n float deltay= p1.y - p2.y;\r\n \r\n return atan(deltay\/deltax);\r\n}\r\n<\/pre>\n\r\n...\r\n pushMatrix();\r\n translate(points[i].x,points[i].y);\r\n rotate(getAngle(points[i], points[i+1]));\r\n translate(5, 20);\r\n font.draw(message.charAt(index));\r\n popMatrix();\r\n...\r\n<\/pre>\n
![\"Geromerative](\"http:\/\/louisc.co.uk\/wp-content\/uploads\/2016\/06\/louisc_co_uk_Geromerative2-000035.jpg\")
<\/a><\/p>\n\r\n stroke(255, 90, 0); \/\/Orange\r\n strokeWeight(10);\r\n RPoint center = new RCommand(points[i], points[i+1]).getCenter();\r\n point(center.x,center.y);\r\n<\/pre>\n
![\"Calculated](\"http:\/\/louisc.co.uk\/wp-content\/uploads\/2016\/06\/louisc_co_uk_Geromerative2-000067.jpg\")
<\/a>![\"Geromerative](\"http:\/\/louisc.co.uk\/wp-content\/uploads\/2016\/06\/louisc_co_uk_Geromerative2-000057.jpg\")
<\/a><\/p>\n