Category: Project-07-Curves

Project 07

this is my project.

sketch 

var nPoints = 400;

function setup() {
    createCanvas(400, 400); 
}


function draw() {
    background(0);
    
    // draw the curve
    push();
    translate(width/2, height/2);
    drawEpitrochoidCurve();
    pop();

    push();
    translate(width/2, height/2-20)
    drawCardioidCurve();
    pop();
}

//--------------------------------------------------
function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    noFill();
    strokeWeight(1);

    //change color 
    if (mouseX< width/2) {
        stroke(0, 50, 233);
    } else {
        stroke(81, 211, 255);
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //draw Epicycloid
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);
    
}


//--------------------------------------------------
function drawCardioidCurve() {
    //Cardioid
    // https://mathworld.wolfram.com/Cardioid.html
    push();
    translate(x, y);
    rotate(radians(-90))
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 20, 80);
    var b = a/2;
   
    //change color
    if (mouseY > height/2) {
        fill(233, 50, 50, 200);
    } else {
        fill(169, 22, 22, 200);
    }

    //draw cardioid
    strokeWeight(1)
    stroke(244, 82, 255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a*cos(t)*(1-cos(t));
        y = a*sin(t)*(1-cos(t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

Project 07: Curves

For this project, if you move your mouse left and right it changes the size of the left and right petals. If you move your mouse up and down it changes the size of the rose curve and the top and bottom inner petals.

sketch
//num of lines(rose) & size for bifoliate
var nPoints = 100;


function setup() {
    createCanvas(400, 400);
    frameRate(50);
    background(220);
}

function draw() {
    background(0);

    push();
    //moves origin to center of canvas
    translate(width/2, height/2);
    //inner petals
    draw4BifoliateCurve();
    //outer curves
    drawRoseCurve();
    pop();
}

//creating one singular bifoliate curve
function drawBifoliateCurve() {
    var x;
    var y; 
    var r;

    //conforming a (which controls the size of the bifoliate) to mouseX
    var a = constrain(mouseX - 200, -100, 100); 
    //opaque purple
    fill(200, 162, 230, 100); 
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI); 
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            print("Value" + a);

            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);

}

//creating one bifoliate curve in y-direction
function drawmouseYbifoliateCurve() {
    var x;
    var y; 
    var r;

    var a = constrain(mouseY-200, -120, 120);

    fill(200, 162, 200, 100);
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            //print("Value" + a);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);
 
}
 
//creating 4 Curves (Outer/Inner Petals)   
function draw4BifoliateCurve() {
    push();
    //2 Petals (Top and Bottom)
    rotate(PI/5);
    drawmouseYbifoliateCurve();
    rotate(PI)
    drawmouseYbifoliateCurve();
    pop();
    //2 Petals (Left and Right)
    drawBifoliateCurve();
    push();
    rotate(PI);
    drawBifoliateCurve();
    pop();
}

//draws rose curve
function drawRoseCurve() {
    var x;
    var y; 
    var r;
    var a = 1500;
    //mouse Y controls how many lines
    var n = constrain(mouseY/20, 0, 400/20);

    stroke(255, 255, 255, 150);
    strokeWeight(0.5);
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);

            //rose equation
            r = a*sin(n*t);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape();

}

Project-07: Composition with Curves

Reference Curve: Atzema Spiral

Move the mouse up and down to change the rotation angle

Move the mouse left and right to change the radius

sketch
Examples
//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-07

//Referrence Curve: Atzema Spiral
//move the mouse up and down to change the rotation angle
//move the mouse left and right to change radius

function setup() {
    createCanvas(480, 480);
    background(250);
}

function draw() {
    background(0);
    //draw the pair of lines that change with mouseX and mouseY
    lines1(mouseX, mouseY);
    lines2(mouseX, mouseY);
}

