Tag Archives: recipe 6

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

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