Composition with Curves

 
 

Mathematical curves allow for unique, expressive and surprising ways of generating and controlling graphics. This interactive composition trys to experiment and play with the aesthetics of curves.

The background color changes as the mouse moving through the screen, according to the x,y location of the mouse. The diameter and pattern of the central graphic also changes in respond to the motion of mouse.

To view the entire interactive Javascript, please click here.

var nPoint = 100;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    var colG = map(mouseX, 0, height, 180,140);
    background(255, colG, colG+mouseY*0.1);//make background change with curve
   
    for (var i= 0; i<10; i++) {
        var col = map(i, 0, 10, 100,200);//chaneg curve color
        stroke(col);
        strokeWeight(1);
        noFill();
        drawFourarcs(i*30, mouseY,i);
    }    
}

function drawFourarcs (x,y,r) {//draw curve

    push();
    translate(width/2, height/2);
    var x;
    var y;
    var r;
    var a = map(mouseY, 0, width, 1, 20);// size of pattern
    var n = map(mouseX, 0, height, 1,15)//division

    beginShape();
    for (var i = 0; i<nPoint; i++) {
        var t = map (i, 0, nPoint, 0, TWO_PI);
        x = (a/r)*(n*cos(t)-cos(n*t));
        y = (a/r)*(n*sin(t)-sin(n*t));
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}