Category Archives: homework

Making polygon soup

Making my way through the Making polygon soup recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to create a 3D cylinder with a flexible function that allows for the top, bottom and sides of the cylinder to be customised. In this recipe, the QUAD_STRIP parameter (draws a series of connected quads) is introduced in the beginShape function.

Once again, the frameCount system variable is used to rotate each 3D object by one degree per frame as the value of the variable is increased by one in each frame.

Screen-Shot-2014-04-29-at-9.30.34-PM
Removing the code responsible for drawing the bottom and sides of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.31.04-PM
Removing the code responsible for drawing the top and bottom of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.31.46-PM
Removing the code responsible for drawing the top and sides of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.32.29-PM

Using lights

Making my way through the Using lights recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe, I learned how to declare the lightMode and lightDirection integers to allow for different lighting modes to be activated. Inside the setUp function they’re assigned a value of 0 and then referenced again in the if test. In this recipe, I also learned how to use the lights, directionalLight, ambientLight, pointLight and spotLight functions for the different lighting modes, even the noLights function for a no lighting mode.

This recipe contains code for generating and animating 3D primitives (first demonstrated in Drawing 3D primitives recipe) used to demonstrate the lighting setup. This recipe also contains code for a keyboard interface (first demonstrated in the Keyboard interaction recipe) to activate different lighting modes. For this keyboard interface, N = no lights, L = lights, D = directional light, A = ambient light, P = point light, S = spot light. The Up, Right, Down and Left arrow keys also change the direction of the light when the directional light is activated.

Screen-Shot-2014-04-28-at-8.36.26-PM

Drawing 3D primitives

Making my way through the Drawing 3D primitives recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how:

  • the box function can be used with one or three parameters to set different values for depth, width and height of the box.
  • the sphereDetail function can be used to define a resolution higher or lower than the default sphere function
  • to create a variable (angleY) that can rotate each 3D object around its Y-axis.
  • the frameCount system variable can be used to rotate each 3D object by one degree per frame as the value of the variable is increased by one in each frame. This value is converted to radians, cause that’s the unit of measurement Processing uses. Might be easier to work with radians rather than convert to degrees all of the time. Maybe.

Screen-Shot-2014-03-31-at-8.28.44-PM

Understanding 3D space

Making my way through the Understanding 3D space recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how set a variable for depth and zSpeed and also how to change the variable inside the draw function for animation. I also learned that if you want to use the rect or ellipse functions draw shapes in a 3D environment you need to use the translate function to change the coordinate system. Normally, the translate function uses x, y and z coordinates in a 3D environment, but in this Sketch the z coordinate has been replaced by the depth variable. Using the depth variable for the z coordinate with the for loop and the if test animates the four coloured squares. Also, the squares are always drawn at 0, 0. It’s just the point of origin in z-space being moved.

Screen-Shot-2014-03-21-at-9.28.51-PM

Screen-Shot-2014-03-21-at-9.28.35-PM

Offscreen drawing

Making my way through the Offscreen drawing recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to:

  • declare a PGraphics object and then initialise it with the createGraphics function inside the setup function.
  • use the createGraphics function to create a new transparent image to be drawn on and the beginDraw and endDraw functions to start and stop drawing on the image. For this Sketch, strokes and lines are drawn on the PGraphics object. To do this, they needed to be prefixed with a variable (pg).

ch02_r09_002
The display window is cleared every time the mouse is pressed. The if test inside the mousePressed function specifies there’s a 50 percent chance the new background will be black or white.
ch02_r09_001

ch02_r09_005

Manipulating SVG files

Making my way through the Manipulating SVG files recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned:

  • more about using the shape function to draw shapes in the display window
  • how to declare the PShape object and create custom variables (snowFlake, small1 to small6 and big1) and the disableStyle, enableStyle, fill and stroke functions to manipulate discrete parts of the SVG loaded into the Sketch.
  • how to use getChild to get text (small1 to small6) from the id attribute of each shape in the SVG file.

Screen-Shot-2014-03-16-at-5.19.24-PM

Calculating points on a curve

Making my way through the Calculating points on a curve recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the bezierPoint and curvePoint functions to calculate points on curves and splines. bezierPoint uses five parameters. The first four are coordinates for the anchor and control points (40, 120, 300, 600) of the bezier curve and the fifth is parameter is a number between 0 and 1. This Sketch uses noise to generate the number. curvePoint works in a similar way to bezierPoint, except it’s for Catmull-Rom splines. I also learned how to use:

  • the first four parameters and the last four parameters of the bezier curve’s anchor points as the parameters for the red lines used to simulate the curve’s ‘handle’
  • noise to animate the point as it’s moved along the curve
  • rectMode to change the location from which the rectangle is drawn. For this example, CENTER is used to specify the first two parameters of each rect (120, 40 and 300, 240) as the shape’s centre point.

Screen-Shot-2014-03-12-at-11.40.14-PM

Drawing curves

Making my way through the Drawing curves recipe from the Processing 2 Creative programming cookbook source code on GitHub.

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!

Screen-Shot-2014-03-04-at-9.05.03-PM

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!

Screen-Shot-2014-03-04-at-9.05.27-PM

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