LiorB-D/index.html

## index.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>
    <script>
      const screenDim = 600 // Our dimensions for the canvas
      let corners = [{x: 300, y: 100}, {x: 100, y: 450}, {x: 500, y: 450}] // The three corners of our triangle
      let pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] // An array for all the points we iterate through, initialize with our starting point
      let num = 10 // Number of iterations
      let numField, numLbl // Declare our label and textfield to change the numbers
      function setup() {
          createCanvas(screenDim,screenDim); // Create our canvas for p5 to draw on

          //Create our number TextField to the right of our canvas, with our inpEvent() function as the input event:
          numField = createInput(num)
          numField.position(screenDim + 100, 100)
          numField.size(50)
          numField.input(inpEvent)

          //Create the number label on the left size of our numField
          numLbl = createP("# of Points:")
          numLbl.position(screenDim + 15, 85)

          drawScreen() // Draw the screen when the app first starts up
      }

      function inpEvent() { //This function responds to changes in the number of points
          pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] //Reset the pts array
          num = this.value() //Change the number value
          let randInd
          for(let i = 1; i < num; i++) { // Add a point for each iteration
              randInd = floor(random(0, 3)) // Pick a random corner
              pts.push({
                  x: (pts[i - 1].x + corners[randInd].x) / 2,
                  y: (pts[i - 1].y + corners[randInd].y) / 2
              }) // Push a new point to the array between the last point and the random corner
          }

          drawScreen() // Draw screen once all our points our calculated
      }
      function drawScreen() { // Function to draw the points
          clear() // Clear all previous points
          fill(250); // Set the fill color to white
          square(0,0, screenDim) // Draw a square around our canvas
          fill("black") // Set the fill color to black
          corners.forEach((pt) => { //Draw each of the corners of our triangle
             ellipse(pt.x, pt.y, 10) //Ellipse with radius 10
          })
          fill("blue") // Set the fill color to blue
          pts.forEach((pt, index) => { // Iterate through our points
              setTimeout(() => { // Add a nice delay for animation effect
                  ellipse(pt.x, pt.y, 5) // Draw the point with radius 5
              }, (5000 / num) * index) // We want the animation to take 5 seconds no matter what, so increment the delays by 5000/num
          })
      }
  </script>
  </head>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>
	<script>
	const screenDim = 600 // Our dimensions for the canvas
	let corners = [{x: 300, y: 100}, {x: 100, y: 450}, {x: 500, y: 450}] // The three corners of our triangle
	let pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] // An array for all the points we iterate through, initialize with our starting point
	let num = 10 // Number of iterations
	let numField, numLbl // Declare our label and textfield to change the numbers
	function setup() {
	createCanvas(screenDim,screenDim); // Create our canvas for p5 to draw on

	//Create our number TextField to the right of our canvas, with our inpEvent() function as the input event:
	numField = createInput(num)
	numField.position(screenDim + 100, 100)
	numField.size(50)
	numField.input(inpEvent)

	//Create the number label on the left size of our numField
	numLbl = createP("# of Points:")
	numLbl.position(screenDim + 15, 85)

	drawScreen() // Draw the screen when the app first starts up
	}

	function inpEvent() { //This function responds to changes in the number of points
	pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] //Reset the pts array
	num = this.value() //Change the number value
	let randInd
	for(let i = 1; i < num; i++) { // Add a point for each iteration
	randInd = floor(random(0, 3)) // Pick a random corner
	pts.push({
	x: (pts[i - 1].x + corners[randInd].x) / 2,
	y: (pts[i - 1].y + corners[randInd].y) / 2
	}) // Push a new point to the array between the last point and the random corner
	}

	drawScreen() // Draw screen once all our points our calculated
	}
	function drawScreen() { // Function to draw the points
	clear() // Clear all previous points
	fill(250); // Set the fill color to white
	square(0,0, screenDim) // Draw a square around our canvas
	fill("black") // Set the fill color to black
	corners.forEach((pt) => { //Draw each of the corners of our triangle
	ellipse(pt.x, pt.y, 10) //Ellipse with radius 10
	})
	fill("blue") // Set the fill color to blue
	pts.forEach((pt, index) => { // Iterate through our points
	setTimeout(() => { // Add a nice delay for animation effect
	ellipse(pt.x, pt.y, 5) // Draw the point with radius 5
	}, (5000 / num) * index) // We want the animation to take 5 seconds no matter what, so increment the delays by 5000/num
	})
	}
	</script>
	</head>