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

  1 // Суперэллипс и суперпарабола
  2 // Superellipse & superparabola (SEP)
  3 // Разработчики А.М. Кривцов и Д.В. Цветков
  4 // 03.05.2014
  5 // 15.05.2014 коррекция для совместимости с Google Chrome
  6 // 06.11.2014 коррекция - удаление const (Цветков)
  7 // Интернет: tm.spbstu.ru/SEP
  8 
  9 function MainSEP(canvas, Slider_01, Text_01) {
 10 
 11     // Предварительные установки
 12 
 13     var context = canvas.getContext("2d");  // на context происходит рисование
 14 
 15     // Задаваемые параметры
 16    
 17 	var n = 2; 
 18     var fps = 50;                         // f	rames per second - число кадров в секунду (качество отображения)
 19 
 20     // Область построения графика
 21     var x_min = -2;  
 22     var x_max = -x_min;
 23     var y_min = x_min;    
 24     var y_max = -x_min;    
 25        
 26     // Настройка элементов управления
 27     Slider_01.min = 0.1;       	// лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер
 28     Slider_01.max = 10;
 29     Slider_01.step = 0.1;
 30     Slider_01.value = n;     	// значение ползунка должно задаваться после min, max и step
 31     Text_01.value = n;
 32 	var parabola_flag = true;
 33 	var ellipse_flag = true;
 34 
 35     // Функции, запускающиеся при изменении элементов управления
 36     this.setSlider_01 = function(input) { n = input; draw(); } 	// input - значение на слайдере
 37     this.setCheckbox_01 = function(bool) {parabola_flag = bool; draw(); }
 38 	this.setCheckbox_02 = function(bool) {ellipse_flag = bool; draw(); }	
 39     
 40    // Расчет параметров графики
 41     
 42     var N = canvas.width;                 	// число точек по оси x
 43     var dx = x_max / N;                   	// шаг по оси x
 44     var sx = canvas.width / (x_max - x_min);  // масштаб по оси x
 45     var sy = canvas.height / (y_max - y_min); // масштаб по оси y
 46     var X0 = canvas.width + x_min * sx;  		// положение 0 оси x в экранных координатах
 47     var Y0 = canvas.height + y_min * sy;  	// положение 0 оси y в экранных координатах
 48 
 49 	draw(); // Отображение
 50 
 51     function draw()
 52     {
 53 		context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
 54         
 55         // Горизонтальная ось
 56         context.strokeStyle = 'lightgrey';
 57         context.beginPath();
 58         context.moveTo(0, Y0);
 59         context.lineTo(canvas.width, Y0);
 60         context.moveTo(X0, 0);
 61         context.lineTo(X0, canvas.height);
 62         context.stroke();
 63 
 64         // Надписи
 65         context.fillStyle = 'black';
 66         context.font = "20px Times";
 67         context.fillText("0", X0 + 3, Y0 + 20);
 68         context.fillText("1", X0 + 1 * sx + 4, Y0 + 20);		
 69         context.fillText("1", X0 + 5, Y0 - 1 * sy - 4);		
 70         context.font = "italic 20px Times";
 71         context.fillText("x", canvas.width - 14, Y0 + 20);
 72         context.fillText("y", X0 + 7, 15);
 73 
 74         // График y = x^n
 75         context.strokeStyle = 'black';
 76         context.beginPath();
 77 		if (parabola_flag) 
 78 		for (var x = x_min; x < x_max; x += dx)
 79         {
 80             var y = Math.pow(Math.abs(x), n);
 81      
 82             var X = X0 + x * sx;             
 83             var Y = Y0 - y * sy; 
 84 
 85             if (x == x_min) context.moveTo(X, Y);
 86             else            context.lineTo(X, Y);
 87         }
 88         context.stroke();
 89 
 90         // График x^n + y^n = 1
 91         context.strokeStyle = 'red';
 92         context.beginPath();
 93 		if (ellipse_flag)        
 94 		for (var t = 0; t < 2 * Math.PI; t += Math.PI / 180)
 95         {
 96             var x = Sign(Math.cos(t)) * Math.pow(Math.abs(Math.cos(t)), 2/n);
 97             var y = Sign(Math.sin(t)) * Math.pow(Math.abs(Math.sin(t)), 2/n);
 98      
 99             var X = X0 + x * sx;             
100             var Y = Y0 - y * sy; 
101 
102             if (t == 0) context.moveTo(X, Y);
103             else        context.lineTo(X, Y);
104         }
105         context.stroke();
106     }
107     
108 	// Сигнум числа
109 	// Функция Math.sign пока не поддерживается Google Chrome
110 	function Sign(x)
111     {
112         if (x > 0) return 1;
113         if (x < 0) return -1;
114         return 0;
115     }
116 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Super Ellipse</title>
 6     <script src="SEP.js"></script>
 7 </head>
 8 <body>
 9 	<!--Графическое поле-->
10 	<canvas id="canvasGraph" width="600" height="600" style="border:1px solid #000000;"></canvas>
11 
12  	<!--Чекбоксы-->
13 	<div>
14         <font color="#000000" size="5"><B>—</B></font>
15 		<input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Суперпарабола: 
16 		<I>y = |x|<SUP>n</SUP></I>
17 	<BR>
18         <font color="#ff0000" size="5"><B>—</B></font>
19 		<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Суперэллипс: 
20 		<I>|x|<SUP>n</SUP> + |y|<SUP>n</SUP></I> = 1<BR>
21     </div>	
22     
23 	<!--Слайдер-->
24     <div>Степень:
25         <input type="range" id="Slider_01" style="width: 150px;" oninput="app.setSlider_01(this.value); document.getElementById('Text_01').value = this.value;">
26         <I>n</I> =
27         <input id="Text_01" style="width: 3ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
28             // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
29             if (!this.checkValidity()) return;
30             app.setSlider_01(this.value);
31             document.getElementById('Slider_01').value = this.value;
32         ">
33     </div>
34     <br>
35 	
36 	<!--Запуск приложения-->    
37     <script type="text/javascript">var app = new MainSEP(
38 		document.getElementById('canvasGraph'),
39         document.getElementById('Slider_01'), 
40 		document.getElementById('Text_01')	
41 	);	</script>
42 </body>
43 </html>