In this recipe I learned how to use the bezier and curve functions to draw Bezier curves and Catmull-rom splines in the display window. For the Bezier curves in this example, 0 and 20 are the coordinates for the first anchor point. 50 and 10 are the coordinates for the first control point. 80 and 100 are the coordinates for the second control point, and the 30 and 200 are the coordinates for the second anchor point. The bezierDetail and curveDetail functions are used to change the detail of the curves and the curveTightness function is used to set the tightness of the curve. Use a value of 0.0 to connect the points of the curve with straight lines and values between -5.0 and 5.0 to create curves with varying tightness.
In this recipe I also learned how to use the translate function with a for loop to create multiple curves and then translate (position) them from left to right (x parameter) at a specified distance apart (20) in the display window. The pushMatrix and the popMatrix functions are also somehow involved in the translation of the curves, but I’m not quite sure how just yet. The Processing 2.0+ reference for these two functions functions provides a description and an example, but I’m not sure when to pop and when to push and why. I guess I’ll play around with them both and figure it out!
Worth noting, since this recipe was created the OpenGL library has been included as part of Processing 2.0. That means you no longer have to import the library. Nice!
Oh yeah, gradually increasing the tightness of the curve by moving the mouse from left to right (current horizontal coordinate of the mouse) is also pretty cool!
In this recipe I learned how to declare PFont objects for the fonts to be used in the Sketch and set the second parameter of the textFont function to determine the size of the text. For example, textFont (junction, 18). I also learned how to use:
loadFont function to load the fonts into the PFont object
draw function to draw lines of text
text function to draw text to screen
textAlign function to align the text to the coordinates used in the text function. For example, LEFT, CENTER or RIGHT.
textWidth to return the width of a text block in pixels. In this Sketch, the width was the string of text “Nulla blandit ut magna”.
textLeading to set the leading of three different text blocks.
Another thing I learned from this recipe was how to use Create font tool that’s part of Processing to convert each font from its original format to a bitmap format used by Processing.
Advertising on the inside one of Melbourne’s Metro Trains. An uncommon sight. This could be a test for a possible revenue stream for the franchise operator of our suburban railway network. I’ve seen advertising on the outside of trains before, but never on the inside. This is new.
Making my way through the Working with colours recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to use the color function to create a variable of the type colour (c = colour variable), the stroke function to set the colour of the stroke, the fill function to set the fill colour of the shape. I also added an additional +130 to the height of displayHeight. I wanted the size and position of all the shapes to be relative to the window size (displayWidth, displayHeight), but I haven’t figured out how to do that yet.
I understand this recipe is about drawing basic shapes and not about size and positioning, but there’s something rather inflexible about the way each shape is drawn. I’d prefer to scale and position each shape relative to the size of the window.
Extension task 1: As an extension to this recipe, I think I’ll explore relative scale and positioning in an attempt to make my Sketch that little bit more flexible.
Extension task 2: I wonder if it’s possible to detect or determine the display size of the environment/user agent. If so, objects may be able to be drawn and positioned relative to the display size. My task is to find out and then create a few example sketches.