Category Archives: homework

Drawing text

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.

Screen-Shot-2014-02-26-at-8.39.11-PM

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.

Screen-Shot-2014-02-26-at-8.48.29-PM

Screen-Shot-2014-02-26-at-8.43.19-PM

Working with images

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!

Screen Shot 2014-02-25 at 7.55.21 PM

Screen Shot 2014-02-25 at 7.55.31 PM

Screen Shot 2014-02-25 at 7.54.56 PM

Working with colours

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.

Screen Shot 2014-02-11 at 6.32.15 PM

Drawing basic shapes

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.

Screen Shot 2014-02-04 at 8.47.13 PM

Keyboard interaction

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.

ch01_rec10_keyboard

Mouse interaction

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.

Screen Shot 2014-01-25 at 10.58.01 PM

Maths functions

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!

Screen Shot 2014-01-25 at 9.39.17 PM

For this recipe the Processing window displayed at runtime isn’t used, but I still wanted to use the size() function.

Using a for loop to draw lines

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!
Screen Shot 2014-01-24 at 11.48.33 PM

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.