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

Перейти к: навигация, поиск

Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.

Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия Ваш текст
Строка 2: Строка 2:
  
  
−
Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса и параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).''
+
Суперэллипс и суперпарабола — кривые, обобщающие понятие эллипса параболы на произвольную положительную степень. Ниже приведены простейшие интерактивные графики этих кривых ''(перемещение слайдера меняет показатель степени).''
  
 +
<addscript src=SEP/>
 +
<htmlet nocache="yes">SEP_TM</htmlet>
  
−
<htmlet nocache="yes">Krivtsov/SEP_TM</htmlet>
+
Текст программы на языке JavaScript: <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">  
−
 
 
−
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 
−
'''Текст программы построения графиков на языке JavaScript:''' <div class="mw-collapsible-content">
 
 
Файл '''"SEP.js"'''
 
Файл '''"SEP.js"'''
−
<syntaxhighlight lang="javascript" line start="1" enclose="div">
+
<source lang="javascript" first-line="1">
 
// Суперэллипс и суперпарабола
 
// Суперэллипс и суперпарабола
 
// Superellipse & superparabola (SEP)
 
// Superellipse & superparabola (SEP)
−
// Разработчики А.М. Кривцов и Д.В. Цветков
+
// Разработчик А. М. Кривцов
−
// 03.05.2014
+
// 02.05.2014
−
// 15.05.2014 коррекция для совместимости с Google Chrome
 
−
// 06.11.2014 коррекция - удаление const (Цветков)
 
 
// Интернет: tm.spbstu.ru/SEP
 
// Интернет: tm.spbstu.ru/SEP
  
−
function MainSEP(canvas, Slider_01, Text_01) {
+
function MainSLJ(canvas, Slider_01, Text_01) {
  
 
     // Предварительные установки
 
     // Предварительные установки
Строка 27: Строка 24:
 
     // Задаваемые параметры
 
     // Задаваемые параметры
 
    
 
    
−
var n = 2;  
+
    var n = 2;  
−
     var fps = 50;                        // f rames per second - число кадров в секунду (качество отображения)
+
     const fps = 50;                        // frames per second - число кадров в секунду (качество отображения)
  
 
     // Область построения графика
 
     // Область построения графика
−
     var x_min = -2;   
+
     const x_min = -2;   
−
     var x_max = -x_min;
+
     const x_max = -x_min;
−
     var y_min = x_min;     
+
     const y_min = x_min;     
−
     var 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;
Строка 42: Строка 44:
 
     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(); }
 
 
      
 
      
 
   // Расчет параметров графики
 
   // Расчет параметров графики
 
      
 
      
−
     var N = canvas.width;                // число точек по оси x
+
     const N = canvas.width;                // число точек по оси x
−
     var dx = x_max / N;                  // шаг по оси x
+
     const dx = x_max / N;                  // шаг по оси x
−
     var sx = canvas.width / (x_max - x_min);  // масштаб по оси x
+
     const sx = canvas.width / (x_max - x_min);  // масштаб по оси x
−
     var sy = canvas.height / (y_max - y_min); // масштаб по оси y
+
     const sy = canvas.height / (y_max - y_min); // масштаб по оси y
−
     var X0 = canvas.width + x_min * sx;  // положение 0 оси x в экранных координатах
+
     const X0 = canvas.width + x_min * sx;  // положение 0 оси x в экранных координатах
−
     var Y0 = canvas.height + y_min * sy;  // положение 0 оси y в экранных координатах
+
     const Y0 = canvas.height + y_min * sy;  // положение 0 оси y в экранных координатах
  
 
draw(); // Отображение
 
draw(); // Отображение
Строка 63: Строка 58:
 
     function draw()
 
     function draw()
 
     {
 
     {
−
context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
+
        context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
 
          
 
          
 
         // Горизонтальная ось
 
         // Горизонтальная ось
Строка 87: Строка 82:
 
         context.strokeStyle = 'black';
 
         context.strokeStyle = 'black';
 
         context.beginPath();
 
         context.beginPath();
−
if (parabola_flag)
+
        for (var x = x_min; x < x_max; x += dx)
−
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);
Строка 103: Строка 97:
 
         context.strokeStyle = 'red';
 
         context.strokeStyle = 'red';
 
         context.beginPath();
 
         context.beginPath();
−
if (ellipse_flag)       
+
        for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180)
−
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 x = Math.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 y = Math.sign(Math.sin(t)) * Math.pow(Math.abs(Math.sin(t)), 2/n);
 
      
 
      
 
             var X = X0 + x * sx;             
 
             var X = X0 + x * sx;             
Строка 116: Строка 109:
 
         }
 
         }
 
         context.stroke();
 
         context.stroke();
