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

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

---

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

<addscript src=SEP/>

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

// Суперэллипс и суперпарабола
// Superellipse & superparabola (SEP)
// Разработчик А. М. Кривцов
// 03.05.2014
// Интернет: tm.spbstu.ru/SEP

function MainSEP(canvas, Slider_01, Text_01) {

    // Предварительные установки

    var context = canvas.getContext("2d");  // на context происходит рисование

    // Задаваемые параметры
   
	var n = 2; 
    const fps = 50;                         // f	rames per second - число кадров в секунду (качество отображения)

    // Область построения графика
    const x_min = -2;  
    const x_max = -x_min;
    const y_min = x_min;    
    const 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(); }	
    
   // Расчет параметров графики
    
    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(); // Отображение

    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 = Math.sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n);
            var y = Math.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();
    }
}

Файл "SEP.html"

<!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.set_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>

</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)