I connected mouseX and mouseY to the mapping of t to visualize the continuous movement of the curves and the larger shapes they create. It is interesting as you can watch it wind itself, giving a Spirograph effect. I then connected mouseX to a of the ranunculoid which affects the scaling from left to right. It is interesting how both x and y on the canvas determines the complexity of the shapes created. I also had fun experimenting with the different ways the shapes could be shown and decided to have the hypocycloid made of small squares.
project7
// Rachel Legg / rlegg / Section C
//# of point of each shape
var nPoints = 150;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw() {
//draw the ranunculoid & astroid curve
background(0, 38, 38); //dark green-blue
fill(255);
push();
translate(width/2, height/2);
fill(121, 33, 250); //purple
drawRanunculoid();
noFill();
drawHypocycloid();
scale(1/12);
fill(105, 20, 235); //darker purple
drawRanunculoid();
pop();
}
function drawRanunculoid() {
//Ranunculoid : https://mathworld.wolfram.com/Ranunculoid.html
var x;
var y;
var a = 30;
stroke(149, 198, 35); //green
strokeWeight(1);
beginShape();
for(var i = 0; i < nPoints; i++) {
//map points to mouseX & mouseY for continuous flow
var t = map(i, 0, nPoints, mouseX, mouseY);
a += mouseX / 500; //scale when mouseX changes
//adjust to 7 to increase petals to 6
x = (a * (7 * cos(t) - cos(7 * t)));
y = (a * (7 * sin(t) - sin(7 * t)));
vertex(x, y); //vertex gets spinograph effect
//line(x - 5, y - 5, 10, 10); //visually different. shows lines to center
}
endShape(CLOSE);
}
function drawHypocycloid() {
//https://mathworld.wolfram.com/Hypocycloid.html
var x;
var y;
var a = 110;
var b = 30;
noFill();
stroke(212, 223, 158); //light green
strokeWeight(1);
for(var i = 0; i < nPoints; i++){
//map points to mouseX & mouseY for continuous change
var t = map(i, 0, nPoints, mouseX, mouseY);
x = ((a - b) * cos(t)) - (b * cos(t * ((a - b) / b)));
y = ((a - b) * sin(t)) - (b * sin(t * ((a - b) / b)));
//rectangle shapes to show patterns
rect(x - 5, y - 5, 10, 10);
}
}