57 out of 74 students completed Project 05, the Composition with Curves. Broadly speaking, we’re very pleased with the results of your creative research. The results are lovely, intriguing and surprisingly personal. Many of you dove right in to MathWorld and explored some really interesting and challenging territory, despite having (in some cases) limited background in mathematics. Nice work!
Of the students who presented Projects, the average grade was 2.37, with a standard deviation of 0.36. Below are some of our favorites.
One of the most intriguing, unusual and well-engineered projects was this one by Aman Tiwari. Aman sought to simulate a Harmonograph, a device which creates a drawing by moving a pen with multiple pendulums. For context, here’s a video showing a Harmonograph in action:
Aman’s project has lots of great coding patterns worth studying, such as smoothing of the control signals, and dynamic adjustment of the simulation timestep to accomodate performance on different CPUs.
aman tiwari harmo
/* Aman Tiwari
atiwari1
60-212 A
Project - 5 */
var dt = 0.05; // delta-theta, i.e line spacing
// frequencies of pendulums
var f1 = 0;
var f2 = 0;
// dampening of pendulums
var d1 = 0.002;
var d2 = 0.03;
function setup() {
createCanvas(700, 700);
colorMode(HSB);
cursor(CROSS);
strokeCap(SQUARE);
noStroke();
}
// simulates pendulum
// a = amplitude f = frequency d = dampening t = time, returns position
var pend = function (a, f, d, t) {
return (a * sin(t * f) * exp(-d * t));
}
function draw() {
m = millis();
background('gainsboro');
// mouse controls frequency of pendulumns
var future_f1 = map(mouseX, 0, width, -1, 1);
var future_f2 = map(mouseY, 0, width, -1, 1);
// eases between mouse controlled parameters
if(abs(f1 - future_f1) > 0.01) {
f1 = 0.01*future_f1 + 0.99*f1;
}
if(abs(f2 - future_f2) > 0.01) {
f2 = 0.01*future_f2 + 0.99*f2;
}
push();
translate(width/2, height/2);
// draws harmonograph outlined shape
for(var theta = 0; theta < 100; theta += dt*5) {
beginShape();
// computes triangle corner values
var x1 = pend(315, f1, d1, theta - 0.001); // - 0.001 so shapes overlap slightly
var y1 = pend(315, f2, d2, theta - 0.001); // else tiny gaps show between shapes
var x2 = pend(315, f1, d1, theta + dt*10);
var y2 = pend(315, f2, d2, theta + dt*10);
// draws single triangle between points
vertex(0, 0);
vertex(x1, y1);
vertex(x2, y2);
// nice colour interpolation
fill((255*theta/100 + 255*f1) % 255, 150*theta/100 + 10, 80*theta/100 + 100, 0.7);
endShape();
}
// draws 3 more harmonograph outlined shapes, on top of the largest one one
for(var j = 7; j < 10; j++) {
for(var theta = 0; theta < 50; theta += dt*5) {
beginShape();
// computes x and y values for theta
var x1 = pend(315 * j/10, f1, d1, theta - 0.001);
var y1 = pend(315 * j/10, f2, d2, theta - 0.001);
var x2 = pend(315 * j/10, f1, d1, theta + dt*10);
var y2 = pend(315 * j/10, f2, d2, theta + dt*10);
vertex(0,0);
vertex(x1, y1);
vertex(x2, y2);
// nice colour interpolation
fill((255*theta/20 + 255*f1) % 255, 150*theta/100 + 10, 80*theta/100 + 100, 0.7);
endShape();
}
}
pop();
// adjusts dt to performance of computer to get best rendering possible
if (millis()-m > 150) {
dt += 0.01;
} else if (millis()-m < 60) {
dt -= 0.01;
}
}
// handles varying dampening parameters by keypresses
var keyPressed = function () {
if (keyCode==UP_ARROW) {
d1 += 0.01;
} else if (keyCode==DOWN_ARROW) {
d1 -= 0.01;
} else if (keyCode==LEFT_ARROW) {
d2 += 0.01;
} else if (keyCode==RIGHT_ARROW) {
d2 -= 0.01;
}
return false
}
This outstanding composition by Lexi Yan, exploring Daisy spirals, is a gorgeous design with a supple interaction and a delicious surface.
Lexi Yan composition
var nPoints = 200;
var a = 0;
var size = 0;
function setup() {
createCanvas(800, 800);
noStroke();
}
function draw() {
background(255);
fill(151, 255, 255, 150); //Turquoise Circles
drawspirals(60, .7);
fill(198, 226, 255, 150); //Blue Circles
rotate(30);
drawspirals(90, 2);
fill(240, 255, 240); //Green Circles
rotate(15);
drawspirals(83, 1);
fill(255, 187, 255, 100); //Pink Circles
rotate(20);
drawspirals(120, 1.4);
fill(171, 130, 255, 70); //Purple Circles
rotate(60);
drawspirals(150, 1.7);
fill(255, 140, 0, 30); //Orange Circles
rotate(20);
drawspirals(70, 2.2);
fill(255, 250, 205); //Yellow Circles
rotate(35);
drawspirals(200, 1.1);
}
function drawspirals(a, size) {
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI*mouseY/80); //Y influences the "unrolling" of the spirals
// Circle Involute:
//http://mathworld.wolfram.com/CircleInvolute.html
x = a*(cos(t) + (t) * sin(t));
y = a*(sin(t) - (t) * cos(t));
// Daisy
//http://mathworld.wolfram.com/Daisy.html
ellipse(mouseX+x, mouseX/2+y, size * i, size * i); //Circles, X influences position of the spirals
vertex(x, y);
}
}
John Sprong’s investigation of the Spirograph curves produced this lovely composition, which has an absolutely luscious surface and a liquid-feeling interaction. There’s really careful craft here, and he learned a lot, too.
This design by Sydney Ayers, which uses a grid of astroid curves, is simply killer. It has carefully chosen colors, an enjoyable interaction, and a really interesting flipping between positive and negative forms.
Another appealing project using the astroid curve is this one, by Edward Shin. The relationship between the mouse interaction and the movements of the shapes is puzzling and fun.
Edward Shin composition
//Edward Shin
//15-104 Section A
//edwardsh@andrew.cmu.edu
//Project 05
var centerX; //x center of canvas
var centerY; //y center of canvas
var x; //x of astroid curve point
var y; //y of astroid curve point
var numStars; //number of stars (points) making curve
var alphaB; //transparency/opacity of background
function setup() {
createCanvas(800, 800);
angleMode(DEGREES); //set to degrees for ease of use
background(30);
centerX = width/2;
centerY = height/2;
numStars = 40;
alphaB = 255;
}
function draw() {
fill(30, alphaB);
rect(0, 0, width, height);
push();
astroidCurve(10, 300, 100, 0 ,720); //astroid curve #1
pop();
push();
astroidCurve(200, 10, 200, 720 ,0); //astroid curve #2
pop();
}
function astroidCurve(sLeng, eLeng, radius, sAng, eAng){ //constructing astroid curve
var ang = map(mouseX, 0, width, sAng ,eAng); //angle for rotation
translate(centerX + radius * cos(-ang), centerY + radius * sin(-ang));
rotate(ang);
for(var s = 1; s < numStars; s++){ //make the stars (points) along astroid curve
var leng = map(mouseY, 0, height, sLeng, eLeng); //distance of points from center
var theta = map(s, 0, numStars, 0 ,360); //angle of curve
x = leng * pow(cos(theta), 3); //equations for astroid curve
y = leng * pow(sin(theta), 3);
strokeWeight(5);
stroke(255);
point(x, y); //point of "star"
noFill()
strokeWeight(2);
stroke(255, 50);
ellipse(x, y, 20, 20); //ring of "star"
}
}
function keyPressed(){
//press one of three keys to experience the
//astroid curves differently
if(key == "1"){ //press "1" to set backround rect fully opaque
alphaB = 255;
}
if(key == "2"){ //press "2" to set background rect to partially transparent
alphaB = 30;
}
if(key == "3"){ //press "3" to set background rect to fully transparent
alphaB = 0;
}
}
Alex Reed was one of perhaps another five or six students in the class who investigated the astroid curve produced from the envelope of a series of ellipses; his design had a mind-bending interaction, and a lively animated quality produced by the addition of some subtle randomness. Zai Aliyu is another student who explored this curve to good effect; her design has the timeless qualities of a good logo.
That said: why did so many of you explore this one particular shape? MathWorld has hundreds of curves….
In addition to the above, we’d also like to shout-out additional thanks to David Frank, Marantha Dawkins, Hannah Levesque, Rachel Baker, and Maggie Mertz for their especially innovative and lovely submissions for Project 05.