Coding the Maurer Rose

Introduction

In this tutorial, you will learn how to code the Maurer Rose pattern using JavaScript and the p5.js library. The Maurer Rose is a mathematical curve that creates beautiful, intricate designs. This guide will walk you through the coding process step-by-step, allowing you to visualize the pattern and even add interactive elements such as sliders.

Step 1: Set Up Your Development Environment

To begin coding, you'll need to set up the p5.js web editor. Follow these steps:

1. Go to the p5.js Web Editor: p5.js Web Editor.
2. Create a new sketch by clicking on "New".
3. Familiarize yourself with the interface, which includes a code editor and a preview window.

Step 2: Initialize the Sketch

Start by setting up the basic structure of your p5.js sketch:

1. Define the setup function to initialize your canvas.
2. Use the createCanvas function to specify the size of your drawing area.
3. Set the background color.

Here’s a simple example of the code:

function setup() {
    createCanvas(400, 400);
    background(255);
}

Step 3: Create the Maurer Rose Function

Next, you will create a function to draw the Maurer Rose pattern. The function will use polar coordinates to calculate the positions of points:

1. Define a new function called maurerRose.
2. Use a loop to calculate the x and y coordinates based on the angle and a mathematical formula.

Here’s a simple implementation:

function maurerRose(n, d) {
    beginShape();
    for (let angle = 0; angle < TWO_PI * n; angle += 0.01) {
        let r = cos(d * angle) * (n / 2);
        let x = r * cos(angle);
        let y = r * sin(angle);
        vertex(x, y);
    }
    endShape();
}

Step 4: Visualize the Pattern

Now, call the maurerRose function inside the draw function to visualize the pattern:

1. Inside the draw function, clear the canvas with background().
2. Set the stroke color and weight for the lines.
3. Call the maurerRose function with parameters for n and d.

Example:

function draw() {
    background(255);
    stroke(0);
    strokeWeight(2);
    maurerRose(5, 2); // Change these values to see different patterns
}

Step 5: Add Interactivity with Sliders

To enhance your visualization, you can add sliders that allow users to change the parameters dynamically:

1. Create sliders for n and d using the createSlider function in the setup.
2. Use the slider values in the draw function to update the pattern.

Example code for sliders:

let nSlider, dSlider;

function setup() {
    createCanvas(400, 400);
    nSlider = createSlider(1, 10, 5);
    dSlider = createSlider(1, 10, 2);
}

function draw() {
    background(255);
    stroke(0);
    strokeWeight(2);
    let n = nSlider.value();
    let d = dSlider.value();
    maurerRose(n, d);
}

Conclusion

By following these steps, you have successfully created a visualization of the Maurer Rose pattern in p5.js. You learned how to set up your environment, create the drawing function, visualize the pattern, and add interactivity with sliders.

As next steps, consider experimenting with different values for n and d to see how they affect the pattern. You can also explore additional features, such as color changes or saving the output as an image. Happy coding!