//Shan Wang
//Section A

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

function setup() {

function draw(){
    //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){
    //move the curvatures with the mouse;
    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;

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