# 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();

}```