//define the function to draw the lines
function lines1 (R, A) {
    //constrain the angle and radius and map them to specific ranges
    RR = constrain(R, 0, width);
    AA = constrain(A, 0, height);
    //radius with the range(20, 20)
    r = map(RR, 0, width, 20, 50);
    //angle within the range(50, 800)
    a = map(AA, 0, height, 50, 800);
    
    //for loop to draw the lines and circles
    for (angle = 57.2957795; angle < 57.2957795+a; angle += 3) {
        push(); //push to save the orgin tranformation

        //translate the origin to (width/3, width/3)
        translate(width/3, width/3);
        //polar coordinates according to Atzema Spiral
        var t = radians(angle);
        var x = x3+ r * ( sin(t)/t - 2*cos(t) - t*sin(t) );
        var y = y3+ r * ( -cos(t)/t - 2*sin(t) - t*cos(t) );
        //another series of polar coordinates with 60 more degrees of angle
        var t2 = radians(angle+60);
        var x2 = x3 + (r) * ( sin(t2)/t2 - 2*cos(t2) - t2*sin(t2) );
        var y2 = y3 + (r) * ( -cos(t2)/t2 - 2*sin(t2) - t2*cos(t2) );
        //reference circle polar coordinates
        var radius = 2*r; //radius of the circle
        var x3 = radius * cos(radians(angle));
        var y3 = radius * sin(radians(angle));

        strokeWeight(0.5);
        //purple and opacity 90 of the lines from center to polar coordinates
        stroke(183, 125, 255, 90);
        line(0, 0, x, y);
        
        //blurish purple 
        stroke(104, 81, 225); 
        noFill();
        
        //three circles
        ellipse(0, 0, radius*2, radius*2);
        ellipse(0, 0, radius*2+10, radius*2+10);
        ellipse(0, 0, radius*2+20, radius*2+20);

        //blue
        stroke(1, 124, 228);
        //lines from first series of polar coordinates to the second series
        line(x, y, x2, y2);
        //lines from center to the reference circle
        line(0, 0, x3, y3);

        //purple
        stroke(183, 125, 255)
        fill(183, 125, 255);
        //small circles
        circle(x, y, 3);

        pop(); //pop to return to the original setting of the origin 
    }

}
    
//rotate 180 degrees of the lines1
function lines2 (R, A) {
    //tranlate the origin
    translate(width, height);
    rotate(radians(180));
    //call the function lines1
    lines1(R, A);
}

Project 07 – Composition with Curves

Inspiration by Epicycloid Function

sketch
//Aarnav Patel
//aarnavp@andrew.cmu.edu
//Section D
//Project

var n = 1000;
var c;

function setup() {
    createCanvas(480, 480);
    c = color(random(255), random(255), random(255));

}

function draw() {
	background(0);
	for (var i = 0; i < 3; i++) {
		drawSpiral(i * width / 2);			//draws three times
	}

}

function mousePressed() {
	c = color(random(255), random(255), random(255));
}

function drawSpiral(w) {
	stroke(c);
	push();
	translate(w, height / 2);	//Setting the origin
	noFill();
	var x;
	var y;
    var a = constrain(mouseX, 0, width);		
    var b = constrain(mouseY, 0, height);		//Constrains aim to keep proportional when mouse is in Canvas

	
	strokeCap(ROUND);
    strokeJoin(ROUND);
    var t = 0;

    beginShape();					//Starting shape before vertices inputted
	for (var i = 0; i < n; i++) {							
		var t = map(i, 0, n, 0, TWO_PI);
		x = (a + b) * cos(t) - b * cos((a + b / b) * t);		//Using the elipcycloid function for the x and y (cos and sin)
		y = (a + b) * sin(t) - b * sin((a + b / b) * t);
		vertex(x, y);

	}
	endShape();					//ending the shape
	pop();						//resetting for the next time its called

}




/*

function drawSpiral() {
	//x	=	(a+b)cosphi-bcos((a+b)/bphi)

	//=	a^2[cos(2theta)+/-sqrt((b/a)^4-sin^2(2theta))].

	noStroke();
	var a = mouseX / 4;
	var b = 50;

	strokeCap(ROUND);
	strokeJoin(ROUND);
	var t = 0;
	push();
	translate(width / 2, height / 2);
	if (a > b) {
		//push();
		beginShape();
		for (var i = 0; i < n; i++) {
			t = map(i, 0, n, 0, TWO_PI);
			var r = sqrt(a * a * ( cos(t) + sqrt(pow((b / a), 4) - pow(sin(2 * t), 2))));

			var x = r * cos(t);
			var y = r * sin(t);
			console.log(x + ", " + y)

			vertex (-x, y);
		}
		endShape();
		//pop();
	}
		
	//push();
	beginShape();
	for (var i = 0; i < n; i++) {
		t = map(i, 0, n, 0, TWO_PI);
		var r = sqrt(a * a * ( cos(t) + sqrt(pow((b / a), 4) - pow(sin(2 * t), 2))));

		var x = r * cos(t);
		var y = r * sin(t);
		console.log(x + ", " + y)

		vertex(x, y);
	}
	endShape();
	pop();
}
*/

