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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
м
Строка 13: Строка 13:
 
// Superellipse & superparabola (SEP)
 
// Superellipse & superparabola (SEP)
 
// Разработчик А. М. Кривцов
 
// Разработчик А. М. Кривцов
−
// 02.05.2014
+
// 03.05.2014
 
// Интернет: tm.spbstu.ru/SEP
 
// Интернет: tm.spbstu.ru/SEP
  
−
function MainSLJ(canvas, Slider_01, Text_01) {
+
function MainSEP(canvas, Slider_01, Text_01) {
  
 
     // Предварительные установки
 
     // Предварительные установки
Строка 24: Строка 24:
 
     // Задаваемые параметры
 
     // Задаваемые параметры
 
    
 
    
−
    var n = 2;  
+
var n = 2;  
−
     const fps = 50;                        // frames per second - число кадров в секунду (качество отображения)
+
     const fps = 50;                        // f rames per second - число кадров в секунду (качество отображения)
  
 
     // Область построения графика
 
     // Область построения графика
Строка 33: Строка 33:
 
     const y_max = -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.min = 0.1;      // лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер
 
     Slider_01.max = 10;
 
     Slider_01.max = 10;
Строка 44: Строка 39:
 
     Slider_01.value = n;    // значение ползунка должно задаваться после min, max и step
 
     Slider_01.value = n;    // значение ползунка должно задаваться после min, max и step
 
     Text_01.value = n;
 
     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(); }
 
      
 
      
 
   // Расчет параметров графики
 
   // Расчет параметров графики
Строка 58: Строка 60:
 
     function draw()
 
     function draw()
 
     {
 
     {
−
        context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
+
context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
 
          
 
          
 
         // Горизонтальная ось
 
         // Горизонтальная ось
Строка 82: Строка 84:
 
         context.strokeStyle = 'black';
 
         context.strokeStyle = 'black';
 
         context.beginPath();
 
         context.beginPath();
−
        for (var x = x_min; x < x_max; x += dx)
+
if (parabola_flag)
 +
for (var x = x_min; x < x_max; x += dx)
 
         {
 
         {
 
             var y = Math.pow(Math.abs(x), n);
 
             var y = Math.pow(Math.abs(x), n);
Строка 97: Строка 100:
 
         context.strokeStyle = 'red';
 
         context.strokeStyle = 'red';
 
         context.beginPath();
 
         context.beginPath();
−
        for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180)
+
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 x = Math.sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n);
Строка 122: Строка 126:
 
</head>
 
</head>
 
<body>
 
<body>
−
    <canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas>
+
<!--Графическое поле-->
 +
<canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas>
  
−
    <div>
+
<!--Чекбоксы-->
−
         <font color="#000000" size="5"><B>—</B></font> Суперпарабола: <I>y = |x|<SUP>n</SUP></I><BR>
+
<div>
−
         <font color="#ff0000" size="5"><B>—</B></font> Суперэллипс: <I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR>
+
         <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>
−
+
   
−
    <!--слайдер-->
+
<!--Слайдер-->
 
     <div>Степень:
 
     <div>Степень:
−
         <input type="range" id="Slider_01" style="width: 150px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
+
         <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> =
 
         <I>n</I> =
 
         <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
 
         <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
Строка 141: Строка 152:
 
     </div>
 
     </div>
 
     <br>
 
     <br>
−
   
+
−
     <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'),
+
<!--Запуск приложения-->   
−
            document.getElementById('Slider_01'), document.getElementById('Text_01'));</script>
+
     <script type="text/javascript">var app = new MainSEP(
−
 
+
document.getElementById('canvasGraph'),
−
    <div style="clear:both;"></div>
+
        document.getElementById('Slider_01'),  
 +
document.getElementById('Text_01')
 +
); </script>
 
</body>
 
</body>
 
</html>  
 
</html>  

Версия 22:35, 4 мая 2014

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


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

<addscript src=SEP/>

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

Текст программы построения графиков на языке 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] квадрат (прямоугольник)


См. также

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