How to resolve the algorithm Archimedean spiral step by step in the JavaScript programming language

Published on 12 May 2024 09:40 PM
#Javascript

How to resolve the algorithm Archimedean spiral step by step in the JavaScript programming language

Table of Contents

Problem Statement

The Archimedean spiral is a spiral named after the Greek mathematician Archimedes.

An Archimedean spiral can be described by the equation: with real numbers a and b.

Draw an Archimedean spiral.

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Archimedean spiral step by step in the JavaScript programming language

First Source Code:

  • HTML:
    • Defines a web page with a canvas element for drawing the spiral.
    • Calls the pAS function on page load.
  • JavaScript:
    • pAS function:
      • Takes two parameters: lps (number of loops) and clr (color).
      • Calculates the parameters for the Archimedean spiral.
      • Gets the canvas and context.
      • Clears the canvas and sets the background color to white.
      • Iterates over the number of points and calculates the coordinates for each point.
      • Draws the spiral using the specified color.

Second Source Code:

  • HTML:
    • Defines a web page with a canvas element for drawing the spiral.
    • Calls the main function on page load, passing a color and the number of cycles.
  • JavaScript:
    • main function:
      • Takes two parameters: strColor (string representing the color) and intCycles (number of cycles).
      • Defines constants for the step size and scaling factor.
      • Gets the canvas and context.
      • Calculates the points for the spiral.
      • Sets the canvas background color to white.
      • Starts a path and draws the spiral.
      • Sets the stroke color and draws the spiral.
      • Logs the points to the console.
    • enumFromTo function:
      • Helper function that creates an array of numbers from a start to end number.

Improvements in the Second Source Code:

  • Uses more modern JavaScript features (e.g., arrow functions).
  • Calculates the points of the spiral in a single line using the map function.
  • Uses a function to create the array of points instead of iterating manually.
  • Logs the points to the console for easier debugging.

Source code in the javascript programming language

<!-- ArchiSpiral.html -->
<html>
<head><title>Archimedean spiral</title></head>
<body onload="pAS(35,'navy');">
<h3>Archimedean spiral</h3> <p id=bo></p>
<canvas id="canvId" width="640" height="640" style="border: 2px outset;"></canvas>
<script>
// Plotting Archimedean_spiral aev 3/17/17
// lps - number of loops, clr - color.
function pAS(lps,clr) {
  var a=.0,ai=.1,r=.0,ri=.1,as=lps*2*Math.PI,n=as/ai;
  var cvs=document.getElementById("canvId");
  var ctx=cvs.getContext("2d");
  ctx.fillStyle="white"; ctx.fillRect(0,0,cvs.width,cvs.height);
  var x=y=0, s=cvs.width/2;
  ctx.beginPath();
  for (var i=1; i<n; i++) {
    x=r*Math.cos(a), y=r*Math.sin(a);
    ctx.lineTo(x+s,y+s);
    r+=ri; a+=ai;
  }//fend i
  ctx.strokeStyle = clr; ctx.stroke();
}
</script></body></html>


<html>
<head>
    <title>Archimedean spiral</title>
    <style>h3 {font-family:sans-serif; color:gray;}</style>
</head>
<body onload="main('red')(15)">
<h3>Archimedean spiral</h3></p>
<canvas id="spiral" width="640" height="640" style="border: 2px outset;"></canvas>
<script>


const main = strColor => intCycles => {
    const
        ai = 0.05,
        ri = 0.1,
        cvs = document.getElementById('spiral'),
        ctx = cvs.getContext('2d'),
        s = cvs.width / 2,

        points = enumFromTo(1)(
            Math.PI * 2 * intCycles / ai
        ).map(i => [Math.cos, Math.sin].map(
            f => ri * i * f(ai * i) + s
        ));

    return (
        console.log(points),
        ctx.fillStyle = 'white',
        ctx.fillRect(0, 0, cvs.width, cvs.height),
        ctx.beginPath(),

        points.forEach(xy => ctx.lineTo(...xy)),

        ctx.strokeStyle = strColor,
        ctx.stroke(),
        points
    );
};

// enumFromTo :: Int -> Int -> [Int]
const enumFromTo = m => n =>
    Array.from({
        length: 1 + n - m
    }, (_, i) => m + i);


</script></body></html>

You may also check:How to resolve the algorithm Sorting algorithms/Quicksort step by step in the Dart programming language
You may also check:How to resolve the algorithm Cumulative standard deviation step by step in the AutoHotkey programming language
You may also check:How to resolve the algorithm Sorting algorithms/Quicksort step by step in the Beads programming language
You may also check:How to resolve the algorithm Deal cards for FreeCell step by step in the Fōrmulæ programming language
You may also check:How to resolve the algorithm Priority queue step by step in the Arturo programming language