Tag Archives: chapter 3

Drawing triangle and quad strips

Making my way through the Drawing triangle and quad strips recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the QUAD_STRIP and TRIANGLE_STRIP parameters inside the beginShape function to draw triangle or quad 3D geometry to screen. With some work, QUAD_STRIP and TRIANGLE_STRIP could be used to draw 3D grass and lawn geometry on screen for Sew, Grow and Mow as an alternative to pre-modelled geometry. Maybe.

Screen-Shot-2014-05-10-at-6.40.00-AM

This code draws the QUAD_STRIP and then rotates it around the centre of the screen. I particularly like how vertex (x1, y1, 0) and vertex(x2, y2, 50 + i) are used to add two vertices to the shapes with each iteration of the for loop.

Screen-Shot-2014-05-10-at-6.40.38-AM

Mixing 2D and 3D objects

Making my way through the Mixing 2D and 3D objects recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the ENABLE_DEPTH_TEST and the DISABLE_DEPTH_TEST parameter inside the hint function at the beginning and end of the draw function to to enable and disable the z buffer. This means the first black square intersects the coloured 3D cubes, while the second white square is drawn on top of the coloured 3D cubes. The DISABLE_DEPTH_TEST parameter would be useful if you wanted to display user interface elements such as buttons, banners or instructional text on top of the 3D environment.

Screen-Shot-2014-05-08-at-9.03.30-PM

Screen-Shot-2014-05-08-at-8.49.07-PM

 

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