Rangoli maker

Converting random doodles to awesome rangolis!

Checkout Rangoli maker now!

Core Algorithm:

Following draw() function is called in an infinite loop by p5.js library to update canvas. Based on user's input point (given by either mouse or touch input), this algorithm draws 7 other mirror points to simulate symmetrical figure.

function draw() {
  translate(width/2,height/2);
  fill(r,g,b);
  if(mouseIsPressed && isMouseInCanvas()) {
    if(untouched) {
      background(0);
      showButtons();
    }
    untouched = false;
    let x = map(mouseX, 0, width, -width/2, width/2);
    let y = map(mouseY, 0, height, -height/2, height/2);
    ellipse(x,y, diameter,diameter);
    ellipse(-x,y, diameter,diameter);
    ellipse(x,-y, diameter,diameter);
    ellipse(-x,-y, diameter,diameter);
    ellipse(y,x, diameter,diameter);
    ellipse(-y,x, diameter,diameter);
    ellipse(y,-x, diameter,diameter);
    ellipse(-y,-x, diameter,diameter);
  }
}