sketch
//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-07
var nPoints = 70; //amount of elements
var Cissoid = 0; //http://mathworld.wolfram.com/CissoidofDiocles.html
var Conchoid = 0; //http://mathworld.wolfram.com/ConchoidofdeSluze.html
var titles = ["1. Cissoid", "2. Conchoid"];
var curveMode = Cissoid;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw() {
background(255, 160, 60); //orange background
translate(240, 240); //place objects or focus on middle
drawConchoidCurve(); //draw green and pink curves in back
drawCissoidCurve(); //circles and blue lines in front
}
function drawCissoidCurve() {
var x; //defining normal plane variables
var y;
var a1 = mouseX/20; //containing area of mouse interaction based on size or stretch of curves
var a2 = mouseY/70;
stroke(130, 130, 255); //blue lines
strokeWeight(.5);
beginShape(); //creating visuals based on Cissoid of Diocles curve
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI); //making i obtain to angle which is t
x = (10 * a1 * sq(t)) / (1 + sq(t)); //formulas for x and y of curve
// 10 for x and 20 for y were used as constant values based on the composition attained in the index
y = (20 * a2 * sq(t) * t) / (1 + sq(t));
fill(250, 240, 220); //off white filling
vertex(x, y); //draws single curve in normal direction for x and y on an index
vertex(-x, y); //after adding this vertex, i noticed a greater variation and extension of the curves and lines so I continued this process
vertex(x, -y);
vertex(-x, -y);
for(var ext = 0; ext < x; ext++) { //creating visuals deviating away from the lines but controlled by the same curve
push(); //contain colors in this for loop not the colors also belonging to the blue line series
fill(150, 255, 200); //green fill
ellipse(ext * 10, -y * 5, 10, 10); //greenish/aqua series of ellipses on top right and bottom left
ellipse(-ext * 10, y * 5, 10, 10);
fill(255, 120, 160); //reddish fill
ellipse(ext * 15, -y * 19, 20, 20); //ellipses accompanying the ones in code written above
ellipse(-ext * 15, y * 19, 20, 20);
pop();
}
}
endShape(CLOSE);
}
function drawConchoidCurve() {
var x2; //defining second x and y plane variables
var y2;
var b1 = mouseX; //containment of lines based on mouse interaction
var b2 = mouseY;
stroke(255, 100, 255); //magenta strokes
strokeWeight(2); //thicker stroke
beginShape();
for (var j = 0; j < nPoints; j++) {
var ang = map(j, 0, nPoints, 0, TWO_PI); //setting the angle value same as var t in the first for loop for the Cissoid of Diocles curve
x2 = ((1 / cos(ang)) + b1 * cos(ang)) * cos(ang); //formulas for Conchoid de Sluze curve
y2 = ((1 / cos(ang)) + b2 * cos(ang)) * sin(ang);
fill(200, 255, 50); //lime green fill
vertex(x2, y2); // this initial curve also only gave be one shape at first which looked like a flower petal from the center of the frame
//this shape seemed more centered rather than side oriented like the Cissoid function so I experimented with on other vertex implementation focusing on the center of x
vertex(-x2, y2); //created an inkblot array type of line series, more angular than round
push(); // so that other functions not used before like noFill only affect these two vertex
noFill(); //no fill so there is no overwhelming green
vertex(x2 * 10, y2 * 10); //creating wider and bigger curve series of the same physical orientation and interaction
vertex(-x2 * 10, y2 * 10);
pop();
}
endShape(CLOSE);
}