−
    }
 
−
   
 
−
// Сигнум числа
 
−
// Функция Math.sign пока не поддерживается Google Chrome
 
−
function Sign(x)
 
−
    {
 
−
        if (x > 0) return 1;
 
−
        if (x < 0) return -1;
 
−
        return 0;
 
 
     }
 
     }
 
}
 
}
−
</syntaxhighlight>
+
</source>
 
Файл '''"SEP.html"'''
 
Файл '''"SEP.html"'''
−
<syntaxhighlight lang="html5" line start="1" enclose="div">
+
<source lang="html" first-line="1">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Строка 138: Строка 122:
 
</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>
+
    <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'));</script>
  
−
<!--Чекбоксы-->
+
    <div>
−
<div>
+
         <font color="#000000" size="5"><B>—</B></font> Суперпарабола: <I>y = |x|<SUP>n</SUP></I><BR>
−
         <font color="#000000" size="5"><B>—</B></font>
+
         <font color="#ff0000" size="5"><B>—</B></font> Суперэллипс: <I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR>
−
<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.setSlider_01(this.value); document.getElementById('Text_01').value = this.value;">
+
         <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> =
 
         <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="
 
             // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
 
             // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
 
             if (!this.checkValidity()) return;
 
             if (!this.checkValidity()) return;
−
             app.setSlider_01(this.value);
+
             app.set_01(this.value);
 
             document.getElementById('Slider_01').value = this.value;
 
             document.getElementById('Slider_01').value = this.value;
 
         ">
 
         ">
 
     </div>
 
     </div>
 
     <br>
 
     <br>
−
+
   
−
<!--Запуск приложения-->   
+
     <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'),
−
     <script type="text/javascript">var app = new MainSEP(
+
            document.getElementById('Slider_01'), document.getElementById('Text_01'));</script>
−
document.getElementById('canvasGraph'),
+
 
−
        document.getElementById('Slider_01'),  
+
    <div style="clear:both;"></div>
−
document.getElementById('Text_01')
 
−
); </script>
 
 
</body>
 
</body>
 
</html>  
 
</html>  
−
</syntaxhighlight>
+
</source>
−
</div>
+
</toggledisplay>
−
</div>
 
  
  
Строка 194: Строка 169:
 
|<math>2</math> || окружность (эллипс)
 
|<math>2</math> || окружность (эллипс)
 
|-align="center"
 
|-align="center"
−
|<math>4</math> || квадрокруг ([http://en.wikipedia.org/wiki/Squircle squircle])
+
|<math>4</math> || сквиркл ([http://en.wikipedia.org/wiki/Squircle squircle])
 
|-align="center"
 
|-align="center"
 
|<math>\infty</math> || квадрат (прямоугольник)
 
|<math>\infty</math> || квадрат (прямоугольник)
Строка 203: Строка 178:
 
* [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://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)
 
* [http://en.wikipedia.org/w/index.php?title=Lp_space&action=edit L<sup>''p''</sup> space] (Wikipedia)
−
 
−
[[Category: Виртуальная лаборатория]]
 
−
[[Category: Программирование]]
 
−
[[Category: JavaScript]]
 
Вам запрещено изменять защиту статьи. Edit Создать редактором
Шаблоны быстрого доступа

Обратите внимание, что все добавления и изменения текста статьи рассматриваются как выпущенные на условиях лицензии Public Domain (см. Department of Theoretical and Applied Mechanics:Авторские права). Если вы не хотите, чтобы ваши тексты свободно распространялись и редактировались любым желающим, не помещайте их сюда.
Вы также подтверждаете, что являетесь автором вносимых дополнений или скопировали их из источника, допускающего свободное распространение и изменение своего содержимого.
НЕ РАЗМЕЩАЙТЕ БЕЗ РАЗРЕШЕНИЯ МАТЕРИАЛЫ, ОХРАНЯЕМЫЕ АВТОРСКИМ ПРАВОМ!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Отменить | Справка по редактированию  (в новом окне)
Источник — «http://tm.spbstu.ru/Суперэллипс_и_суперпарабола»