61 lines
2.2 KiB
PHP
61 lines
2.2 KiB
PHP
<?php
|
|
if($_SERVER['HTTP_X_FORWARDED_PROTO'] !== 'https') {
|
|
header('Location: https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
|
|
die();
|
|
}
|
|
?>
|
|
|
|
<DOCTYPE! html>
|
|
<html>
|
|
<title>Constructing Ellipses</title>
|
|
<p>Drag your cursor around the canvas (you can use the left and right buttons for different results) to contruct an ellipse</p>
|
|
<p>Inspired by Grant Sanderson from 3blue1brown</p>
|
|
<p>Watch his <a href="https://twitter.com/3blue1brown/status/1016936129117937664">here</a></p>
|
|
<p>NOTE: doesn't work on mobile, go get a PC</p>
|
|
<div class="quantity">
|
|
<input id="numPoints" type="number" min="10" max="100" step="10" value="10">
|
|
</div>
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
<script src="../frameworks/p5.min.js"></script>
|
|
<script src="../frameworks/p5.dom.min.js"></script>
|
|
<script src="../frameworks/jquery-3.3.1.min.js"></script>
|
|
<script src="script.js"></script>
|
|
<script src="dot.js"></script>
|
|
<script>
|
|
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
|
|
jQuery('.quantity').each(function() {
|
|
var spinner = jQuery(this),
|
|
input = spinner.find('input[type="number"]'),
|
|
btnUp = spinner.find('.quantity-up'),
|
|
btnDown = spinner.find('.quantity-down'),
|
|
min = input.attr('min'),
|
|
max = input.attr('max');
|
|
|
|
btnUp.click(function() {
|
|
var oldValue = parseFloat(input.val());
|
|
if (oldValue >= max) {
|
|
var newVal = oldValue;
|
|
} else {
|
|
var newVal = oldValue + 1;
|
|
}
|
|
spinner.find("input").val(newVal);
|
|
spinner.find("input").trigger("change");
|
|
});
|
|
|
|
btnDown.click(function() {
|
|
var oldValue = parseFloat(input.val());
|
|
if (oldValue <= min) {
|
|
var newVal = oldValue;
|
|
} else {
|
|
var newVal = oldValue - 1;
|
|
}
|
|
spinner.find("input").val(newVal);
|
|
spinner.find("input").trigger("change");
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</html>
|