Project 07 – Curves

Using a rose curve function I created two overlapping shapes. Moving the cursor to the left side of the canvas decreases the petal count and changes its rotation direction to counterclockwise; to the left, the petal count increases, and the rotation direction is clockwise. Clicking the canvas will pause its motion.

sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-07
 
//num of petals
var n=3;

//track move clickes
var state = 0;
//tracks when petals function runs
var petalState =0;

//store x and y cordinates of petal
var petalPointX = [];
var petalPointY = [];

function setup() {
    createCanvas(400, 400);
 }

function draw() { 
    background (0);

    //move origin to center canvas
    translate(width/2,height/2);

    //outter rose
    fill(167,1187,232,120);
    rose(n,200,5);

    //inner rose
    fill(252,219,3,120);
    rose(-n,120,3);


    petals();
} 

//only call petals mouse house is clicked    
function mousePressed(){
    if(petalState == 0){
        state = 1;
    }

    if(petalState == 1){
        state = 0;
        petalState = 0;
    }
}

//make rose shape
function rose(n,radius,rate){
    var x; 
    var y;
    var newRad;
    //make rose shape
    beginShape();
    for (var a=0; a<=360; a++){
        newRad = radius*sin(n*radians(a));
        x = newRad*cos(radians(a)); 
        y = newRad*sin(radians(a)); 
        petalPointX[a] = x;
        petalPointY[a] = y;
        vertex (x,y);
    }
    endShape();
    petalLines(rate);
}

//draw lines at determine increments from center to petal coordinate
function petalLines(rate){
    stroke("black");
    for(var i=0; i<=petalPointX.length;i = i+rate){
        line (petalPointX[i],petalPointY[i],0,0);
    }
            
}

//add or subtract petal depending on mouse location
function petals(){
    if(state==1){
        if(mouseX>=width/2){
             n=n+0.01;
        }if(mouseX<width/2){
             n=n-0.01;
        }
        
        petalState=1;
    }   
}

Project 7 – Curves

It slowly draws a butterfly if u move your mouse from left to right!

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 *
 * This Program is ButterFly and Flower Curves
 */



function setup() {
    createCanvas(480,480);
}

function draw() {
    background(220);
//create constrain for the rest of the codes' mouse X and Y
    var conY = constrain(mouseY,0,height);
    var conX = constrain(mouseX,0,width);
//create two array sets for Flower's X and Y
    var pointX2 = [];
    var pointY2 = [];
//remapping A and B with mouse X and Y
//A => inner circle, B => outer circle 
    var a = map(conY,0,width,50,150);
    var b = map(conX,0,width,5,15);
    var h = 20;
//using for loop to get points
    for (var k=0; k<=2000; k+=1)
    {   
        //2 PI but 2000 points
        var t=k/1000*Math.PI;
        //epitrochoid formulas for X and Y
        var xP2= width/2+((a+b)*Math.cos(t)-h*cos(((a+b)/b)*t));
        var yP2= height/2+((a+b)*Math.sin(t)-h*sin(((a+b)/b)*t));
        //push values to lists
        pointX2.push(xP2);
        pointY2.push(yP2);
    }
//connect vertexes and close them
    push();
    noFill();
    //stroke
    stroke(0);
    strokeWeight(5);
    beginShape();
    for (var k=0; k<=2000; k+=1)
    {   
        vertex(pointX2[k],pointY2[k]);
    }
    endShape(CLOSE);
    pop();
//connect vertexes and close them
    push();
    //no stroke only fill
    fill(255,200,200);
    strokeWeight(0);
    beginShape();
    for (var k=0; k<=2000; k+=1)
    {   
        vertex(pointX2[k],pointY2[k]);
    }
    endShape(CLOSE);
    pop();
//same logics but this time it is the butterfly curves
    var pointX = [];
    var pointY = [];
    for (var k=0; k<=2400; k+=1)
    {   
        //Mouse Y dictate how big the butterfly will be
        var xP= width/2-map(conY,0,width,0,100)*Math.sin(k/100*Math.PI)*((Math.exp(Math.cos(k/100*Math.PI))) - (2*Math.cos(4*(k/100*Math.PI))) - (Math.pow(Math.sin((k/100*Math.PI)/12), 5)));
        var yP= height/2-map(conY,0,width,0,100)*Math.cos(k/100*Math.PI)*((Math.exp(Math.cos(k/100*Math.PI))) - (2*Math.cos(4*(k/100*Math.PI))) - (Math.pow(Math.sin((k/100*Math.PI)/12), 5)));
        pointX.push(xP);
        pointY.push(yP);
    }

//this time I use smaller circles to represent the curves
    fill (90,map(conY,0,width,0,255),100);
    stroke (90,map(conY,0,width,0,255),100);
    //mouse X dictates how many circles
    for (var k=0; k<=conX*4; k+=1)

    {
        circle (pointX[k],pointY[k],3);
    }
    }

