Суперэллипс и суперпарабола — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Новая страница: «Виртуальная лаборатория > Суперэллипс и суперпарабола <HR> Суперэллипс и суперпарабо...»)
 
Строка 6: Строка 6:
 
<addscript src=SEP/>
 
<addscript src=SEP/>
 
<htmlet nocache="yes">SEP_TM</htmlet>
 
<htmlet nocache="yes">SEP_TM</htmlet>
 +
 +
Текст программы на языке JavaScript: <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
 +
Файл '''"SEP.js"'''
 +
<source lang="javascript" first-line="1">
 +
// Суперэллипс и суперпарабола
 +
// Superellipse & superparabola (SEP)
 +
// Разработчик А. М. Кривцов
 +
// 02.05.2014
 +
// Интернет: tm.spbstu.ru/SEP
 +
 +
function MainSLJ(canvas, Slider_01, Text_01) {
 +
 +
    // Предварительные установки
 +
 +
    var context = canvas.getContext("2d");  // на context происходит рисование
 +
 +
    // Задаваемые параметры
 +
 
 +
    var n = 2;
 +
    const fps = 50;                        // frames per second - число кадров в секунду (качество отображения)
 +
 +
    // Область построения графика
 +
    const x_min = -2; 
 +
    const x_max = -x_min;
 +
    const y_min = x_min;   
 +
    const y_max = -x_min;   
 +
     
 +
    // Установка слайдера
 +
 +
    // функция, запускающаяся при перемещении слайдера
 +
    this.set_01 = function(input_01) { n = input_01; draw(); } // input_01 - значение на слайдере
 +
 +
    // настройка слайдеров и текстовых полей
 +
    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;
 +
   
 +
  // Расчет параметров графики
 +
   
 +
    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();
 +
        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();
 +
        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();
 +
    }
 +
}
 +
</source>
 +
Файл '''"SEP.html"'''
 +
<source lang="html" first-line="1">
 +
<!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>
 +
    <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'));</script>
 +
 +
    <div>
 +
        <font color="#000000" size="5"><B>—</B></font> Суперпарабола: <I>y = |x|<SUP>n</SUP></I><BR>
 +
        <font color="#ff0000" size="5"><B>—</B></font> Суперэллипс: <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.set_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 MainSLJ(document.getElementById('canvasGraph'),
 +
            document.getElementById('Slider_01'), document.getElementById('Text_01'));</script>
 +
 +
    <div style="clear:both;"></div>
 +
</body>
 +
</html>
 +
</source>
 +
</toggledisplay>
 +
  
 
== Частные случаи суперэллипса ==
 
== Частные случаи суперэллипса ==

Версия 17:34, 2 мая 2014

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


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

<addscript src=SEP/>

Не удается найти HTML-файл SEP_TM.html

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

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

function MainSLJ(canvas, Slider_01, Text_01) {

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

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

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

    // Область построения графика
    const x_min = -2;  
    const x_max = -x_min;
    const y_min = x_min;    
    const y_max = -x_min;    
       
    // Установка слайдера

    // функция, запускающаяся при перемещении слайдера
    this.set_01 = function(input_01) { n = input_01; draw(); } // input_01 - значение на слайдере

    // настройка слайдеров и текстовых полей
    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;
    
   // Расчет параметров графики
    
    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();
        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();
        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>
    <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'));</script>

    <div>
        <font color="#000000" size="5"><B>—</B></font> Суперпарабола: <I>y = |x|<SUP>n</SUP></I><BR>
        <font color="#ff0000" size="5"><B>—</B></font> Суперэллипс: <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.set_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 MainSLJ(document.getElementById('canvasGraph'),
            document.getElementById('Slider_01'), document.getElementById('Text_01'));</script>

    <div style="clear:both;"></div>
</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] квадрат (прямоугольник)

См. также

Источник — «http://tm.spbstu.ru/?title=Суперэллипс_и_суперпарабола&oldid=25082»