ShanWang-Project-07-Curves

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-07

var nPoints = 300;
var a;
var x;
var y;
var posX;
var posY;
var color = 0;
var numLayer = 3;
var numCurve = 6;

function setup() {
    createCanvas(600,700);
}

function draw(){
    background(0);
    //constrain the x, y position of mouse;
    posX = constrain(mouseX, 0, width);
    posY = constrain(mouseY, 0, height);

    //control the amount that shift in x and in y direction with the position of mouse;
    var shiftY = map(posY, 0, height,1,5);
    var shiftX = map(posX, 0, width,1,5);

    //define unit of offsets;
    var intervX = width/10;
    var intervY = height/10;

    //generate three layer of multiple curves;
    for (var j = 0; j<numLayer; j++){
        for (var i = 0; i<numCurve; i++) {
            //cotrol the degree of curvatures with the change in mouse X;
            a = map(mouseX, 0, width, -width/3, width/2);
            //control the factor of scaling with the change of shift;
            var scaleX = shiftX/(3-j)*(i+1);
            var scaleY = shiftY/(3-j)*(i+1);
            //control the gradient;
            color = (i+1)*10*(j+3);
            drawConchoid(shiftX+i*intervX, shiftY+i*intervY,a,scaleX,scaleY,color);
        }
    }
}

// draw Conchoid of De Sluze Curve
function drawConchoid(sX, sY, a, scaleX, scaleY,color){
    push();
    stroke(color);
    //move the curvatures with the mouse;
    translate(posX,posY);
    beginShape(POINTS);
    for (var i = 0; i < nPoints; i++){
        var t =  map(i, 0, nPoints, 0, TWO_PI);
        x = (1/cos(t)+ a* cos(t))* cos(t);
        y = (1/cos(t)+ a* cos(t))* sin(t);
        x *= scaleX;
        y *= scaleY;
        vertex(x+sX,y+sY);
    }
    endShape();
    pop();
}

In this project I experimented with a lot of functions that create different curvatures, and I was mainly exploring the dynamic movement of the curves associating with the mouse.

I also tried to create black background in contrast with points of different gradient for a sense of space and depth.

Leave a Reply