Converting random doodles to awesome rangolis!
Checkout Rangoli maker now!
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);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent