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);
}
}