How to resolve the algorithm Sierpinski pentagon step by step in the JavaScript programming language

Published on 12 May 2024 09:40 PM
#Javascript

How to resolve the algorithm Sierpinski pentagon step by step in the JavaScript programming language

Table of Contents

Problem Statement

Produce a graphical or ASCII-art representation of a Sierpinski pentagon (aka a Pentaflake) of order 5. Your code should also be able to correctly generate representations of lower orders: 1 to 4.

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Sierpinski pentagon step by step in the JavaScript programming language

This code snippet implements the Pentaflake fractal in the browser using JavaScript.

The Pentaflake is a fractal similar to the snowflake, but with pentagram-shaped "arms" instead of hexagonal-shaped "arms". The code initializes a canvas element, sets up event listeners for mouse clicks, and defines the initial state of the fractal.

When the user clicks on the canvas, the code iterates through the current state of the fractal, generating a new set of points that form the next iteration of the fractal. The code also updates the displayed order of the fractal and changes the color of the fractal.

The iter function is responsible for iterating through the current state of the fractal and generating a new set of points. The function first clears the canvas, then iterates through the current set of points, calling the meta5 function on each point to generate a new set of points. The meta5 function takes a point and its surrounding points as input and returns a new set of points that are used to draw the next iteration of the fractal.

The pIter5 function is responsible for drawing the current state of the fractal. The function iterates through the current set of points, calling the pPoly function on each point to draw a polygon. The pPoly function takes a point and its surrounding points as input and draws a polygon using the points.

The pInit function is responsible for initializing the initial state of the fractal. The function creates a set of points that form a pentagram and draws the pentagram on the canvas.

The make5 function is responsible for creating a set of points that form a pentagram. The function takes a center point and a radius as input and returns a set of points that are used to draw the pentagram.

The pPoly function is responsible for drawing a polygon. The function takes a set of points as input and draws a polygon using the points.

The ppad function is responsible for calculating the position of a point relative to another point. The function takes an angle, a distance, and a point as input and returns a new point that is located at the specified angle and distance from the specified point.

The resetf function is responsible for resetting the state of the fractal. The function clears the canvas, resets the order of the fractal, and changes the color of the fractal.

The code snippet also includes an HTML document that defines the canvas element, the event listeners for mouse clicks, and the input fields for the order of the fractal and the color of the fractal.

Source code in the javascript programming language

<html>
<head>
<script type="application/x-javascript">
// Globals
var cvs, ctx, scale=500, p0, ord=0, clr='blue', jc=0;
var clrs=['blue','navy','green','darkgreen','red','brown','yellow','cyan'];

function p5f() {
  cvs = document.getElementById("cvsid");
  ctx = cvs.getContext("2d");
  cvs.onclick=iter;
  pInit(); //init plot
}

function iter() {
  if(ord>5) {resetf(0)};
  ctx.clearRect(0,0,cvs.width,cvs.height);
  p0.forEach(iter5);
  p0.forEach(pIter5);
  ord++; document.getElementById("p1id").innerHTML=ord;
}

function iter5(v, i, a) {
  if(typeof(v[0][0]) == "object") {a[i].forEach(iter5)}
  else {a[i] = meta5(v)}
}

function pIter5(v, i, a) {
  if(typeof(v[0][0]) == "object") {v.forEach(pIter5)}
  else {pPoly(v)}
}

function pInit() {
  p0 = [make5([.5,.5], .5)];
  pPoly(p0[0]);
}

function meta5(h) {
  c=h[0]; p1=c; p2=h[1]; z1=p1[0]-p2[0]; z2=p1[1]-p2[1];
  dist = Math.sqrt(z1*z1 + z2*z2)/2.65;
  nP=[];
  for(k=1; k<h.length; k++) {
    p1=h[k]; p2=c; a=Math.atan2(p2[1]-p1[1], p2[0]-p1[0]);
    nP[k] = make5(ppad(a, dist, h[k]), dist)
  }
  nP[0]=make5(c, dist);
  return nP;
}

function make5(c, r) {
  vs=[]; j = 1;
  for(i=1/10; i<2; i+=2/5) {
    vs[j]=ppad(i*Math.PI, r, c); j++;
  }
  vs[0] = c; return vs;
}

function pPoly(s) {
  ctx.beginPath();
  ctx.moveTo(s[1][0]*scale, s[1][1]*-scale+scale);
  for(i=2; i<s.length; i++)
    ctx.lineTo(s[i][0]*scale, s[i][1]*-scale+scale);
  ctx.fillStyle=clr; ctx.fill()
}

// a - angle, d - distance, p - point
function ppad(a, d, p) {
  x=p[0]; y=p[1];
  x2=d*Math.cos(a)+x; y2=d*Math.sin(a)+y;
  return [x2,y2]
}

function resetf(rord) {
  ctx.clearRect(0,0,cvs.width,cvs.height);
  ord=rord; jc++; if(jc>7){jc=0}; clr=clrs[jc];
  document.getElementById("p1id").innerHTML=ord;
  p5f();
}
</script>
</head>
 <body onload="p5f()" style="font-family: arial, helvatica, sans-serif;">
 	<b>Click Pentaflake to iterate.</b>&nbsp; Order: <label id='p1id'>0</label>&nbsp;&nbsp;
 	<input type="submit" value="RESET" onclick="resetf(0);">&nbsp;&nbsp;
 	(Reset anytime: to start new Pentaflake and change color.)
 	<br /><br />
    <canvas id="cvsid" width=640 height=640></canvas>
 </body>
</html>

You may also check:How to resolve the algorithm Euler method step by step in the D programming language
You may also check:How to resolve the algorithm Sorting algorithms/Selection sort step by step in the Lua programming language
You may also check:How to resolve the algorithm Execute a Markov algorithm step by step in the APL programming language
You may also check:How to resolve the algorithm Hello world/Graphical step by step in the Casio BASIC programming language
You may also check:How to resolve the algorithm Sort numbers lexicographically step by step in the Rust programming language