Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.
Спасибо за статью. Я не Ваш студент. Но мне она помогла написать функцию для Канторова множества на Python для черепашки: import turtle def kanter(x, y, d):     if d > 1:         turtle...
Как реализовать в данном примере границы расчёта?

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Подробное описание лестницы на металлокаркасе у нас.
Демо JavaScript: 

Масштаб
Сдвиг по x
Сдвиг по y
Наклон

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>lab 2</title>
		<script src="script.js"></script>
	</head>
	<body onload="Init()">
		<canvas id="paint" width="503" height="503"></canvas>
		<br/>
		<input type="range" id="scale" min="1" max="15" value="8" oninput = "Init()"> Масштаб
		<br/>
		<input type="range" id="distX" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по x
		<br/>
		<input type="range" id="distY" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по y
		<br/>
		<input type="range" id="rotate" min="0" max="360" value="0" oninput = "Init()"> Наклон
		<br/>
		<input type="button" value="Выровнять" onclick="Start()">	
	</body>
</html>

var ctx;
var t;
var x,y,nX,nY,oldX,oldY;
let scl, DX, DY, Rotate;
 
function Init() //Функция отрисовки графика при изменении входных данных
{
	ctx = document.getElementById("paint").getContext('2d');
	scl = Number(document.getElementById('scale').value); //Получение значения с ползунка "Масштаб"
	DX = Number(document.getElementById('distX').value); //Получение значения с ползунка "Сдвиг по X"
	DY = Number(document.getElementById('distY').value); //Получение значения с ползунка "Сдвиг по Y"
	Rotate = Number(document.getElementById('rotate').value); //Получение значения  ползунка "Наклон"
	Rotate = (Math.PI / 180) * Rotate; //Перевод градусов в радианы
 
	ctx.fillStyle = 'white'; //Выбор цвета заливки области
	ctx.fillRect(0,0,503,503); //Заливка всей области canvas
 
	nX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2)) * scl; //Получение X координаты, для начальной точки графика
	nY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2)) * scl; //Получение Y координаты, для начальной точки графика
	oldX = nX * Math.cos(Rotate) - nY * Math.sin(Rotate); //Вычисление координаты X с учетом поворота 
	oldY = nX * Math.sin(Rotate) + nY * Math.cos(Rotate); //Вычисление координаты Y с учетом поворота 
 
	for(t = 0; t < 10 * Math.PI; t += 0.01){ //Отрисовка графика
		nX = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2)) * scl; //Вычисление текущей X координаты, для графика
		nY = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2)) * scl; //Вычисление текущей Y координаты, для графика
		x = nX * Math.cos(Rotate) - nY * Math.sin(Rotate); //Вычисление координаты X с учетом поворота 
		y = nX * Math.sin(Rotate) + nY * Math.cos(Rotate); //Вычисление координаты Y с учетом поворота 
 
		ctx.beginPath();
		ctx.moveTo(oldX + DX, oldY + DY); //Указываем на начало прямой
		ctx.lineTo(x + DX, y + DY);  //Указываем на конец прямой с ее отрисовкой
		ctx.stroke();
 
		oldX = x; oldY = y; //Сохраняем значения X,Y для следующей итерации
	}
}
 
function Start() //Функция выравнивания графика
{
	var tmpX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2));  //Получение X координаты, для начальной точки графика
	var minX = tmpX, maxX = tmpX; //Заполняем переменные для нахождения минимума и максимума по X
	var tmpY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2));  //Получение Y координаты, для начальной точки графика
	var minY = tmpY, maxY = tmpY; //Заполняем переменные для нахождения минимума и максимума по Y
 
	for(t = 0; t < 10 * Math.PI; t += 0.01){ //Поиск минимума и максимума по координатам
		y = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2));  //Вычисление текущей X координаты,
		x = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2));  //Вычисление текущей Y координаты
 
		if(x > maxX) {maxX = x;} if(x < minX) {minX = x;} //Если текущий X больше или меньше максимума и минимума соответственно, то сохраняем его
		if(y > maxY) {maxY = y;} if(y < minY) {minY = y;} //Если текущий Y больше или меньше максимума и минимума соответственно, то сохраняем его
	}
	tmpX = 503 / (maxX - minX); //Вычисляет коэффициент для координаты X, чтобы он поместился в размер экрана
	tmpY = 503 / (maxY - minY);  //Вычисляет коэффициент для координаты Y, чтобы он поместился в размер экрана
	if(tmpX < tmpY) {scl = tmpX;} 
        else {scl = tmpY;} //Выбираем минимальный из коэффициентов 
	DX = 250; DY = 250; Rotate = 0; //Ставим все переменные в стандартные значения
 
	document.getElementById("scale").value = scl; //Передаем новое значение для ползунка "Масштаб"
	document.getElementById("distX").value = DX; //Передаем новое значение для ползунка "Перемещение по X"
	document.getElementById("distY").value = DY; //Передаем новое значение для ползунка "Перемещение по Y"
	document.getElementById("rotate").value = Rotate; //Передаем новое значение для ползунка "Наклон"
 
	ctx.fillStyle = 'white'; //Выбор цвета заливки области
	ctx.fillRect(0,0,503,503); //Заливка всей области canvas
 
	oldX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2)) * scl; //Получение X координаты, для начальной точки графика
	oldY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2)) * scl; //Получение Y координаты, для начальной точки графика
 
	for(t = 0; t < 10 * Math.PI; t += 0.01){ //Отрисовка графика
		x = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2)) * scl;  //Вычисление текущей X координаты, для графика
		y = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2)) * scl;  //Вычисление текущей Y координаты, для графика
 
		ctx.beginPath();
		ctx.moveTo(oldX + DX, oldY + DY); //Указываем на начало прямой
		ctx.lineTo(x + DX, y + DY); //Указываем на конец прямой с ее отрисовкой
		ctx.stroke();
 
		oldX = x; oldY = y;  //Сохраняем значения X,Y для следующей итерации
	}
}