Project-07: Composition with Curves

Reference Curve: Atzema Spiral

Move the mouse up and down to change the rotation angle

Move the mouse left and right to change the radius

sketch
Examples
//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-07

//Referrence Curve: Atzema Spiral
//move the mouse up and down to change the rotation angle
//move the mouse left and right to change radius

function setup() {
    createCanvas(480, 480);
    background(250);
}

function draw() {
    background(0);
    //draw the pair of lines that change with mouseX and mouseY
    lines1(mouseX, mouseY);
    lines2(mouseX, mouseY);
}

//define the function to draw the lines
function lines1 (R, A) {
    //constrain the angle and radius and map them to specific ranges
    RR = constrain(R, 0, width);
    AA = constrain(A, 0, height);
    //radius with the range(20, 20)
    r = map(RR, 0, width, 20, 50);
    //angle within the range(50, 800)
    a = map(AA, 0, height, 50, 800);
    
    //for loop to draw the lines and circles
    for (angle = 57.2957795; angle < 57.2957795+a; angle += 3) {
        push(); //push to save the orgin tranformation

        //translate the origin to (width/3, width/3)
        translate(width/3, width/3);
        //polar coordinates according to Atzema Spiral
        var t = radians(angle);
        var x = x3+ r * ( sin(t)/t - 2*cos(t) - t*sin(t) );
        var y = y3+ r * ( -cos(t)/t - 2*sin(t) - t*cos(t) );
        //another series of polar coordinates with 60 more degrees of angle
        var t2 = radians(angle+60);
        var x2 = x3 + (r) * ( sin(t2)/t2 - 2*cos(t2) - t2*sin(t2) );
        var y2 = y3 + (r) * ( -cos(t2)/t2 - 2*sin(t2) - t2*cos(t2) );
        //reference circle polar coordinates
        var radius = 2*r; //radius of the circle
        var x3 = radius * cos(radians(angle));
        var y3 = radius * sin(radians(angle));

        strokeWeight(0.5);
        //purple and opacity 90 of the lines from center to polar coordinates
        stroke(183, 125, 255, 90);
        line(0, 0, x, y);
        
        //blurish purple 
        stroke(104, 81, 225); 
        noFill();
        
        //three circles
        ellipse(0, 0, radius*2, radius*2);
        ellipse(0, 0, radius*2+10, radius*2+10);
        ellipse(0, 0, radius*2+20, radius*2+20);

        //blue
        stroke(1, 124, 228);
        //lines from first series of polar coordinates to the second series
        line(x, y, x2, y2);
        //lines from center to the reference circle
        line(0, 0, x3, y3);

        //purple
        stroke(183, 125, 255)
        fill(183, 125, 255);
        //small circles
        circle(x, y, 3);

        pop(); //pop to return to the original setting of the origin 
    }

}
    
//rotate 180 degrees of the lines1
function lines2 (R, A) {
    //tranlate the origin
    translate(width, height);
    rotate(radians(180));
    //call the function lines1
    lines1(R, A);
}


Leave a Reply