sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var nPoints = 100;
function setup() {
createCanvas(410, 400);
}
function draw() {
background(171, 230, 255);
for(var i=30; i<=400;i+=100){
for(var j=30; j<=400;j+=60){
push();
translate(i,j);
daisy();
pop();
}
}
for(var k=80; k<=400;k+=100){
for(var l=0; l<=600;l+=60){
push();
translate(k,l);
daisy();
pop();
}
}
}
function daisy() {
//drawing a daisy
var x;
var y;
// making a ranunculoid or a 10-cusp epicycloid
var petal = 10;
if (mouseY >= height/3 & mouseY < height*(2/3)){
petal = 5;
}
var a = 20;
var b = a / petal;
var h = b;
// making a fried egg
if (mouseY < height/3) {
h = 0;
}
var ph = mouseX / 50.0;
var ph = mouseX / 50.0;
fill(255);
stroke(100);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = (a + b) * cos(t) - h * cos(ph + t * (a + b) /b);
y = (a + b) * sin(t) - h * sin(ph + t * (a + b) /b);
vertex(x, y);
}
endShape(CLOSE);
// middle part
fill(255, 253, 158);
circle(0, 0, a);
}
For this project, I decided to create an interactive pattern using ranunculoid and 10-cusps epicycloid curves. The pattern changes from a pattern of fried eggs, when mouseY is in the first third of the canvas, to a pattern of 5-petals daisies, when mouseY is in the second third of the canvas, and to a pattern of 10-petals daisies, when mouseY is in the last third of the canvas. The pattern also spins when mouseX changes.