From b1d70b1e14e5ba2497cb5ec0661bc9febb2a6395 Mon Sep 17 00:00:00 2001
From: Lica Penninger <ap1414@student.aru.ac.uk>
Date: Mon, 14 Oct 2024 16:38:03 +0100
Subject: [PATCH] Cleaning script

---
 index.html | 146 ++---------------------------------------------------
 1 file changed, 3 insertions(+), 143 deletions(-)
diff --git a/index.html b/index.html
index 2caac05..b75261e 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,9 @@
       background-color: #111;
     }
   </style>
+
+<script type="text/javascript" src="/coding_club/src/bouncing_ball.js"></script>
+
 </head>
 
 <body>
@@ -74,147 +77,4 @@ <h1>Welcome</h1>
 </body>
 
 
-<script type="module">
-  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
- 
-  const bound = (value, min, max) => {
-    if (isNaN(value)) {
-      return 0;
-    }
-    if (value < min) {
-      return min;
-    }
-    if (value > max) {
-      return max;
-    }
-    return value;
-  }
- 
-  const maxVelocity = 60;
-  const minVelocity = 5;
-  const velocityDivisor = 50;
-  const margin = 10;
-  const radius = 20;
-  const drawInterval = 1;
-  const ballColor = "steelblue";
-  const height = 1000;
-  const width = 1500;
- 
-  const randBetween = (min, max) => {
-    const range = max - min;
-    return min + range * Math.random();
-  }
- 
-  let angle = randBetween(0, Math.PI);
-  console.log("The angle is: " + angle);
-  let diff = {
-    x: Math.cos(angle),
-    y: Math.sin(angle)
-  };
- 
-  let velocity = 30;
- 
-  const svg = d3.select('#Ball').append('svg')
-    .attr('width', width)
-    .attr('height', height);
- 
-  const defs = svg.append("defs");
- 
-  defs.append("marker")
-    .attr("markerWidth", 10)
-    .attr("markerHeight", 10)
-    .attr("refX", 10)
-    .attr("refY", 5)
-    .attr("orient", "auto")
-    .append("path")
-    .attr("d", "M10,0 L10,10 L0,5 Z")
-    .attr("fill", ballColor);
- 
-  let surface = svg.append("rect")
-    .classed("surface", true)
-    .attr("fill", "#cbeef9")
-    .attr("x", margin)
-    .attr("y", margin)
-    .attr("width", width - 2 * margin)
-    .attr("height", height - 2 * margin);
- 
-  const ball = svg.append("circle")
-    .attr("fill", ballColor)
-    .attr("cx", width / 2)
-    .attr("cy", height / 2)
-    .attr("r", radius);
- 
-  const line = svg.append("line")
-    .attr("stroke", ballColor)
-    .attr("stroke-width", 0);
- 
-  function move(xy, max) {
-    return function () {
-      let current = +d3.select(this).attr(`c${xy}`);
-      let next = current + velocity * diff[xy];
-      if (next < margin + radius || next > max - margin - radius) {
-        diff[xy] *= -1;
-      }
-      return next;
-    };
-  }
- 
-  let interval = setInterval(() => {
-    ball.attr("cx", move("x", width))
-      .attr("cy", move("y", height));
-  }, drawInterval);
- 
-  let startDragPos = { x: 0, y: 0 };
- 
-  let drag = d3.drag()
-    .on("start", (event) => {
-      diff = { x: 0, y: 0 };
-      startDragPos = {
-        x: bound(event.x, margin + radius, width - margin - radius),
-        y: bound(event.y, margin + radius, height - margin - radius)
-      };
-      ball.attr("cx", startDragPos.x)
-        .attr("cy", startDragPos.y);
-      line.attr("stroke-width", 2)
-        .attr("x1", startDragPos.x)
-        .attr("y1", startDragPos.y)
-        .attr("x2", startDragPos.x)
-        .attr("y2", startDragPos.y);
-    })
-    .on("drag", (event) => {
-      let pos = {
-        x: bound(event.x, margin + radius, width - margin - radius),
-        y: bound(event.y, margin + radius, height - margin - radius)
-      };
-      ball.attr("cx", pos.x)
-        .attr("cy", pos.y);
-      line.attr("x2", pos.x)
-        .attr("y2", pos.y);
-    })
-    .on("end", (event) => {
-      let delta = {
-        x: event.x - startDragPos.x,
-        y: event.y - startDragPos.y
-      };
-      let angle = Math.atan2(delta.y, delta.x) + Math.PI;
-      diff = {
-        x: Math.cos(angle),
-        y: Math.sin(angle)
-      };
-      velocity = bound(Math.sqrt(Math.pow(delta.x, 2) + Math.pow(delta.y, 2)) / velocityDivisor, minVelocity, maxVelocity);
-      ball.attr("cx", bound(event.x, margin + radius, width - margin - radius))
-        .attr("cy", bound(event.y, margin + radius, height - margin - radius));
-        line.attr("stroke-width", 0)
-        .attr("x1", 0)
-        .attr("y1", 0)
-        .attr("x2", 0)
-        .attr("y2", 0);
-      startDragPos = { x: 0, y: 0 };
-    });
- 
-  surface.call(drag);
-  d3.select("#Ball").append(svg);
- 
-</script>
-
 </html>
\ No newline at end of file
