setup()
setup() runs once at startup and is the perfect place to create all your objects once, do expensive calculations, and initialize canvas properties. By putting geometry calculations in the Rosette constructor (called from setup), this sketch avoids recalculating trigonometry every frame, which would be wasteful since the image never changes.
function setup() {
createCanvas(1000, 1000);
angleMode(DEGREES);
noFill();
rectMode(CENTER);
// Pre-calculate rosette parameters
let sqSideLength = (width / 4) * 1.0;
let nPoints = 24;
let angle = 360 / nPoints;
// Create all rosette objects once in setup
for (let i = 0; i < nPoints; i++) {
rosettes.push(new Rosette(sqSideLength, nPoints));
}
centerRosette = new Rosette(sqSideLength, nPoints); // Central rosette for stars
noLoop(); // Draw once
}Line-by-line explanation (10 lines)
🔧 Subcomponents:
for-loop
Rosette Instantiation Loop
for (let i = 0; i < nPoints; i++) {
rosettes.push(new Rosette(sqSideLength, nPoints));
}
Creates 24 Rosette objects, each containing all geometry and stars, and adds them to the rosettes array for later display
createCanvas(1000, 1000);- Creates a 1000×1000 pixel square canvas, which is large enough to display the detailed geometry without crowding
angleMode(DEGREES);- Tells p5.js that all angles in this sketch are in degrees (0–360) rather than radians, making the math more intuitive
noFill();- Disables fill color for all shapes, so only the stroke outlines of petals and stars will be visible
let sqSideLength = (width / 4) * 1.0;- Calculates the base unit size for petal geometry as one quarter of the canvas width—250 pixels—which scales all geometric calculations
let nPoints = 24;- Sets the number of petals and the number of points on the central star; 24 is a traditional Islamic pattern value
let angle = 360 / nPoints;- Calculates the rotation angle between adjacent petals; 360 / 24 = 15 degrees per petal
for (let i = 0; i < nPoints; i++) {- Loops 24 times, once for each petal, creating and storing a new Rosette object in the array
rosettes.push(new Rosette(sqSideLength, nPoints));- Instantiates a Rosette object with the petal size and point count, then adds it to the rosettes array; the Rosette constructor does all the heavy trigonometric math at this moment
centerRosette = new Rosette(sqSideLength, nPoints);- Creates one additional Rosette object whose stars will be drawn at the center; uses the same geometry as the outer rosettes
noLoop();- Stops the p5.js animation loop after draw() runs once; this is a static image, not an animation, so we don't need draw() to repeat
