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
        drawFourarcs(i*30, mouseY,i);

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

    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

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