Class Admin: 


Circles and Triangles: A Consideration of Graphical Nuance

How many ways can you think of to convert a circle to a triangle?
In this Circles to Triangles project, I demonstrate 14 methods that I could think of.
The point of this demonstration is to sensitize you to details of computational craft.

  1. (code) by sampling a circle into many vertices, and then locally averaging each point with its neighbors, except for the three special corner vertices
  2. (code) by progressively deleting all points except for the triangle's corners
  3. (code) by approximating a circle with three Bezier cubic splines and modulating the spline control points
  4. (code) by approximating a circle with three circular arcs whose radii lengthen to infinity
  5. (code) by linearly interpolating points on the circle towards points on the triangle, along radii of the circle
  6. (code) by progressively moving points evenly sampled along the circle, towards points on the triangle, resampled at equal intervals, by small random amounts
  7. (code) by treating it as a rounded triangle, whose (rounded) corners have a dynamic radius
  8. (code) by treating it as a multisided polygon whose number of sides gradually decreases to three
  9. (code) by gradually flattening the circle on three sides
  10. (code) by gradually shrinking the circle's radius, revealing triangular corners within
  11. (code) by treating points along the perimeter as a series of springy particles
  12. (code) by considering it as a set of alternating straight lines and arcs in which the arcs shrink while the lines grow
  13. (code) by treating the form as a series of 6 circular arcs, alternatingly with small and large radii
  14. (code) by progressively subdividing it into a 3-gon, 6-gon, 12-gon, 24-gon, etc., with smooth interpolations.

If you find this interesting you might also enjoy:

Creative coding basics and tricks

Let's dig in to some specifics of creative graphics programming.

If you'd like more information, here are some Coding Train videos that might be helpful for you:

Shaping Functions

Shaping functions (also called easing functions, tweens, and unit generators) can be used to create nonlinear movement.

  • Luke DuBois' p5.js-func (JavaScript) is a proper p5.js library which you can include into your project.
  • My Pattern_Master (Processing/Java) is just a collection of functions. You'll have to copy/paste code directly to use the functions you want.

Here's a how-to-use-p5func in the Editor: 

  • Go to Download the zip.
  • Unzip the archive. Locate p5.func.min.js in its 'lib' folder.
  • At the, create a new sketch (File > New).
  • In your sketch, click on the small > character to open up your files.
  • Click the V character, select 'Add file'.
  • Drag the p5.func.min.js into the indicated region.
  • In your index.html file, add the p5.func.min.js script to the head.
  • Win!
  • See Luke's animation demo
  • See Golan's simple plot demo