Project 7 – Composition With Curves

Using multiple layers of atomic spirals, I created a composition that emulates either the acquisition & rotation of electrons around a nucleus or planets around a Sun – whichever interpretation is up to the viewer. In order to emphasize the idea of ‘cosmic creation’, I added randomly generated stars that twinkle from last weeks project and a lower opacity epispiral in the background to give an subtle explosion type effect.

Features:
– mouseX controls a (rotation of the circulating bodies)
– mouseY controls n (scale of epispiral + no. of points)

sketch
// Name: Tsz Wing Clover Chau
// Section: E 
// email: ctchau@andrew.cmu.edu
// Project-07

var a = 0;
var atomStart = 360
let stars = [];
var nStars = 60;
var noiseParam = 0;
var noiseStep = 0.08;
var count = 0;
var twinkleRate = 10;



function setup() {
    createCanvas(480, 480);
    background(0);
    for (var i = 0; i<nStars; i++){
        stars.push([random(0, width), random(0, height), noise(noiseParam)]);
        noiseParam += noiseStep;
    }
}

function draw() {
    background(0);

    for (var i = 0; i<nStars; i++){
        curStar = stars[i];
        push();
        noStroke();
        fill(100);
        circle(curStar[0], curStar[1], curStar[2]*5);
        if (count % twinkleRate == 0){
            twinkle(curStar)
        }
        
        pop();
    }



    var h = constrain(mouseY, 0, height);
    var w = constrain(mouseX, 0, width);


    //atomic spiral
    noFill();
    stroke(255);
    
    a = map(h, 0, height, 0, 16);

    
    beginShape();
    for (var i = 60*a; i <= 360*a; i++){
        var theta = radians(i);
        var r = theta/(theta-a)*65;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        
        if (i == 360*a){
            push();
            fill(190);
            circle(x, y, width/70);
            pop();

        } 
    }
    endShape();


    // SUN / NUCLEUS
    a2 = map(h, 0, height, 0, 10);
    beginShape();
    for (var i = -360*a2; i <= 0; i++){
        var theta = radians(i);
        var r = theta/(theta-a2)*50;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        if (i == -360*a2){
            push();
            fill(255);
            stroke(2);
            circle(x, y, width/20);
            pop();
        }
    }
    endShape();


    b = map(h, height/3, height, 0, 16);
    beginShape();
    for (var i = 60*b; i <= 360*b; i++){
        var theta = radians(i);
        var r = theta/(theta-b)*100;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
        
        if (i == 360*b){
            push();
            fill(190);
            circle(x, y, width/50);
            pop();

            circle(x, y, width/20);
        } 
    }
    endShape();



    if (mouseY >=  height/2){
        c = map(h, height/2, height, 0, 16);
        beginShape();
        for (var i = 90*c; i <= 360*b; i++){
            var theta = radians(i);
            var r = theta/(theta-c)*150;
            var x = r * cos(theta) + width/2;
            var y = r * sin(theta) + height/2;
            vertex(x, y);

            
            if (i == 360*c){
                push();
                fill(190);
                circle(x, y, width/50);
                pop();
            } 
        }
        endShape();
    }
    
    

    //poinsot's spirals
    var n = map(w, 0, width, 0, 8);
    push();
    stroke(150, 150, 150, 150);

    beginShape();
    for (var i = -360; i <= 360*b; i++){
        var theta = radians(i);
        var r = pow(n, 3)*abs(1/cos(n*theta));
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
    }    
    endShape();
    pop();

    count++;

}


function twinkle(star){
    //constraining star size
    if (star[2] >= 1){
        star[2] -= random(0.8, 0.8);
    } else {
        star[2] += random(-0.4, 0.4);
    }
    star[2] = abs(star[2]);
}

07 Project

sketch
//Evette LaComb 
//section D 
//deliverable 7 project

