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