add shape descriptions where applicable

src/features/layers/LayerEditor.js

@@ -33,18 +33,23 @@ const LayerEditor = () => {
   }
   const link = model.link
   const linkText = model.linkText || "here"
-  const renderedLink = link ? (
-    <div className="mt-3 ms-3 mb-4">
-      See{" "}
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href={link}
-      >
-        {linkText}
-      </a> for more information.
-    </div>
-  ) : undefined
+  const description = model.description ? model.description + " " : ""
+
+  const renderedLink =
+    link || description ? (
+      <div className="mt-3 mx-3 mb-4 bg-light p-4">
+        {description}
+        See{" "}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={link}
+        >
+          {linkText}
+        </a>{" "}
+        for more information.
+      </div>
+    ) : undefined
 
   const handleChangeType = (selected) => {
     dispatch(changeModelType({ id: layer.id, type: selected.value }))
@@ -206,11 +211,12 @@ const LayerEditor = () => {
           </Row>
         </div>
       )}
-      {renderedLink}
 
       <div className="border-top border-secondary px-3 pt-1">
         <EffectManager />
       </div>
+
+      {renderedLink}
     </div>
   )
 }

src/features/shapes/Epicycloid.js

@@ -18,7 +18,9 @@ export default class Epicycloid extends Shape {
     super("epicycloid")
     this.label = "Clover"
     this.link = "http://mathworld.wolfram.com/Epicycloid.html"
-    this.linkText = "Epicycloid at Wolfram Mathworld"
+    this.linkText = "Wolfram Mathworld"
+    this.description =
+      "The clover shape is actually an epicycloid. Imagine two circles, with an outer circle rolling around an inner one. The path created by a point on the outer circle as it rolls is called an epicycloid."
   }
 
   getInitialState() {

src/features/shapes/Heart.js

@@ -5,8 +5,10 @@ export default class Heart extends Shape {
   constructor() {
     super("heart")
     this.label = "Heart"
+    this.description =
+      "Heart curves can be defined mathematically a number of different ways. Our heart shape is a parametric equation."
     this.link = "http://mathworld.wolfram.com/HeartCurve.html"
-    this.linkText = "HeartCurve at Wolfram Mathworld"
+    this.linkText = "Wolfram Mathworld"
   }
 
   getInitialState() {

src/features/shapes/Hypocycloid.js

@@ -18,7 +18,9 @@ export default class Star extends Shape {
     super("hypocycloid")
     this.label = "Web"
     this.link = "http://mathworld.wolfram.com/Hypocycloid.html"
-    this.linkText = "Hypocycloid at Wolfram Mathworld"
+    this.linkText = "Wolfram Mathworld"
+    this.description =
+      "The web shape is actually an hypocycloid. Imagine two circles, with an inner circle rolling around inside an outer one. The path created by a point on the inner circle as it rolls is called an hypocycloid."
   }
 
   getInitialState() {

src/features/shapes/NoiseWave.js

@@ -35,6 +35,10 @@ export default class NoiseWave extends Shape {
     this.selectGroup = "Erasers"
     this.usesMachine = true
     this.autosize = false
+    this.link = "https://en.wikipedia.org/wiki/Perlin_noise"
+    this.linkText = "Wikipedia"
+    this.description =
+      "Perlin noise is a type of gradient noise that can be used to generate textures and terrain. Here we use it to create an appealing series of wavy lines."
   }
 
   canMove(state) {

src/features/shapes/Reuleaux.js

@@ -13,6 +13,10 @@ export default class Reuleaux extends Shape {
   constructor() {
     super("reuleaux")
     this.label = "Reuleaux"
+    this.description =
+      "A reuleaux polygon is a curve of constant width made up of circular arcs of constant radius. It's named after Frances Reuleaux, a 19th century German engineer who used Reuleaux triangles in his designs."
+    this.link = "https://en.wikipedia.org/wiki/Reuleaux_polygon"
+    this.linkText = "Wikipedia"
   }
 
   getInitialState() {

src/features/shapes/Rose.js

@@ -18,8 +18,10 @@ export default class Rose extends Shape {
   constructor() {
     super("rose")
     this.label = "Rose"
-    this.link = "http://mathworld.wolfram.com/Rose.html"
-    this.linkText = "Rose at Wolfram Mathworld"
+    this.link = "https://mathworld.wolfram.com/RoseCurve.html"
+    this.linkText = "Wolfram Mathworld"
+    this.description =
+      "A rose curve is a curve which has the shape of a petalled flower."
   }
 
   getInitialState() {

src/features/shapes/circle_packer/CirclePacker.js

@@ -41,6 +41,10 @@ export default class CirclePacker extends Shape {
     this.usesMachine = true
     this.autosize = false
     this.selectGroup = "Erasers"
+    this.link = "https://en.wikipedia.org/wiki/Circle_packing"
+    this.linkText = "Wikipedia"
+    this.description =
+      "Circle packing is an arrangement of circles of varying sizes such that no overlapping occurs and no circle can be enlarged without creating an overlap."
   }
 
   canMove(state) {

src/features/shapes/fractal_spirograph/FractalSpirograph.js

@@ -34,8 +34,10 @@ export default class FractalSpirograph extends Shape {
     super("fractalSpirograph")
     this.label = "Fractal spirograph"
     this.link =
-      "https://benice-equation.blogspot.com/2012/01/fractal-spirograph.html"
-    this.linkText = "this blog post on benice equations"
+      "https://softologyblog.wordpress.com/2017/02/27/fractal-spirographs/"
+    this.linkText = "this blog post"
+    this.description =
+      "Fractal spirographs are generated by a series of circles rotating around each other. The pattern is created by tracking a point as it rolls along the outermost circle."
   }
 
   getInitialState() {

src/features/shapes/lsystem/LSystem.js

@@ -34,7 +34,9 @@ export default class LSystem extends Shape {
     super("lsystem")
     this.label = "Fractal line writer"
     this.link = "https://en.wikipedia.org/wiki/L-system"
-    this.linkText = "L-systems at Wikipedia"
+    this.linkText = "Wikipedia"
+    this.description =
+      "The fractal line writer shape is actually a Lindenmayer (or L) system. L-systems chain symbols together to specify instructions for moving in a 2d space (e.g., turn left or right, walk left or right). When applied recursively, they generate fractal-like patterns."
   }
 
   getInitialState() {

src/features/shapes/space_filler/SpaceFiller.js

@@ -37,8 +37,10 @@ export default class SpaceFiller extends Shape {
     this.usesMachine = true
     this.autosize = false
     this.selectGroup = "Erasers"
-    this.linkText = "Fractal charm: space filling curves"
-    this.link = "https://www.youtube.com/watch?v=RU0wScIj36o"
+    this.linkText = "Wikipedia"
+    this.description =
+      "A space-filling curve draws a single, continuous line that covers every point in a space without missing any spots or crossing itself."
+    this.link = "https://en.wikipedia.org/wiki/Space-filling_curve"
   }
 
   canMove(state) {

src/features/shapes/tessellation_twist/TessellationTwist.js

@@ -83,11 +83,16 @@ const options = {
   },
 }
 
-// Adapted from https://codepen.io/rafaelpascoalrodrigues/pen/KpBJve. See NOTICE for licensing details.
+// Adapted from https://codepen.io/rafaelpascoalrodrigues/pen/KpBJve.
+// See LICENSE for licensing details.
 export default class TessellationTwist extends Shape {
   constructor() {
     super("tessellationTwist")
     this.label = "Tessellation twist"
+    this.link = "https://en.wikipedia.org/wiki/Tessellation"
+    this.linkText = "Wikipedia"
+    this.description =
+      "The tessellation twist shape is form of tessellation. Tessellations cover a surface using tiles (in our case an equilateral triangle) with no overlaps or gaps."
   }
 
   getInitialState() {

src/features/shapes/v1_engineering/V1Engineering.js

@@ -5,6 +5,10 @@ export default class V1Engineering extends Shape {
   constructor() {
     super("v1Engineering")
     this.label = "V1Engineering"
+    this.link = "https://www.v1e.com/"
+    this.linkText = "V1 Engineering"
+    this.description =
+      "This shape represents the V1 Engineering logo. V1 Engineering provides low-cost, customizable machine designs. Sandify was created in 2017 by users in their forum."
   }
 
   getInitialState() {