| Текущая версия |
Ваш текст |
| Строка 2: |
Строка 2: |
| | | | |
| | | | |
| − | Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).'' | + | Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).'' |
| − | | |
| − | | |
| − | <htmlet nocache="yes">Krivtsov/SEP_TM</htmlet>
| |
| − | | |
| − | <div class="mw-collapsible mw-collapsed" style="width:100%" >
| |
| − | '''Текст программы построения графиков на языке JavaScript:''' <div class="mw-collapsible-content">
| |
| − | Файл '''"SEP.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | // Суперэллипс и суперпарабола
| |
| − | // Superellipse & superparabola (SEP)
| |
| − | // Разработчики А.М. Кривцов и Д.В. Цветков
| |
| − | // 03.05.2014
| |
| − | // 15.05.2014 коррекция для совместимости с Google Chrome
| |
| − | // 06.11.2014 коррекция - удаление const (Цветков)
| |
| − | // Интернет: tm.spbstu.ru/SEP
| |
| − | | |
| − | function MainSEP(canvas, Slider_01, Text_01) {
| |
| − | | |
| − | // Предварительные установки
| |
| − | | |
| − | var context = canvas.getContext("2d"); // на context происходит рисование
| |
| − | | |
| − | // Задаваемые параметры
| |
| − |
| |
| − | var n = 2;
| |
| − | var fps = 50; // f rames per second - число кадров в секунду (качество отображения)
| |
| − | | |
| − | // Область построения графика
| |
| − | var x_min = -2;
| |
| − | var x_max = -x_min;
| |
| − | var y_min = x_min;
| |
| − | var y_max = -x_min;
| |
| − |
| |
| − | // Настройка элементов управления
| |
| − | Slider_01.min = 0.1; // лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер
| |
| − | Slider_01.max = 10;
| |
| − | Slider_01.step = 0.1;
| |
| − | Slider_01.value = n; // значение ползунка должно задаваться после min, max и step
| |
| − | Text_01.value = n;
| |
| − | var parabola_flag = true;
| |
| − | var ellipse_flag = true;
| |
| − | | |
| − | // Функции, запускающиеся при изменении элементов управления
| |
| − | this.setSlider_01 = function(input) { n = input; draw(); } // input - значение на слайдере
| |
| − | this.setCheckbox_01 = function(bool) {parabola_flag = bool; draw(); }
| |
| − | this.setCheckbox_02 = function(bool) {ellipse_flag = bool; draw(); }
| |
| − |
| |
| − | // Расчет параметров графики
| |
| − |
| |
| − | var N = canvas.width; // число точек по оси x
| |
| − | var dx = x_max / N; // шаг по оси x
| |
| − | var sx = canvas.width / (x_max - x_min); // масштаб по оси x
| |
| − | var sy = canvas.height / (y_max - y_min); // масштаб по оси y
| |
| − | var X0 = canvas.width + x_min * sx; // положение 0 оси x в экранных координатах
| |
| − | var Y0 = canvas.height + y_min * sy; // положение 0 оси y в экранных координатах
| |
| − | | |
| − | draw(); // Отображение
| |
| − | | |
| − | function draw()
| |
| − | {
| |
| − | context.clearRect(0, 0, canvas.width, canvas.height); // очистить экран
| |
| − |
| |
| − | // Горизонтальная ось
| |
| − | context.strokeStyle = 'lightgrey';
| |
| − | context.beginPath();
| |
| − | context.moveTo(0, Y0);
| |
| − | context.lineTo(canvas.width, Y0);
| |
| − | context.moveTo(X0, 0);
| |
| − | context.lineTo(X0, canvas.height);
| |
| − | context.stroke();
| |
| − | | |
| − | // Надписи
| |
| − | context.fillStyle = 'black';
| |
| − | context.font = "20px Times";
| |
| − | context.fillText("0", X0 + 3, Y0 + 20);
| |
| − | context.fillText("1", X0 + 1 * sx + 4, Y0 + 20);
| |
| − | context.fillText("1", X0 + 5, Y0 - 1 * sy - 4);
| |
| − | context.font = "italic 20px Times";
| |
| − | context.fillText("x", canvas.width - 14, Y0 + 20);
| |
| − | context.fillText("y", X0 + 7, 15);
| |
| − | | |
| − | // График y = x^n
| |
| − | context.strokeStyle = 'black';
| |
| − | context.beginPath();
| |
| − | if (parabola_flag)
| |
| − | for (var x = x_min; x < x_max; x += dx)
| |
| − | {
| |
| − | var y = Math.pow(Math.abs(x), n);
| |
| − |
| |
| − | var X = X0 + x * sx;
| |
| − | var Y = Y0 - y * sy;
| |
| − | | |
| − | if (x == x_min) context.moveTo(X, Y);
| |
| − | else context.lineTo(X, Y);
| |
| − | }
| |
| − | context.stroke();
| |
| − | | |
| − | // График x^n + y^n = 1
| |
| − | context.strokeStyle = 'red';
| |
| − | context.beginPath();
| |
| − | if (ellipse_flag)
| |
| − | for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180)
| |
| − | {
| |
| − | var x = Sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n);
| |
| − | var y = Sign(Math.sin(t)) * Math.pow(Math.abs(Math.sin(t)), 2/n);
| |
| − |
| |
| − | var X = X0 + x * sx;
| |
| − | var Y = Y0 - y * sy;
| |
| − | | |
| − | if (t == 0) context.moveTo(X, Y);
| |
| − | else context.lineTo(X, Y);
| |
| − | }
| |
| − | context.stroke();
| |
| − | }
| |
| − |
| |
| − | // Сигнум числа
| |
| − | // Функция Math.sign пока не поддерживается Google Chrome
| |
| − | function Sign(x)
| |
| − | {
| |
| − | if (x > 0) return 1;
| |
| − | if (x < 0) return -1;
| |
| − | return 0;
| |
| − | }
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | Файл '''"SEP.html"'''
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="UTF-8" />
| |
| − | <title>Super Ellipse</title>
| |
| − | <script src="SEP.js"></script>
| |
| − | </head>
| |
| − | <body>
| |
| − | <!--Графическое поле-->
| |
| − | <canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas>
| |
| − | | |
| − | <!--Чекбоксы-->
| |
| − | <div>
| |
| − | <font color="#000000" size="5"><B>—</B></font>
| |
| − | <input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Суперпарабола:
| |
| − | <I>y = |x|<SUP>n</SUP></I>
| |
| − | <BR>
| |
| − | <font color="#ff0000" size="5"><B>—</B></font>
| |
| − | <input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Суперэллипс:
| |
| − | <I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR>
| |
| − | </div>
| |
| − |
| |
| − | <!--Слайдер-->
| |
| − | <div>Степень:
| |
| − | <input type="range" id="Slider_01" style="width: 150px;" oninput="app.setSlider_01(this.value); document.getElementById('Text_01').value = this.value;">
| |
| − | <I>n</I> =
| |
| − | <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
| |
| − | // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
| |
| − | if (!this.checkValidity()) return;
| |
| − | app.setSlider_01(this.value);
| |
| − | document.getElementById('Slider_01').value = this.value;
| |
| − | ">
| |
| − | </div>
| |
| − | <br>
| |
| − |
| |
| − | <!--Запуск приложения-->
| |
| − | <script type="text/javascript">var app = new MainSEP(
| |
| − | document.getElementById('canvasGraph'),
| |
| − | document.getElementById('Slider_01'),
| |
| − | document.getElementById('Text_01')
| |
| − | ); </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| | + | <addscript src=SEP/> |
| | + | <htmlet nocache="yes">SEP_TM</htmlet> |
| | | | |
| | == Частные случаи суперэллипса == | | == Частные случаи суперэллипса == |
| Строка 194: |
Строка 23: |
| | |<math>2</math> || окружность (эллипс) | | |<math>2</math> || окружность (эллипс) |
| | |-align="center" | | |-align="center" |
| − | |<math>4</math> || квадрокруг ([http://en.wikipedia.org/wiki/Squircle squircle]) | + | |<math>4</math> || сквиркл ([http://en.wikipedia.org/wiki/Squircle squircle]) |
| | |-align="center" | | |-align="center" |
| | |<math>\infty</math> || квадрат (прямоугольник) | | |<math>\infty</math> || квадрат (прямоугольник) |
| Строка 203: |
Строка 32: |
| | * [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) |
| − |
| |
| − | [[Category: Виртуальная лаборатория]]
| |
| − | [[Category: Программирование]]
| |
| − | [[Category: JavaScript]]
| |