var Cardioid= 0; // Astroid Inovulte oarametric 
var nPoints = 100; // points manipulted on the shape 


function setup() {
    frameRate(5);
    createCanvas(400, 400);
    background(220);
}

function draw() {
    background("lightBLue")
    // if mouse is above or below the monster backgrounf red:
    if (dist(width/2, mouseY, width/2, height/2) > 100) {
        background("red");
    } 
    //Draw the astroid monster
    fill("white"); 
    draw_cardioid(width/2, 150);
    }

    function draw_cardioid(x, y) {
        // transformations for esthetics
        push();
        translate(x, y);
        rotate(radians(90));
        // set variables
        var x;
        var y;
        //set esthetics
        stroke("red");
        fill("blue");
        //draw monster occording to the cardioid equations 
        beginShape();
    for (var i = 0; i < nPoints; i++) {
        var manipulate = mouseX/20;
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = mouseX/8 +50;
        var p = random(mouseY/350, .5);
        var q = random(mouseY/350, .5);

        

        x = a *(1+ cos(t)) *(cos(t) * 1.5 * p);
        y = a *(1+ cos(t)) *(sin(t)* 1.5 *q);
        vertex(x, y);
        } 
        endShape(CLOSE);
        pop();
     
    }

Project-07-curves


The most difficult part of this project is to find out how which curve formula to use for my design. I played around with different colors and shape overlapping and I like the flower shape it makes.

sketch

//Jenny Wang
//sectionB
//jiayiw3@andrew.cmu.edu
//project - 07 - curves

var nPoints = 150;

function setup() {
    createCanvas(480, 480);
    background(29,7,79);//dark purple
    frameRate(10);
}

function draw() {
    push();
    //make the center of canvas the origin
    translate(width/2,height/2);

    //draw loop for the curves 1 & 2
    background(29,7,79);//dark purple
    curve1();
    curve2();
    curve3();
    pop();
}

function curve1(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set varibale
    var x;
    var y;
    var a = mouseX/8
    var b = mouseY/8
    
    beginShape();
    noFill();
    stroke(247,246,208);//light yellow
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,TWO_PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function curve2(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set variable
    var x;
    var y;
    var a = mouseX/5
    var b = mouseY/5
    
    beginShape();
    noFill();
    stroke("white");//white
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,PI+QUARTER_PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function curve3(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set variable
    var x;
    var y;
    var a = mouseX/3
    var b = mouseY/3
    
    beginShape();
    noFill();
    stroke("pink");//pink
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

Project 7 Curves – Flower Blossom

sketch
//SRISHTY BHAVSAR
//15-104 SECTION C
//PROJECT 7

var nPoints = 500;

function setup() {
    createCanvas(400, 400);

}


function draw() {
    createCanvas(480, 480);
    background(0);
    // draw the curve

    fill(154,205,40,70); // yellow green color
    ranunculoid(10,20);
    hypotro();
    noFill();
    ranunculoid(30,50);
    ranunculoid(40,60);


}

//--------------------------------------------------
function hypotro() {
    // Hypotrochoid
    // https://mathworld.wolfram.com/Hypotrochoid.html
    
    push();
    noFill();
    stroke('magenta');
    strokeWeight(1);
    translate(width/2 , height/2);
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 60, 160); //radius of still circle
    var b = map(y, 0, height, 1, 8); // radius b of rolling circle inside still circle
    var h = constrain(a/2, 100, 100); //
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map( i, 0, nPoints, 0, TWO_PI); // tangent?
        //PARAMETRIC EQUATIONS
        x = (a - b) * cos(t) + (h * cos(((a-b)/b)*t)); 
        y = (a - b) * sin(t) - (h * sin(((a-b)/b)*t));
        vertex(x,y); // connected to center vertex

    }
    endShape();
    pop();
}

//--------------------------------------------------

function ranunculoid(xsize,ysize) {
    // https://mathworld.wolfram.com/Ranunculoid.html
    push();
    stroke('green');
    strokeWeight(1);
    translate(width/2 , height/2);  
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, xsize, ysize); 
    beginShape();
    for (var i = 0; i < nPoints/10; i++) {
        var t = map(i, 0, nPoints/10, 0, TWO_PI);

        x = a * (( 6 * cos(t)) - cos(6*t))
        y = a * (( 6 * sin(t)) - sin(6*t))
        vertex(x, y);
    }
    endShape();
    pop();
}
equations