polar-shapes.md

Polar Shapes - WIP

The shape code can be found in the shapes.js file. The ShapeUI class (shape_ui.js) adds the dropdown and add a new Shape in the selectShape(shapeName, shapeValues) function. A switch statement to select the specific shape choosen by the user. The selectShape() function is called in the addLsystem() function is the Turtle class (turtle.js).

If you would like to learn more about polar coordinates and rendering polaring shapes, I highly recommend reading Daniel Shiffman's The Nature of Code book or watching some of Daniel Shiffman's tutorial videos. You can find an p5.js sketch here for experimenting with the shape parameters.

Polar Coordinates - The Nature of Code

Code

Here is the code to instantiate the Shape class:

selectedShape = new Shape(
    0,
    0,
    length * shapeScale,
    a,
    b,
    m,
    n1,
    n2,
    n3,
    n,
    shapeAngle
);

While most of the shapes are closed, several shapes are "open" by nature. There are therefore two different functions in the Shapes class to render the shape -- a show() and an openShow(). I have also added messaging about the shape curves which appears when the shape is selected if it is a function of the shape parameters (a, b, m, n1, n2, n3, n). For example, if the supershape is selected, this message appears:

The supershape curve is a f(a, b, m, n, n1, n2, n3).

🌄 Shape Images

Archimedes spiral	Astroid	Bicorn	Cassini oval
Ceva	Cornu Spiral	Maltese Cross	Deltoid
Eight curve	Gear curve	Heart curve	Kiss curve
Quadrifolium	Quadrilateral	Superellipse	Supershape
Tear