Making my way through the Drawing text recipe from the Processing 2 Creative programming cookbook source code on GitHub.
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.
Making my way through the Working with images recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to:
- use the loadImage function to load an image from my data folder into my Sketch
- declare a boolean (pixelMode) for the if test
- use the image function to display the new images (dimensions specified in copWidth and copyHeight and areas specified by the pixel-swapping if test) in the window.
I also learned about the get and set methods and how they can be used to define a region and change the colour of the loaded image. Rad!
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.
Making my way through the Drawing basic shapes recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to use the rect, ellipse, quad and triangle functions to draw basic geometric shapes. I also found it interesting how two for loops are used to create the grid background pattern. I’m curious to find out if this coding style is better or more efficient than a single for loop I used to create my grid background pattern. I guess I’ll find that out as I continue to work through each recipe.
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.
Making my way through the Keyboard interaction recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about using keyPressed, keyReleased and keyTyped functions to assign keys on the keyboard to execute code and also a bit more about if tests and declaring variables, particularly changing their values when specified keys are pressed.
Making my way through the Mouse interaction recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about the mouseClicked, mouseDragged, mouseMoved, mousePressed and mouseReleased functions. I also learned about the mouseX, mouseY, pmouseX, pmouseY, mousePressed and mouseButton variable. The mouseButton variable allows you to determine if the left, right or middle mouse button has been clicked. This recipe is also the first time an if test has been used. They’re cool. I know I’ll be using them heavily to determine the display or actions in future sketches.
Making my way through the Maths functions recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about declaring variables and the abs, ceil, floor, round, sq, sqrt, min, max, and dist functions. I also learned how to use the println function to display output of functions to the Processing console window. Good for debugging a Sketch!
For this recipe the Processing window displayed at runtime isn’t used, but I still wanted to use the size() function.
I wanted to draw a grid. Previously, I specified each horizontal and vertical line in my sketch. Totally boring, inefficient and completely inflexible way to draw repetitive lines. So, I checked out the Processing reference on for loops and then applied that methodology to my existing sketch. Tight!
This could be the method to use to draw a grid for the Design or Sew sections of the Sew, grow and mow: An AR lawn art experience.
This probably isn’t the most efficient way to draw lines to form a grid pattern, but this method is helping me to understand the coordinate system. The most efficient way would probably be to use a for loop. They’re next.
Making my way through the My first sketch recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about the size (displayWidth and displayHeight have now replaced screenWidth and ScreenHeight), setup, draw, point, line and strokeWeight functions.