Редактирование: Суперэллипс и суперпарабола
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 4: | Строка 4: | ||
Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).'' | Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).'' | ||
+ | <addscript src=SEP/> | ||
+ | <htmlet nocache="yes">SEP_TM</htmlet> | ||
− | + | Текст программы построения графиков на языке JavaScript: <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
− | |||
− | |||
Файл '''"SEP.js"''' | Файл '''"SEP.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
// Суперэллипс и суперпарабола | // Суперэллипс и суперпарабола | ||
// Superellipse & superparabola (SEP) | // Superellipse & superparabola (SEP) | ||
− | // | + | // Разработчик А. М. Кривцов |
− | // | + | // 02.05.2014 |
− | |||
− | |||
// Интернет: tm.spbstu.ru/SEP | // Интернет: tm.spbstu.ru/SEP | ||
− | function | + | function MainSLJ(canvas, Slider_01, Text_01) { |
// Предварительные установки | // Предварительные установки | ||
Строка 27: | Строка 24: | ||
// Задаваемые параметры | // Задаваемые параметры | ||
− | + | var n = 2; | |
− | + | const fps = 50; // frames per second - число кадров в секунду (качество отображения) | |
// Область построения графика | // Область построения графика | ||
− | + | const x_min = -2; | |
− | + | const x_max = -x_min; | |
− | + | const y_min = x_min; | |
− | + | const y_max = -x_min; | |
− | // | + | // Установка слайдера |
+ | |||
+ | // функция, запускающаяся при перемещении слайдера | ||
+ | this.set_01 = function(input_01) { n = input_01; draw(); } // input_01 - значение на слайдере | ||
+ | |||
+ | // настройка слайдеров и текстовых полей | ||
Slider_01.min = 0.1; // лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер | Slider_01.min = 0.1; // лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер | ||
Slider_01.max = 10; | Slider_01.max = 10; | ||
Строка 42: | Строка 44: | ||
Slider_01.value = n; // значение ползунка должно задаваться после min, max и step | Slider_01.value = n; // значение ползунка должно задаваться после min, max и step | ||
Text_01.value = n; | Text_01.value = n; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
// Расчет параметров графики | // Расчет параметров графики | ||
− | + | const N = canvas.width; // число точек по оси x | |
− | + | const dx = x_max / N; // шаг по оси x | |
− | + | const sx = canvas.width / (x_max - x_min); // масштаб по оси x | |
− | + | const sy = canvas.height / (y_max - y_min); // масштаб по оси y | |
− | + | const X0 = canvas.width + x_min * sx; // положение 0 оси x в экранных координатах | |
− | + | const Y0 = canvas.height + y_min * sy; // положение 0 оси y в экранных координатах | |
draw(); // Отображение | draw(); // Отображение | ||
Строка 63: | Строка 58: | ||
function draw() | function draw() | ||
{ | { | ||
− | + | context.clearRect(0, 0, canvas.width, canvas.height); // очистить экран | |
// Горизонтальная ось | // Горизонтальная ось | ||
Строка 87: | Строка 82: | ||
context.strokeStyle = 'black'; | context.strokeStyle = 'black'; | ||
context.beginPath(); | context.beginPath(); | ||
− | + | for (var x = x_min; x < x_max; x += dx) | |
− | |||
{ | { | ||
var y = Math.pow(Math.abs(x), n); | var y = Math.pow(Math.abs(x), n); | ||
Строка 103: | Строка 97: | ||
context.strokeStyle = 'red'; | context.strokeStyle = 'red'; | ||
context.beginPath(); | context.beginPath(); | ||
− | + | for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180) | |
− | |||
{ | { | ||
− | var x = | + | var x = Math.sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n); |
− | var y = | + | var y = Math.sign(Math.sin(t)) * Math.pow(Math.abs(Math.sin(t)), 2/n); |
var X = X0 + x * sx; | var X = X0 + x * sx; | ||
Строка 116: | Строка 109: | ||
} | } | ||
context.stroke(); | context.stroke(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
} | } | ||
− | </ | + | </source> |
Файл '''"SEP.html"''' | Файл '''"SEP.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 138: | Строка 122: | ||
</head> | </head> | ||
<body> | <body> | ||
− | + | <canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas> | |
− | |||
− | + | <div> | |
− | + | <font color="#000000" size="5"><B>—</B></font> Суперпарабола: <I>y = |x|<SUP>n</SUP></I><BR> | |
− | <font color="#000000" size="5"><B>—</B></font | + | <font color="#ff0000" size="5"><B>—</B></font> Суперэллипс: <I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR> |
− | |||
− | |||
− | |||
− | <font color="#ff0000" size="5"><B>—</B></font | ||
− | |||
− | |||
</div> | </div> | ||
− | + | ||
− | + | <!--слайдер--> | |
<div>Степень: | <div>Степень: | ||
− | <input type="range" id="Slider_01" style="width: 150px;" oninput="app. | + | <input type="range" id="Slider_01" style="width: 150px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;"> |
<I>n</I> = | <I>n</I> = | ||
<input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" | <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" | ||
// если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false | // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false | ||
if (!this.checkValidity()) return; | if (!this.checkValidity()) return; | ||
− | app. | + | app.set_01(this.value); |
document.getElementById('Slider_01').value = this.value; | document.getElementById('Slider_01').value = this.value; | ||
"> | "> | ||
</div> | </div> | ||
<br> | <br> | ||
− | + | ||
− | + | <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'), | |
− | <script type="text/javascript">var app = new | + | document.getElementById('Slider_01'), document.getElementById('Text_01'));</script> |
− | + | ||
− | + | <div style="clear:both;"></div> | |
− | |||
− | |||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
Строка 194: | Строка 168: | ||
|<math>2</math> || окружность (эллипс) | |<math>2</math> || окружность (эллипс) | ||
|-align="center" | |-align="center" | ||
− | |<math>4</math> || | + | |<math>4</math> || сквиркл ([http://en.wikipedia.org/wiki/Squircle squircle]) |
|-align="center" | |-align="center" | ||
|<math>\infty</math> || квадрат (прямоугольник) | |<math>\infty</math> || квадрат (прямоугольник) | ||
|} | |} | ||
+ | |||
== См. также == | == См. также == | ||
Строка 203: | Строка 178: | ||
* [http://ru.wikipedia.org/wiki/%D0%A1%D1%83%D0%BF%D0%B5%D1%80%D1%8D%D0%BB%D0%BB%D0%B8%D0%BF%D1%81 Суперэллипс] (Википедия) | * [http://ru.wikipedia.org/wiki/%D0%A1%D1%83%D0%BF%D0%B5%D1%80%D1%8D%D0%BB%D0%BB%D0%B8%D0%BF%D1%81 Суперэллипс] (Википедия) | ||
* [http://en.wikipedia.org/w/index.php?title=Lp_space&action=edit L<sup>''p''</sup> space] (Wikipedia) | * [http://en.wikipedia.org/w/index.php?title=Lp_space&action=edit L<sup>''p''</sup> space] (Wikipedia) | ||
− | |||
− | |||
− | |||
− |