Редактирование: Суперэллипс и суперпарабола

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


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


<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
// Интернет: 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 = 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>


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

{| class="wikitable" 
|-
!<math>n</math> || кривая
|-align="center"
|<math>0</math> || крест
|-align="center"
|<math>1/2</math> || звезда из парабол
|-align="center"
|<math>2/3</math> || [http://ru.wikipedia.org/wiki/%D0%90%D1%81%D1%82%D1%80%D0%BE%D0%B8%D0%B4%D0%B0 астроида]
|-align="center"
|<math>1</math> || ромб
|-align="center"
|<math>2</math> || окружность (эллипс)
|-align="center"
|<math>4</math> || квадрокруг ([http://en.wikipedia.org/wiki/Squircle squircle])
|-align="center"
|<math>\infty</math> || квадрат (прямоугольник)
|}

== См. также ==

* [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)

[[Category: Виртуальная лаборатория]]
[[Category: Программирование]]
[[Category: JavaScript]]