**Class Admin: **

- Roll Call
- Reminder: LikeLike opening (part of the Penn Ave. Gallery Crawl), Friday 9/6, 7-11pm
- Discussion of
*Interruptions*re-codes.

**Presentations**:

- Golan's Lecture on Loops
- Announcement of the next Deliverables (due 9/11)
- Circles and Triangles: A Consideration of Graphical Nuance (below)
- Technical lecture: Creative coding basics and tricks
- Technical lecture: Golan's p5.js arc demo
- Technical lecture: Shaping functions
- 11:15am: Exit Ticket for 9/4/2019

### 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.*

- (code) by sampling a circle into many vertices, and then locally averaging each point with its neighbors, except for the three special corner vertices
- (code) by progressively deleting all points except for the triangle's corners
- (code) by approximating a circle with three Bezier cubic splines and modulating the spline control points
- (code) by approximating a circle with three circular arcs whose radii lengthen to infinity
- (code) by linearly interpolating points on the circle towards points on the triangle, along radii of the circle
- (code) by progressively moving points evenly sampled along the circle, towards points on the triangle, resampled at equal intervals, by small random amounts
- (code) by treating it as a rounded triangle, whose (rounded) corners have a dynamic radius
- (code) by treating it as a multisided polygon whose number of sides gradually decreases to three
- (code) by gradually flattening the circle on three sides
- (code) by gradually shrinking the circle's radius, revealing triangular corners within
- (code) by treating points along the perimeter as a series of springy particles
- (code) by considering it as a set of alternating straight lines and arcs in which the arcs shrink while the lines grow
- (code) by treating the form as a series of 6 circular arcs, alternatingly with small and large radii
- (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:*

*Dan Shiffman's "10 Minute Coding Challenges - Shape Morphing" (12:35-43:20).**Dan Shiffman's "Coding Challenge #19: Superellipse" (4:22-12:00).**A Book of drawCircle() & Github by Yuki Yoshida**Squaring the Circle and Dark Matter by Troika**OTTO - Footnotes from the History of Two Cultures: Mitsuo Katsui by Jürg Lehni*

## Creative coding basics and tricks

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

- The transformation matrix; pushMatrix(), popMatrix(), scale, translate, etc.
- random() vs. Perlin noise(). p5's randomGaussian(). Random seeds.
- The modulus operator; map(), constrain()
- Simple sinusoids; circular motion. Lissajous figures!
- Here's a demonstration of
*looping noise*(Processing) (p5.js)

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

*Perlin Noise in p5.js**The modulo operator (featuring the Professor...)**push/pop in p5.js**the map() function in p5.js*

### 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 https://idmnyu.github.io/p5.js-func/. Download the zip.
- Unzip the archive. Locate
*p5.func.min.js*in its 'lib' folder. - At the https://editor.p5js.org/, 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