![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](../../../../wp-content/uploads/2020/08/stop-banner.png)
//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.
