Суперэллипс и суперпарабола
Материал из Department of Theoretical and Applied Mechanics
Виртуальная лаборатория > Суперэллипс и суперпарабола
Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых (перемещение слайдера меняет показатель степени).
—
Суперпарабола:
y = |x|n
— Суперэллипс: |x|n + |y|n = 1
— Суперэллипс: |x|n + |y|n = 1
Степень:
n =
Текст программы построения графиков на языке JavaScript:
Файл "SEP.js"
1 // Суперэллипс и суперпарабола
2 // Superellipse & superparabola (SEP)
3 // Разработчики А.М. Кривцов и Д.В. Цветков
4 // 03.05.2014
5 // 15.05.2014 коррекция для совместимости с Google Chrome
6 // 06.11.2014 коррекция - удаление const (Цветков)
7 // Интернет: tm.spbstu.ru/SEP
8
9 function MainSEP(canvas, Slider_01, Text_01) {
10
11 // Предварительные установки
12
13 var context = canvas.getContext("2d"); // на context происходит рисование
14
15 // Задаваемые параметры
16
17 var n = 2;
18 var fps = 50; // f rames per second - число кадров в секунду (качество отображения)
19
20 // Область построения графика
21 var x_min = -2;
22 var x_max = -x_min;
23 var y_min = x_min;
24 var y_max = -x_min;
25
26 // Настройка элементов управления
27 Slider_01.min = 0.1; // лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер
28 Slider_01.max = 10;
29 Slider_01.step = 0.1;
30 Slider_01.value = n; // значение ползунка должно задаваться после min, max и step
31 Text_01.value = n;
32 var parabola_flag = true;
33 var ellipse_flag = true;
34
35 // Функции, запускающиеся при изменении элементов управления
36 this.setSlider_01 = function(input) { n = input; draw(); } // input - значение на слайдере
37 this.setCheckbox_01 = function(bool) {parabola_flag = bool; draw(); }
38 this.setCheckbox_02 = function(bool) {ellipse_flag = bool; draw(); }
39
40 // Расчет параметров графики
41
42 var N = canvas.width; // число точек по оси x
43 var dx = x_max / N; // шаг по оси x
44 var sx = canvas.width / (x_max - x_min); // масштаб по оси x
45 var sy = canvas.height / (y_max - y_min); // масштаб по оси y
46 var X0 = canvas.width + x_min * sx; // положение 0 оси x в экранных координатах
47 var Y0 = canvas.height + y_min * sy; // положение 0 оси y в экранных координатах
48
49 draw(); // Отображение
50
51 function draw()
52 {
53 context.clearRect(0, 0, canvas.width, canvas.height); // очистить экран
54
55 // Горизонтальная ось
56 context.strokeStyle = 'lightgrey';
57 context.beginPath();
58 context.moveTo(0, Y0);
59 context.lineTo(canvas.width, Y0);
60 context.moveTo(X0, 0);
61 context.lineTo(X0, canvas.height);
62 context.stroke();
63
64 // Надписи
65 context.fillStyle = 'black';
66 context.font = "20px Times";
67 context.fillText("0", X0 + 3, Y0 + 20);
68 context.fillText("1", X0 + 1 * sx + 4, Y0 + 20);
69 context.fillText("1", X0 + 5, Y0 - 1 * sy - 4);
70 context.font = "italic 20px Times";
71 context.fillText("x", canvas.width - 14, Y0 + 20);
72 context.fillText("y", X0 + 7, 15);
73
74 // График y = x^n
75 context.strokeStyle = 'black';
76 context.beginPath();
77 if (parabola_flag)
78 for (var x = x_min; x < x_max; x += dx)
79 {
80 var y = Math.pow(Math.abs(x), n);
81
82 var X = X0 + x * sx;
83 var Y = Y0 - y * sy;
84
85 if (x == x_min) context.moveTo(X, Y);
86 else context.lineTo(X, Y);
87 }
88 context.stroke();
89
90 // График x^n + y^n = 1
91 context.strokeStyle = 'red';
92 context.beginPath();
93 if (ellipse_flag)
94 for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180)
95 {
96 var x = Sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n);
97 var y = Sign(Math.sin(t)) * Math.pow(Math.abs(Math.sin(t)), 2/n);
98
99 var X = X0 + x * sx;
100 var Y = Y0 - y * sy;
101
102 if (t == 0) context.moveTo(X, Y);
103 else context.lineTo(X, Y);
104 }
105 context.stroke();
106 }
107
108 // Сигнум числа
109 // Функция Math.sign пока не поддерживается Google Chrome
110 function Sign(x)
111 {
112 if (x > 0) return 1;
113 if (x < 0) return -1;
114 return 0;
115 }
116 }
Файл "SEP.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Super Ellipse</title>
6 <script src="SEP.js"></script>
7 </head>
8 <body>
9 <!--Графическое поле-->
10 <canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas>
11
12 <!--Чекбоксы-->
13 <div>
14 <font color="#000000" size="5"><B>—</B></font>
15 <input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Суперпарабола:
16 <I>y = |x|<SUP>n</SUP></I>
17 <BR>
18 <font color="#ff0000" size="5"><B>—</B></font>
19 <input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Суперэллипс:
20 <I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR>
21 </div>
22
23 <!--Слайдер-->
24 <div>Степень:
25 <input type="range" id="Slider_01" style="width: 150px;" oninput="app.setSlider_01(this.value); document.getElementById('Text_01').value = this.value;">
26 <I>n</I> =
27 <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
28 // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
29 if (!this.checkValidity()) return;
30 app.setSlider_01(this.value);
31 document.getElementById('Slider_01').value = this.value;
32 ">
33 </div>
34 <br>
35
36 <!--Запуск приложения-->
37 <script type="text/javascript">var app = new MainSEP(
38 document.getElementById('canvasGraph'),
39 document.getElementById('Slider_01'),
40 document.getElementById('Text_01')
41 ); </script>
42 </body>
43 </html>
Частные случаи суперэллипса[править]
| кривая | |
|---|---|
| крест | |
| звезда из парабол | |
| астроида | |
| ромб | |
| окружность (эллипс) | |
| квадрокруг (squircle) | |
| квадрат (прямоугольник) |
См. также[править]
- Суперэллипс (Википедия)
- Lp space (Wikipedia)
