Can we draw a Euler Spiral curve?

Hey can anyone tell me if I can draw a Line curve similar to Euler Spiral curve.

1 Like

Not sure this is what you are looking for but one way to render such a curve is to transform the respective formula into a parametric curve. You can then sample the curve to create an array of points which can be used to create the geometry for a line. Or you pass the curve into TubeGeometry in order to generate a geometry with a spatial expansion. Check out the following example to see this approach in action:

https://threejs.org/examples/webgl_geometry_extrude_splines

You should study how the parametric curves are actually implemented. The following file contains a bunch of classes derived from THREE.Curve. The method Curve. getPoint() performs the sampling, the parameter t is a value between 0 and 1 defining at what place on the curve the sampling occurs.

https://threejs.org/examples/js/CurveExtras.js

3 Likes

There’s actually JavaScript code on the wiki page:

function drawEulerSpiral(canvas, T, N, scale) {
      ctx = canvas.getContext("2d");
      var dx, dy, t=0, prev = {x:0, y:0}, current;
      var dt = T/N;
      ctx.beginPath();
      while (N--) {
         dx = Math.cos(t*t) * dt;
         dy = Math.sin(t*t) * dt;
         t += dt;
         current = {
            x: prev.x + dx,
            y: prev.y + dy
         };
         ctx.lineTo(current.x*scale, current.y*scale);
         prev = current;
      }
      ctx.stroke();
}
drawEulerSpiral(document.getElementById("myCanvas"),10,10000,100)

Should be easy enough to adapt it for use with curve.getPoint

2 Likes

That one will accumulate errors over the steps, though. The examples in Wikipedia are a mix of methods of different accuracy.