Maurer rose

// Boilerplate, gotta be somewhere, right?
document.body.innerHTML = ''; // Strips the page of its stuff, in case you just want to paste this into the console in a new tab or really anywhere.
const canv = document.createElement('canvas');
canv.width = 800;
canv.height = 800;
document.body.appendChild(canv);
const ctx = canv.getContext('2d');

// Alright, rose time.
let n = 6, d = 71; // These can be any combination, but this one is nice.

ctx.translate(canv.width / 2, canv.height / 2);

ctx.beginPath();
ctx.lineWidth = 0.5;
ctx.strokeStyle = 'blue';
for (let theta = 0; theta <= 360 /* we're working with degrees, remember? */; theta++){
    let k = theta * d * Math.PI / 180;
    let r = 300 * Math.sin(n * k);
    let x = -r * Math.cos(k);
    let y = -r * Math.sin(k);
    ctx.lineTo(x, y);
    ctx.moveTo(x, y);
}
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = 'red';
for (let theta = 0; theta <= 360; theta++){
    let k = theta * Math.PI / 180;
    let r = 300 * Math.sin(n * k);
    let x = r * Math.cos(k);
    let y = -r * Math.sin(k);
    ctx.lineTo(x, y);
    ctx.moveTo(x, y);
}
ctx.stroke();

/*p5.js is a port of Processing that can be run in the browser.  By going to editor.p5js.org, clearing the code there, pasting this in, and pressing the Play button, you can run it.  

A user interface was added so they can select the values of "n" and "d" and also change the formula from sin to any of the 6 basic trig functions (Note: only the sine function is a valid Maurer Rose)*/

let n;
let d;

function setup() {
  createCanvas(400, 400);
  //sets up the slider for n
  sliderPetals = createSlider(1,100,6);
  sliderPetals.style('width', '300px');
  sliderPetals.position(30,height+5);
  
  //sets up the slider for d
  sliderD = createSlider(1,360,71);
  sliderD.style('width', '300px');
  sliderD.position(30,height+30);
  
  //sets up the radio options for the angle formula
  angleOptions = createRadio();
  angleOptions.position(10, 460);
  angleOptions.option('sin');
  angleOptions.option('cos');
  angleOptions.option('tan');
  angleOptions.option('sec');
  angleOptions.option('csc');
  angleOptions.option('cot');
  angleOptions.style('width', '60px');
  
  //reduces the number of calculations your browser has to do
  frameRate(3);
}

function draw() {
  n = sliderPetals.value();
  d = sliderD.value();
  background(255);
  push();
  noFill();
  beginShape();
  stroke(0, 0, 255);
  strokeWeight(0.5);
  angleMode(DEGREES);
  translate(width/2, height/2);
  for(let theta = 0; theta <= 360; theta++){
    let k = theta * d;
    let r = width/2 * angleFormula(n,k);
    let  x = r * cos(k);
    let y = r * sin(k);
    vertex(x, y);
  }
  endShape();

  beginShape();
  stroke(255, 0, 0);
  strokeWeight(2);
  for(let theta = 0; theta <= 360; theta++){
    let k = theta;
    let r = width/2 * angleFormula(n,k);
    let x = r * cos(k);
    let y = r * sin(k);
    vertex(x, y);
  }
  endShape();
  pop();
  stroke(255);
  textFont('Georgia', 20);
  text('N (#Petals): ' + str(n), 10,20);
  text('D :' + str(d), 10, 50);
}


function angleFormula(n,k) {
  switch(angleOptions.value()) {
    case "sin": 
      return sin(k*n);
    case "cos": 
      return cos(k*n);
    case "tan": 
      return tan(k*n);
    case "csc": 
      return (1/sin(k*n));
    case "sec": 
      return (1/cos(k*n));
    case "cot": 
      return (1/tan(k*n));
    default:
      return sin(k*n);
  }
}