Суперэллипс и суперпарабола

Виртуальная лаборатория > Суперэллипс и суперпарабола

---

Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых (перемещение слайдера меняет показатель степени).

— Суперпарабола: y = |x|ⁿ
— Суперэллипс: |x|ⁿ + |y|ⁿ = 1

Степень: n =

Текст программы построения графиков на языке JavaScript: <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "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;
   }

} </syntaxhighligh> Файл "SEP.html" <syntaxhighlight lang="html" 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>

       —

<input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Суперпарабола: y = |x|ⁿ

       —

<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Суперэллипс: |x|ⁿ + |y|ⁿ = 1

Степень:

       <input type="range" id="Slider_01" style="width: 150px;" oninput="app.setSlider_01(this.value); document.getElementById('Text_01').value = this.value;">
       n =
       <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;
       ">

   <script type="text/javascript">var app = new MainSEP(

document.getElementById('canvasGraph'),

       document.getElementById('Slider_01'), 

document.getElementById('Text_01') ); </script> </body> </html> </syntaxhighligh> </toggledisplay>

Частные случаи суперэллипса

[math]n[/math]	кривая
[math]0[/math]	крест
[math]1/2[/math]	звезда из парабол
[math]2/3[/math]	астроида
[math]1[/math]	ромб
[math]2[/math]	окружность (эллипс)
[math]4[/math]	сквиркл (squircle)
[math]\infty[/math]	квадрат (прямоугольник)

См. также

• Суперэллипс (Википедия)
• L^p space (Wikipedia)