192 lines
4.3 KiB
HTML
Executable File
192 lines
4.3 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
|
</head>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #fafafa;
|
|
margin: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
#container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
p {
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
|
|
<div id="container">
|
|
<h1>Ellipse Construction</h1>
|
|
|
|
<p>
|
|
Inspired by a Richard Feyman's
|
|
<a href="https://en.wikipedia.org/wiki/Feynman's_Lost_Lecture"
|
|
>lost lecture</a
|
|
>
|
|
&
|
|
<a href="https://www.youtube.com/watch?v=xdIjYBtnvZU"
|
|
>3blue1brown's video</a
|
|
>.
|
|
</p>
|
|
<p>A geometric proof as to why planetary orbits are ellipitcal.</p>
|
|
|
|
<h2 id="PIbox"></h2>
|
|
<h3 id="percentage"></h3>
|
|
</div>
|
|
|
|
<script>
|
|
class dot {
|
|
constructor(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
}
|
|
|
|
var ux, uy;
|
|
var points = [];
|
|
var numericValue = 15;
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
background(41);
|
|
}
|
|
|
|
function draw() {
|
|
translate(width / 2, height / 2);
|
|
background(41);
|
|
|
|
stroke(75, 75, 215);
|
|
strokeWeight(3);
|
|
noFill();
|
|
ellipse(0, 0, width - 0.0625 * width, height - 0.0625 * height);
|
|
|
|
stroke(215, 215, 15);
|
|
strokeWeight(7);
|
|
point(0, 0);
|
|
if (mouseY > 0 && mouseY < height && mouseX > 0 && mouseX < width) {
|
|
if (mouseIsPressed == true && mouseButton == LEFT) {
|
|
ux = mouseX - width / 2;
|
|
uy = mouseY - height / 2;
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawLines(ux, uy);
|
|
drawTLines(ux, uy);
|
|
} else if (mouseIsPressed == true && mouseButton == RIGHT) {
|
|
ux = mouseX - width / 2;
|
|
uy = mouseY - height / 2;
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawTLines(ux, uy);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getCirclePoints() {
|
|
var r = (width - 0.0625 * width) / 2;
|
|
var step = 1 / numericValue;
|
|
var index = 0;
|
|
for (var i = 0; i < TWO_PI; i += step) {
|
|
var cx = r * Math.sin(i);
|
|
var cy = r * Math.cos(i);
|
|
points[index] = new dot(cx, cy);
|
|
index++;
|
|
}
|
|
}
|
|
|
|
function drawLines(startX, startY) {
|
|
strokeWeight(0.4);
|
|
stroke(255, 100);
|
|
|
|
for (var i = 0; i < points.length; i++) {
|
|
line(startX, startY, points[i].x, points[i].y);
|
|
//findMidpoint(startX, startY, points[i].x, points[i].y);
|
|
}
|
|
}
|
|
|
|
function drawTLines(startX, startY) {
|
|
strokeWeight(0.4);
|
|
stroke(255);
|
|
|
|
for (var i = 0; i < points.length; i++) {
|
|
findMidpoint(startX, startY, points[i].x, points[i].y);
|
|
}
|
|
}
|
|
|
|
function findMidpoint(x1, y1, x2, y2) {
|
|
//find center
|
|
var cx = (x1 + x2) / 2;
|
|
var cy = (y1 + y2) / 2;
|
|
|
|
//move line to the center on the origin
|
|
x1 -= cx;
|
|
y1 -= cy;
|
|
x2 -= cx;
|
|
y2 -= cy;
|
|
|
|
//rotate both points
|
|
xtemp = x1;
|
|
ytemp = y1;
|
|
x1 = -ytemp;
|
|
y1 = xtemp;
|
|
|
|
xtemp = x2;
|
|
ytemp = y2;
|
|
x2 = -ytemp;
|
|
y2 = xtemp;
|
|
|
|
//move the center point back to where it was
|
|
x1 += cx;
|
|
y1 += cy;
|
|
x2 += cx;
|
|
y2 += cy;
|
|
stroke(255, 0, 0);
|
|
line(x1, y1, x2, y2);
|
|
stroke(255);
|
|
}
|
|
|
|
function genLines() {
|
|
var pointOk = false;
|
|
do {
|
|
ux = random(width);
|
|
uy = random(height);
|
|
if (getDist(0, ux, 0, uy) <= (width - 0.0625 * width) / 2) {
|
|
pointOk = true;
|
|
}
|
|
} while (!pointOk);
|
|
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawLines(ux, uy);
|
|
drawTLines(ux, uy);
|
|
}
|
|
|
|
function genTLines() {
|
|
var pointOk = false;
|
|
do {
|
|
ux = random(width);
|
|
uy = random(height);
|
|
if (getDist(0, ux, 0, uy) <= (width - 0.0625 * width) / 2) {
|
|
pointOk = true;
|
|
}
|
|
} while (!pointOk);
|
|
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawTLines(ux, uy);
|
|
}
|
|
|
|
function getDist(x1, x2, y1, y2) {
|
|
return Math.sqrt((x1 - x2) ^ (2 + (y1 - y2)) ^ 2);
|
|
}
|
|
</script>
|
|
</html>
|