2c:null 2d:["$","title",null,{"children":"Building a Parametric Seashell | Brianna Wilson | Observable"}] 32:T91b,md`# Building a Parametric Seashell

*Learn about the underlying geometry of seashells, and how to modify the structure on your own, with these interactive WebGL models. The models are built with regl and are based on the paper [Seashells: The Plainness and Beauty of their Mathematical Description]() by Jorge Picado*

The clam and the conch seem to be drastically different creatures. One spends its life burrowing in the sand, staying in one spot to glean nutrients from the water. The other constantly vaults itself around the seafloor to find its next meal. One has a gently curving, sand-colored shell, whereas the other has a shell spiking and spiraling and splaying out in the colors of the sunset. These two species are opposites in many ways, yet the same equation underlies both of their shells. In fact, find any mollusk shell, and it can be described by the same equation, too. The equation starts with a spiral. Logarithmic spirals are all over nature. You can see them in the pattern of sunflower seeds, the arms of galaxies, even in the shoreline of many [sandy beaches](). A logarithmic spiral is a type of fractal, which means that no matter how far you zoom in or out, the spiral is the same. It turns out that if you look at the shell of a mollusk when it's a tiny baby and when it's fully grown, the shell will look identical, just at a different scale. Spirals are logarithmic when they have a constant angle, alpha, between 2 lines: one from the origin to a point (any point) on the spiral, and another that is tangent to the spiral at that point:

Logarithmic spiral superimposed on shell

No matter where you are on a logarithmic spiral, alpha stays the same. For a circle, alpha is always 90 degrees, but when alpha squeezes below 90, the line spills outward, flowing in an ever-increasing round. You can create remarkably distinct spirals with different values of alpha, and this is where the wide variety in seashells begins. See what happens when you change alpha below:`33:T5d7,ellipse1 = { let positions = [] // spiral parameters let A = 25 //radius at theta = 0 let alpha = 83 //spiral angle let coils = 8 let theta = 0 //start angle let t = 2*Math.PI * coils //end angle let alphaRad = alpha * (Math.PI/180) //angle of tangent (offset from 90 degrees) //let beta = 19 //enlarging angle of each coil in z let betaRad = beta * (Math.PI/180) //enlarging angle in z let ellipsePos = iSlider * Math.PI // ellipse variables let sRad = (s + 180) * (Math.PI/180) //start angle of ellipse let tCircleRad = (tCircle + 180) * (Math.PI/180) //end angle of ellipse let lineDivisions = 100 // the distance of a point to the origin, as a function of theta let r = (A * Math.exp(ellipsePos * (1/Math.tan(alphaRad)))) // the ellipse at each point along spiral for (let j = sRad; j < tCircleRad; j = j + (Math.PI/lineDivisions)) { // radius of the ellipse 0 < j < 2*pi --> constant for a circle let re = Math.pow( Math.pow(Math.cos(j) / a , 2) + Math.pow(Math.sin(j) / b , 2), -0.5 ) // cartesian coordinates of each point along the ellipse let x = (A * Math.sin(betaRad) * Math.cos(ellipsePos) + Math.cos(j) * Math.cos(ellipsePos) * re) * (r / A) * scale let y = (A * Math.sin(betaRad) * Math.sin(ellipsePos) + Math.cos(j) * Math.sin(ellipsePos) * re) * (r / A) * scale let z = (-A * Math.cos(betaRad) + Math.sin(j) * re ) * (r / A) * scale + centerZ1 positions.push(x, y, z) } return positions }34:T74f,ellipse2 = { let positions = [] // spiral parameters let A = 25 //radius at theta = 0 let alpha = 83 //spiral angle let coils = 8 let theta = 0 //start angle let t = 2*Math.PI * coils //end angle let alphaRad = alpha * (Math.PI/180) //angle of tangent (offset from 90 degrees) //let beta = 19 //enlarging angle of each coil in z let betaRad = beta * (Math.PI/180) //enlarging angle in z // ellipse parameters let s = 0 //start angle of ellipse let tCircle = 2*Math.PI //end angle of ellipse let a = 11 //starting radius 1 of the ellipse let b = 8 //starting radius 2 of the ellipse let phiRad = phi * (Math.PI/180) let omegaRad = omega * (Math.PI/180) let muRad = mu * (Math.PI/180) let ellipsePos = iSlider * Math.PI let lineDivisions = 100 // the distance of a point to the origin, as a function of theta let r = (A * Math.exp(ellipsePos * (1/Math.tan(alphaRad)))) // the ellipse at this point along the spiral for (let j = s; j < tCircle; j = j + (Math.PI/lineDivisions)) { // radius of the ellipse 0 < j < 2*pi - constant for a circle let re = Math.pow( Math.pow(Math.cos(j) / a , 2) + Math.pow(Math.sin(j) / b , 2), -0.5 ) // cartesian coordinates of each point along the ellipse let x = (A * Math.sin(betaRad) * Math.cos(ellipsePos) + Math.cos(j + phiRad) * Math.cos(ellipsePos + omegaRad) * re - Math.sin(muRad) * Math.sin(j + phiRad) * Math.sin(ellipsePos + omegaRad) * re) * (r / A) * scale let y = (A * Math.sin(betaRad) * Math.sin(ellipsePos) + Math.cos(j + phiRad) * Math.sin(ellipsePos + omegaRad) * re + Math.sin(muRad) * Math.sin(j + omegaRad) * Math.cos(ellipsePos + omegaRad) * re) * (r / A) * scale let z = (-A * Math.cos(betaRad) + Math.cos(muRad) * Math.sin(j + phiRad) * re ) * (r / A) * scale + centerZ1 positions.push(x, y, z) } return positions }35:T99f,ellipse3 = { let positions = [] // spiral parameters let A = 25 //radius at theta = 0 let alpha = 83 //spiral angle let coils = 8 let theta = 0 //start angle let t = 2*Math.PI * coils //end angle let alphaRad = alpha * (Math.PI/180) //angle of tangent (offset from 90 degrees) //let beta = 19 //enlarging angle of each coil in z let betaRad = beta * (Math.PI/180) //enlarging angle in z // ellipse parameters let s = Math.PI //start angle of ellipse let tCircle = 3*Math.PI //end angle of ellipse let a = 11 //starting radius 1 of the ellipse let b = 8 //starting radius 2 of the ellipse let omega = 0 //tilt of opening around y-axis let phi = 0 //tilt of opening around z-axis let mu = 0 //tilt of opening around x-axis let phiRad = phi * (Math.PI/180) let omegaRad = omega * (Math.PI/180) let muRad = mu * (Math.PI/180) let ellipsePos = iSlider * Math.PI //nodule parameters let w1Rad = w1 * (Math.PI/180) let PRad = P * (Math.PI/180) + (2*Math.PI) let N = 2 //number of nodules per coil let w2 = 40 //length of each nodule along the spiral let lineDivisions = 100 // the distance of a point to the origin, as a function of theta let r = (A * Math.exp(ellipsePos * (1/Math.tan(alphaRad)))) // the ellipse at this point along the spiral for (let j = s; j < tCircle; j = j + (Math.PI/lineDivisions)) { //add nodules let lTheta = (2*Math.PI / N) * ( ((N * ellipsePos) / 2*Math.PI) - Math.floor((N * ellipsePos) / 2*Math.PI) ) let rn = L * Math.exp( -( Math.pow( (2 * (j - PRad)) / w1Rad , 2) + Math.pow( (2 * lTheta) / w2 , 2))) // radius of the ellipse 0 < j < 2*pi - constant for a circle let re = Math.pow( Math.pow(Math.cos(j) / a , 2) + Math.pow(Math.sin(j) / b , 2), -0.5 ) + rn // cartesian coordinates of each point along the ellipse let x = (A * Math.sin(betaRad) * Math.cos(ellipsePos) + Math.cos(j + phiRad) * Math.cos(ellipsePos + omegaRad) * re - Math.sin(muRad) * Math.sin(j + phiRad) * Math.sin(ellipsePos + omegaRad) * re) * (r / A) * scale let y = (A * Math.sin(betaRad) * Math.sin(ellipsePos) + Math.cos(j + phiRad) * Math.sin(ellipsePos + omegaRad) * re + Math.sin(muRad) * Math.sin(j + omegaRad) * Math.cos(ellipsePos + omegaRad) * re) * (r / A) * scale let z = (-A * Math.cos(betaRad) + Math.cos(muRad) * Math.sin(j + phiRad) * re ) * (r / A) * scale + centerZ1 positions.push(x, y, z) } return positions }36:T595,

Full equation (cartesian coordinates)

${tex`S(\theta, s) = \begin{cases} x(\theta, s) = \\ \quad[A \sin\beta \cos\theta + \cos(s + \phi) \cos(\theta + \Omega) \left( r_{e}(s) + r_{n}(s, \theta) \right)\\ \quad- \sin\mu \sin(s + \phi) \sin(\theta + \Omega) \left( r_{e}(s) + r_{n}(s, \theta) \right)] e^{\theta \cot\alpha} \\ \\ y(\theta, s) = \\ \quad[A \sin\beta \sin\theta + \cos(s + \phi) \sin(\theta + \Omega) \left( r_{e}(s) + r_{n}(s, \theta) \right)\\ \quad+ \sin\mu \sin(s + \phi) \cos(\theta + \Omega) \left( r_{e}(s) + r_{n}(s, \theta) \right)] e^{\theta \cot\alpha} \\ \\ z(\theta, s) = \\ \quad[-A \cos\beta + \cos\mu \sin(s + \phi) \left( r_{e}(s) + r_{n}(s, \theta) \right)]e^{\theta \cot\alpha} \\ \end{cases}\\`}
where ${tex`r_{e}(s)`}, the equation for an ellipse, is:
${tex`\left[ \left( \frac{\cos s}{a} \right)^2 + \left( \frac{\sin s}{b} \right)^2 \right]^{-1/2}\\`}
and ${tex`r_{n}(s, \theta)`}, what you add to the equation for the ellipse if there are nodules, is:
${tex`L e^{-\left[ \left( \frac{2\left(s - P\right)}{W_{1}} \right)^2 + \left( \frac{2l\left(\theta\right)}{W_{2}} \right)^2\right]}\\`}
and ${tex`l(\theta)`}, inserted into the equation for nodules to keep track of what nodule is being modeled, is:
${tex`\frac{2\pi}{N} \left[ \frac{N\theta}{2\pi} - int\left( \frac{N\theta}{2\pi} \right) \right] `}

37:T95f,viewof secondParams = columns({ presets : inputsGroup( [ [ Button("CLAM", {reduce: () => { mutable centerZSet = 0 mutable camDistance = 665 //alpha, beta, coils, A, lineDivs, a, b, mu, omega, phi, s, tCircle, w1, P, L, N, w2 mutable params = preset(37, 90, 0.6, 100, 150, 100, 100, 1, 1, 0, 0, 360, 30, 30, 0, 6, 30) } }), Button("CONCH", {reduce: () =>{ mutable centerZSet = -66 mutable camDistance = 303 mutable params = preset(84, -19, 8.4, 50, 150, 40, 14, 1, -2, 45, 120, 196, 6, 0, 8, 8, 27) } }), Button("NAUTILUS", {reduce: () => { mutable centerZSet = 0 mutable camDistance = 1025 mutable params = preset(80, 90, 8, 2, 100, 2, 1.5, 0, 0, 0, 0, 360, 30, 30, 0, 6, 30) } }), Button("WENTLETRAP", {reduce: () => { mutable centerZSet = -45 mutable camDistance = 204 mutable params = preset(86, 10, 10, 90, 250, 20, 20, 5, 1, -45, 0, 360, 180, 40, 11, 10, 10) } }), Button("DEFAULT", {reduce: () => { mutable centerZSet = -75.6 mutable camDistance = 354 mutable params = preset(83, 19, 8, 25, 100, 11, 9, 0, 0, 0, 0, 360, 30, 30, 0, 6, 30) } }), ] ] ), options: inputsGroup( [ [ Checkbox(["Animate"], {value: ["Animate"]}), Button("BLACK/WHITE", {reduce:() => { signaler % 2 === 0 ? mutable modeBG = [0.15, 0.15, 0.15, 1.0] : mutable modeBG = [1.0, 1.0, 1.0, 1.0] signaler % 2 === 0 ? mutable modeColor = [1.0, 1.0, 1.0] : mutable modeColor = [0.0, 0.0, 0.0] mutable signaler = signaler + 1 }}), Button("RANDOM COLORS", {reduce:() => { mutable modeBG = [Math.random(), Math.random(), Math.random(), 1] mutable modeColor = [Math.random(), Math.random(), Math.random()] }}), Button("ZOOM TO FIT", {reduce:() => { let camSettings = zoomToFit(findBounds(shell.coordinates)) mutable centerZSet = camSettings[0] mutable camDistance = camSettings[1] }}) ] ] ), })38:Tc61,viewof firstParams = columns({ parameters1 : inputsGroup( [ [ slider({ title: 'SPIRAL PARAMETERS', description: 'spiral angle (alpha)', min: 0.1, max: 90, step: 0.1, value: params.alpha }), slider({ description: 'number of coils', min: 0.1, max: 10, step: 0.1, value: params.coils }), slider({ description: 'shell taper (beta)', min: -20, max: 90, step: 0.1, value: params.beta }), slider({ description: 'start distance from origin', min: 0, max: 120, step: 0.1, value: params.A }), slider({ description: 'line density', min: 5, max: 250, step: 1, value: params.lineDivs }), ], ] ), parameters2 : inputsGroup( [ [ slider({ title: 'OPENING PARAMETERS', description: 'radius 1 of ellipse', min: 0.1, max: 100, step: 0.1, value: params.a }), slider({ description: 'radius 2 of ellipse', min: 0.1, max: 110, step: 0.1, value: params.b }), slider({ description: 'tilt forwards/backwards', min: -90, max: 90, step: 0.1, value: params.mu }), slider({ description: 'tilt side-to-side', min: -90, max: 90, step: 0.1, value: params.omega }), slider({ description: 'spin in place', min: -90, max: 90, step: 0.1, value: params.phi }), slider({ description: 'start of opening', min: 0, max: 120, step: 1, value: params.s }), slider({ description: 'end of opening', min: 180, max: 360, step: 1, value: params.tCircle }), ], ] ), parameters3 : inputsGroup( [ [ slider({ title: 'NODULE PARAMETERS', description: 'height of nodule', min: 0, max: 20, step: 0.1, value: params.L }), slider({ description: 'number of nodules per coil', min: 1, max: 10, step: 1, value: params.N }), slider({ description: 'length of each nodule along the opening', min: 0, max: 120, step: 1, value: params.w1 }), slider({ description: 'angle position of nodule on the opening', min: -135, max: 90, step: 1, value: params.P }), slider({ description: 'length of nodule along the spiral', min: 1, max: 500, step: 0.1, value: params.w2 }), ], ] ), })39:Te88,shell = { // Array to store the start and end points of line segments let positions = [] // Array to compute the bounding box let coordinates = [] // spiral parameters let A = firstParams.parameters1[0][3] //distance from origin at theta = 0 let theta = 0 //start angle let coils = firstParams.parameters1[0][1] //number coils let t = pi2 * coils //end angle let alphaRad = firstParams.parameters1[0][0] * (pi/180) //angle of tangent (offset from 90 degrees) let betaRad = firstParams.parameters1[0][2] * (pi/180) //enlarging angle in z // ellipse opening parameters let s = (firstParams.parameters2[0][5] + 180) * (pi/180) //start angle of ellipse, starting at pi instead of 0 to have ellipse start and end at center of shell let a = firstParams.parameters2[0][0] //radius of ellipse at s = 0 let b = firstParams.parameters2[0][1] //radius of ellipse at s = 90 degrees let tCircle = (firstParams.parameters2[0][6] + 180) * (pi/180) //end angle of ellipse let phi = firstParams.parameters2[0][4] * (pi/180) //rotation of ellipse along z-axis (front-to-back axis relative to face) let omega = firstParams.parameters2[0][3] * (pi/180) //rotation of ellipse along y-axis (top-to-bottom axis relative to face) let mu = firstParams.parameters2[0][2] * (pi/180) //rotation of ellipse along x-axis (side-to-side axis relative to face) // nodule parameters let w1Rad = firstParams.parameters3[0][2] * (pi/180) //length of each nodule along the ellipse (side-view) let P1Rad = firstParams.parameters3[0][3] * (pi/180) + pi2 //angle position of the nodule on the curve let L = firstParams.parameters3[0][0] let N = firstParams.parameters3[0][1] let w2Rad = firstParams.parameters3[0][4] * (pi/180) let lineDivisions = firstParams.parameters1[0][4] // Calculate the positions of the line segments that make up the shell // the spiral (spine) of the shell for (let i = theta; i < t; i = i + (pi/lineDivisions)) { let count = 0 // the distance of a point to the origin, as a function of theta let r = (A * Math.exp(i * (1/Math.tan(alphaRad)))) // the ellipse (rib) at this point along the spiral for (let j = s; j < tCircle; j = j + (pi/lineDivisions)) { //add nodules if there are any let lTheta = (pi2 / N) * ( ((N * i) / pi2) - Math.round((N * i) / pi2) ) let rn = L * Math.exp( -1 * ( Math.pow( 2 * (j - P1Rad) / w1Rad , 2) + Math.pow( 2 * lTheta / w2Rad , 2) )) // radius of the ellipse 0 < j < 2*pi - constant for a circle let re = Math.pow( Math.pow(Math.cos(j) / a , 2) + Math.pow(Math.sin(j) / b , 2), -0.5 ) + rn // cartesian coordinates of each point along the opening let x = ( A * Math.sin(betaRad) * Math.cos(i) + Math.cos(j + phi) * Math.cos(i + omega) * re - Math.sin(mu) * Math.sin(j + phi) * Math.sin(i + omega) * re ) * Math.exp(i / Math.tan(alphaRad)) * scale let y = ( A * Math.sin(betaRad) * Math.sin(i) + Math.cos(j + phi) * Math.sin(i + omega) * re + Math.sin(mu) * Math.sin(j + phi) * Math.cos(i + omega) * re ) * Math.exp(i / Math.tan(alphaRad)) * scale let z = ( -A * Math.cos(betaRad) + Math.cos(mu) * Math.sin(j + phi) * re ) * Math.exp(i / Math.tan(alphaRad)) * scale //+ boundingRadiusApprox function addVertices() { positions.push(x, y, z) coordinates.push([x, y, z]) } if(count === 0 | count === lineDivisions * 2) { addVertices() } else { addVertices() addVertices() } count++ } } //let zCen = findBounds(coordinates) //return {positions, zCen} return {positions, coordinates} }3a:T10b0,//modified from @rreusser's 'Quick (miterless) Lines in WebGL' function createDrawLineCommand(regl) { var SIZEOF_FLOAT = 4; var DEFAULT_LINE_COLOR = lineColor; var DEFAULT_LINE_WIDTH = 2; var tmp = {}; function attr(propName, defaultValue, defaultStride, isNext) { return function(ctx, props) { var value = props[propName]; if (value === undefined) return { constant: defaultValue }; if (value.constant !== undefined) return props[propName]; var p = (tmp.buffer = props[propName]); if (!p.buffer) { tmp.buffer = p; p = props; } var stride = p.stride === undefined ? defaultStride * SIZEOF_FLOAT : p.stride; var offset = p.offset === undefined ? 0 : p.offset; tmp.stride = stride; tmp.offset = offset + (isNext ? stride : 0); tmp.divisor = 1; return tmp; }; } return regl({ vert: ` precision highp float; // uniform mat4 uProjectionViewModel; uniform mat4 projection, view; uniform float uAspect, uTurningAngleSafetyExtension, uScaleFactor; attribute vec3 aPosition, aNextPosition; attribute vec4 aColor, aNextColor; attribute float aLineWidth, aNextLineWidth; attribute vec2 aLinePosition; varying float vOffset; varying vec4 vColor; varying vec2 vStrokeEdges; vec2 lineNormal (vec4 p, vec4 n, float aspect) { return normalize((p.yx / p.w - n.yx / n.w) * vec2(1, aspect)); } void main () { // Pass the horizontal line offset to the fragment shader so we can // add a stroke to the line vOffset = aLinePosition.x; // Compute the position of two adjacent points vec4 currentPoint = projection * view * vec4(aPosition, 1); vec4 nextPoint = projection * view * vec4(aNextPosition, 1); // Compute the width float lineWidth = mix(aLineWidth, aNextLineWidth, aLinePosition.y); // Use the aLinePosition attribute to select either the current or next point gl_Position = mix(currentPoint, nextPoint, aLinePosition.y); // Apply the screen-space offset to make a line of the correct width vec2 vn = lineNormal(currentPoint, nextPoint, uAspect); gl_Position.xy += ( vn / vec2(-uAspect, 1) * aLinePosition.x * lineWidth + -vn.yx * vec2(1, uAspect) * (aLinePosition.y - 0.5) * lineWidth * uTurningAngleSafetyExtension ) * gl_Position.w * uScaleFactor; // Line color vColor = vec4(mix(aColor, aNextColor, aLinePosition.y)); }`, frag: ` precision highp float; varying vec4 vColor; void main () { gl_FragColor = vColor; }`, attributes: { aLinePosition: [[-1, 0], [1, 0], [-1, 1], [1, 1]], aPosition: attr('position', null, 3), aNextPosition: attr('position', null, 3, true), aColor: attr('color', DEFAULT_LINE_COLOR, 4), aNextColor: attr('color', DEFAULT_LINE_COLOR, 4, true), aLineWidth: attr('width', DEFAULT_LINE_WIDTH, 1), aNextLineWidth: attr('width', DEFAULT_LINE_WIDTH, 1, true) }, uniforms: { uAspect: ctx => ctx.viewportWidth / ctx.viewportHeight, uScaleFactor: (ctx, props) => ctx.pixelRatio / ctx.viewportHeight, uTurningAngleSafetyExtension: (ctx, props) => { var turningAngle = (Math.PI / 180) * (props.maxExpectedTurningAngle === undefined ? 5 : props.maxExpectedTurningAngle); return turningAngle < 1e-4 ? turningAngle * 0.5 : (1 - Math.cos(turningAngle)) / Math.sin(turningAngle); }, }, primitive: 'triangle strip', instances: (ctx, props) => { if (props.count !== undefined) return props.count - 1; if (props.position[0] && props.position[0].length !== undefined) return props.position.length - 1; if (props.position.length !== undefined) return props.position.length / 3 - 1; return null; }, blend: { enable: true, func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 'one minus src alpha', dstAlpha: 1, }, equation: {rgb: 'add', alpha: 'add'} }, count: 4 }); }3b:T7f8,{ const draw = gl.regl({ vert: ` precision highp float; attribute vec3 position; varying vec3 vColor; uniform mat4 view, projection; uniform float tick; uniform float rotate; uniform vec3 axis; uniform vec3 color; //uniform float centerZ; const float PI = 3.1415926535; //modified from @spattana's Instancing in Regl vec3 quatRotate(vec3 v){ float turn = rotate * tick * PI/360.; vec4 q = vec4(axis * sin(turn), cos(turn)); return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v); } void main () { //vec3 centeredPos = vec3(position.xy, position.z + centerZ); //gl_Position = projection * view * vec4(quatRotate(centeredPos), 1); gl_Position = projection * view * vec4(quatRotate(position), 1); vColor = color; } `, frag: ` precision highp float; varying vec3 vColor; uniform float alpha; void main () { gl_FragColor = vec4(vColor, alpha); } `, attributes: { position: gl.regl.prop("position") }, uniforms: { tick: gl.regl.prop("tick"), alpha: 0.375, axis: [0.0, 0.0, -1.0], rotate: gl.regl.prop("rotate"), color: gl.regl.prop("color"), //centerZ: gl.regl.prop("centerZ") }, blend: { enable: true, func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 'one minus src alpha', dstAlpha: 1, }, equation: {rgb: 'add', alpha: 'add'} }, primitive: 'lines', depth: {enable: false}, count: gl.regl.prop("count"), }) let tick = 0 while(true){ lastCamera.dirty = true lastCamera(() => { gl.regl.clear({color: modeBG}) draw({ position: shell.positions, count: shell.positions.length / 3, tick: tick, rotate: animate, color: modeColor, //centerZ: centerZSet, }) tick++ }) yield; } }3c:[{"id":"659cbb49102ff839e36a69d2bf4502d958139da1d6cfa3f4f2c50568b9e92bf767f36eedaa9d2300b2dc9bfbb265913d326984b733470565c77148a7f17932d6","href":"https://static.observableusercontent.com/files/659cbb49102ff839e36a69d2bf4502d958139da1d6cfa3f4f2c50568b9e92bf767f36eedaa9d2300b2dc9bfbb265913d326984b733470565c77148a7f17932d6","name":"alpha.png","type":"image/png","lastModified":1618447017441.415,"size":2007489},{"id":"2d2d43eb4fbec2c0998385a36616456b1f11b1ea6fc95fe0e4e1865157b24e53c8d7d8a27ee2f0e7a1e36cdfe1735eb741951a5887f065f6b246ba921e668284","href":"https://static.observableusercontent.com/files/2d2d43eb4fbec2c0998385a36616456b1f11b1ea6fc95fe0e4e1865157b24e53c8d7d8a27ee2f0e7a1e36cdfe1735eb741951a5887f065f6b246ba921e668284","name":"nautilus.png","type":"image/png","lastModified":1613602404745.124,"size":807331},{"id":"7cc016562b1baaec97b35c6af5822e300f9e4f6709316574e9940fc99df6a5f32fbff12b9ef0045445d1b11fa1df6204ca270642c51b93e34ddf7b9465373669","href":"https://static.observableusercontent.com/files/7cc016562b1baaec97b35c6af5822e300f9e4f6709316574e9940fc99df6a5f32fbff12b9ef0045445d1b11fa1df6204ca270642c51b93e34ddf7b9465373669","name":"shelltaper.png","type":"image/png","lastModified":1613604337195.113,"size":339920},{"id":"a75727bfccc2fcc7928c0a6c3186e78d5f0c4786d42767566ff35f62a64103baed994990d97d0261b27a2c04e04ff3ae6b1e109db2d64d86a338bd382a7de51f","href":"https://static.observableusercontent.com/files/a75727bfccc2fcc7928c0a6c3186e78d5f0c4786d42767566ff35f62a64103baed994990d97d0261b27a2c04e04ff3ae6b1e109db2d64d86a338bd382a7de51f","name":"bivalve.png","type":"image/png","lastModified":1613675606118.889,"size":554046},{"id":"04b7a8f4e33a38269fa561de7056d997fea278f31227ad42b9ce7534388d3df21a544ed2e5f7558ad5e129baf07212a825228cc9df52a16fcce68e7004175dca","href":"https://static.observableusercontent.com/files/04b7a8f4e33a38269fa561de7056d997fea278f31227ad42b9ce7534388d3df21a544ed2e5f7558ad5e129baf07212a825228cc9df52a16fcce68e7004175dca","name":"nodules.png","type":"image/png","lastModified":1613675498630.022,"size":122710},{"id":"fc24b271e688946dfb04b3ab0ec2cb3a42782a6e5589f7d7ce92737d6b8145d7e436079b5ab53b8f97511a038a366cf21ad066dd4ceb28566645289200375f99","href":"https://static.observableusercontent.com/files/fc24b271e688946dfb04b3ab0ec2cb3a42782a6e5589f7d7ce92737d6b8145d7e436079b5ab53b8f97511a038a366cf21ad066dd4ceb28566645289200375f99","name":"tilted.png","type":"image/png","lastModified":1622053681003.233,"size":498298},{"id":"4777f55aa6771ba6d8039136532f2a591f8ee97fcb3431333f8a67b7652f264a642b52a6b869448e2631615ae29092aa77bbf07c938713212b83297657e95c4d","href":"https://static.observableusercontent.com/files/4777f55aa6771ba6d8039136532f2a591f8ee97fcb3431333f8a67b7652f264a642b52a6b869448e2631615ae29092aa77bbf07c938713212b83297657e95c4d","name":"high_alpha.png","type":"image/png","lastModified":1622062318039.086,"size":444997},{"id":"0ca35c986a1094be8ed34271c22b3819bc121a16eb038611c5882bb5cfe04485fe24f6a87f5fe1f1781130be0b6a604289b272c35dbffc18555400466cc3f9ab","href":"https://static.observableusercontent.com/files/0ca35c986a1094be8ed34271c22b3819bc121a16eb038611c5882bb5cfe04485fe24f6a87f5fe1f1781130be0b6a604289b272c35dbffc18555400466cc3f9ab","name":"low_beta.png","type":"image/png","lastModified":1622062321423.538,"size":459152},{"id":"c0ec2f0a3143be1e701109a4be2a4e8dbb9998a6a4a6a8738e0b9fe70cc8da4f2740943e39a9cc2faf2a76fe223989f3a5dcb829345b90abd2b524d196de8fce","href":"https://static.observableusercontent.com/files/c0ec2f0a3143be1e701109a4be2a4e8dbb9998a6a4a6a8738e0b9fe70cc8da4f2740943e39a9cc2faf2a76fe223989f3a5dcb829345b90abd2b524d196de8fce","name":"shells.png","type":"image/png","lastModified":1622683123118.887,"size":626570}] 30:{"id":"a3c262bb112b4f72","slug":"parametric-seashell","title":"Building a Parametric Seashell","thumbnail":"3d1a416ecd8eb84db078c219a320bc0577df4a7d41a06b5f74be1682febfe7f0","access_level":"public","create_time":"$D2021-02-17T21:51:16.148Z","update_time":"$D2022-09-20T18:20:39.715Z","view_time":null,"first_public_time":"$D2021-06-03T01:34:38.152Z","has_unpublished_edits":null,"fork":false,"stars":95,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":5665,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"13a8e79c8958c921","slug":"complete-projects","title":"Projects","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"titling":"auto","title":"Building a Parametric Seashell","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof alpha = Range([0.1, 90], {\n step: 0.1, \n value: 83,\n label: \"spiral angle (alpha)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof coils = Range([0.1, 10], {\n step: 0.1,\n value: 8,\n label: \"number of coils\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"{\n // set WebGL and regl context\n const { canvas, regl, camera } = plot1;\n\n // create the draw command\n const drawLines = createDrawLineCommand(regl);\n \n camera.dirty = true\n\n while(true) {\n camera(() => {\n regl.clear({color: bgColor})\n \n drawLines({\n position: spiral1,\n width: { constant: lineWidth },\n color: { constant: lineColor },\n });\n });\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"spiral1 = {\n let positions = []\n \n // spiral parameters\n let theta = 0 //start angle\n let A = 25 //start distance from origin\n let t = 2*Math.PI * coils //end angle\n let alphaRad = alpha * (Math.PI/180) //angle of tangent (offset from 90 degrees)\n \n let lineDivisions = 100\n\n // calculate the spiral\n for (let i = theta; i < t; i = i + (Math.PI/lineDivisions)) {\n // the distance of a point to the origin, as a function of theta\n let r = (A * Math.exp(i * (1/Math.tan(alphaRad))))\n\n // cartesian coordinates along spiral\n let x = r * Math.cos(i) * scale\n let y = r * Math.sin(i) * scale\n let z = 0\n\n positions.push(x, y, z)\n \n }\n return positions\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4854,"value":"md`The shell below on the left coils tightly, whereas the one on the right has a longer, flowing curve. A high alpha leads to a tighter coil, like what you see on this snail shell. Alternatively, if a shell has a low alpha, its structure is more flat, like this bivalve shell (bivalves are mollusks that have 2 shells connected by a hinge, for example oysters, scallops, and mussels).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`

Snail shell with high ${tex`\\alpha`} (high curl)

Bivalve shell with low ${tex`\\alpha`} (low curl)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5240,"value":"md`How exactly does this spiral dictate the structure of a shell? Let's back up a bit and think about why and how these seashells come to be.\n\nA seashell starts as a tiny speck on the outside of an especially vulnerable creature: a newborn mollusk. Being a soft-bodied invertebrate, many mollusks form hard shells around themselves to keep safe. But, a problem arises when the shell doesn't grow as it grows. Instead, the mollusk adapts, continuously adding ring after ring of calcium carbonate around the shell's opening. This way it keeps growing its shield to a comfortable size, while the older part coils up and out of the way.\n\nFrom this, a simple geometry emerges:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4813,"value":"S(\\theta, s) =\n\\colorbox{lightpink}{$A e^{\\theta \\cot\\alpha}$} + \\colorbox{aquamarine}{$e^{\\theta \\cot\\alpha}\\left[ \\left( \\frac{\\cos s}{a} \\right)^2 + \\left( \\frac{\\sin s}{b} \\right)^2 \\right]^{-1/2}$}\\\\\n\\theta \\ge 0 \\medspace,\\enspace 0 \\le s \\le 2\\pi","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5010,"value":"It doesn't appear simple at first, but if you look closely, you'll see that it's the polar coordinates for a logarithmic spiral with a growing ellipse sweeping along it.\n\nThat's it, that's the basic equation for millions of wildly varying geometric gems scattered across the ocean floors!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5248,"value":"See it in action below. You can sweep the ellipse along the spiral, mimicking the exact equation above. To add variation, you can also change the 2 radii of the ellipse, and if the ellipse goes all the way around.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof iSlider = Range([0, 16], {\n step: 0.1, \n value: 14,\n label: \"position along spiral (pi)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof a = Range([1, 20], {\n step: 0.1, \n value: 11,\n label: \"radius 1 of ellipse\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof b = Range([1, 20], {\n step: 0.1, \n value: 8,\n label: \"radius 2 of ellipse\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4640,"value":"viewof s = Range([0, 120], {\n step: 1, \n value: 0,\n label: \"start of ellipse\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4644,"value":"viewof tCircle = Range([180, 360], {\n step: 1, \n value: 360,\n label: \"end of ellipse\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"{\n // set WebGL and regl context\n const { canvas, regl, camera } = plot3;\n\n // create the draw commands\n const drawLines = createDrawLineCommand(regl);\n const drawPlane = createDrawPlaneCommand(regl);\n \n camera.dirty = true\n\n while(true) {\n camera(() => {\n regl.clear({color: bgColor})\n \n drawLines({\n position: spiral2,\n width: { constant: lineWidth },\n color: { constant: lineColor2 },\n });\n \n drawLines({\n position: ellipse1,\n width: { constant: lineWidth },\n color: { constant: lineColor },\n });\n \n drawPlane()\n });\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5260,"value":"

Shell with an elliptical opening following a spiral path

\n\nI jumped ahead of myself in the above model and already added in the third dimension, determined by 'beta.' Beta is the angle at which the shell tapers. A beta of 90 degrees will produce a flat-spiraled shell, like what you see in the nautilus:\n\n

Shell with high ${tex`\\beta`} (nautilus, no taper)

\n\nSlide beta towards 0, though, and the spiral tapers down, creating the overall appearance of a spiraling spike:\n\n

Shell with low ${tex`\\beta`} (high taper)

\n\nSee what happens when you change beta below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof beta = Range([0, 90], {\n step: 0.1, \n value: 19,\n label: \"shell taper (beta)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"{\n // set WebGL and regl context\n const { canvas, regl, camera } = plot2;\n\n // create the draw commands\n const drawLines = createDrawLineCommand(regl);\n const drawPlane = createDrawPlaneCommand(regl);\n \n camera.dirty = true\n\n while(true) {\n camera(() => {\n regl.clear({color: bgColor})\n \n drawLines({\n position: spiral2,\n width: { constant: lineWidth },\n color: { constant: lineColor },\n //alpha: { constant: 1 }\n });\n \n drawPlane()\n });\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"spiral2 = {\n let positions = []\n\n // spiral parameters\n let A = 25 //radius at theta = 0\n let alpha = 83 //spiral angle\n let alphaRad = alpha * (Math.PI/180) //polar conversion\n let coils = 8\n let theta = 0 //start angle\n let t = 2*Math.PI * coils //end angle\n let betaRad = beta * (Math.PI/180) //enlarging angle in z\n \n let lineDivisions = 100\n\n // calculate the spiral\n for (let i = theta; i < t; i = i + (Math.PI/lineDivisions)) {\n // the distance of a point to the origin, as a function of theta\n let r = (A * Math.exp(i * (1/Math.tan(alphaRad))))\n\n // cartesian coordinates of each point along spiral\n let x = r * Math.sin(betaRad) * Math.cos(i) * scale\n let y = r * Math.sin(betaRad) * Math.sin(i) * scale\n let z = -r * Math.cos(betaRad) * scale + centerZ1\n\n positions.push(x, y, z)\n }\n return positions\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`Now that we have the basic structure of the shell in place, we can add two more details that are a bit more subtle, but create many variations.\n\nThe first is in the angle of the ellipse. Our equation has the ellipse facing perpendicular to the spiral. In reality, the ellipse can tilt forwards or backwards, sideways, or spinning, as it flows along. \n\n

\n\nBelow you can experiment with tilting the ellipse in a myriad of ways:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof mu = Range([-90, 90], {\n step: 0.1, \n value: 0,\n label: \"tilt forwards/backwards\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"viewof omega = Range([-80, 80], {\n step: 0.1, \n value: 0,\n label: \"tilt side-to-side\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof phi = Range([-90, 90], {\n step: 0.1, \n value: 0,\n label: \"spin in place\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"{\n // set WebGL and regl context\n const { canvas, regl, camera } = plot4;\n\n // create draw commands\n const drawLines = createDrawLineCommand(regl);\n const drawPlane = createDrawPlaneCommand(regl);\n \n camera.dirty = true\n\n while(true) {\n camera(() => {\n regl.clear({color: bgColor})\n \n drawLines({\n position: spiral2,\n width: { constant: lineWidth },\n color: { constant: lineColor2 },\n });\n \n drawLines({\n position: ellipse2,\n width: { constant: lineWidth },\n color: { constant: lineColor },\n });\n \n drawPlane()\n });\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`In predator-heavy waters, like the tropics, mollusks often form spikes to deter their would-be attackers. Ridges can also help the animal to navigate strong currents, and to guide the way water flows over it to make it easier to catch a meal. Here we'll add the second feature: nodules that, in the final model, can become ridges or spikes.\n\n

Shell with dramatic spikes around its perimeter

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"viewof P = Range([-90, 90], {\n step: 1, \n value: 45,\n label: \"angle position of nodule on the opening\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof w1 = Range([1, 90], {\n step: 1, \n value: 30,\n label: \"length of nodule along the opening\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"viewof L = Range([0, 40], {\n step: 0.1, \n value: 4,\n label: \"height of nodule\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"{\n // set the WebGL and regl context\n const { canvas, regl, camera } = plot5;\n\n // create the draw commands\n const drawLines = createDrawLineCommand(regl);\n const drawPlane = createDrawPlaneCommand(regl);\n \n camera.dirty = true\n\n while(true) {\n camera(() => {\n regl.clear({color: bgColor})\n \n drawLines({\n position: spiral2,\n width: { constant: lineWidth },\n color: { constant: lineColor2 },\n });\n \n drawLines({\n position: ellipse3,\n width: { constant: lineWidth },\n color: { constant: lineColor },\n });\n \n drawPlane()\n });\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4991,"value":"Before we get to the final model, you can check out the complete equation in the accordion below. Here, all of the parameters have come together to add onto the basic spiral-and-ellipse equation. Now we can adjust the taper of the shell, the tilt of the opening, and add nodules to the form with just a few number inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5302,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`And now we have the final model, with all of the possible variations put into one view. Now you can discover new shells, some of which have not (yet?) evolved in nature, and some of which look very similar to ones at your nearest sandy beach. Here are a few possibilities:\n\n

Snail, clam, conch, nautilus, and wentletrap shells

Setup

Imports

Images from Wikimedia Commons