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

Вход на сайт

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

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

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

Здравствуйте. Спасибо за полезную инфу про уравнения а не матрицы. Во всём интернете только матрицы. Чем плохи матрицы? Решать матричные уравнения, получая обратную матрицу - слишком долгое занятие, к тому же не видно упрощений и сокращений...
Рекурсия присутствует?
И где эти прикрепленные файлы?
Я код на C++ набрал сам. Строил кривую Безье, но "прилипал" к нулю. То есть я задаю точки далеко от нуля, а он строил из нуля, а потом только обходил предложенные точки. Потом я нашёл Ваш сайт и эту статью. Оказалось, что я забыл возвести t в...
просто я не так понял, здесь мы вращаем точки куба что вращает сам куб. Мне нужно вращать просто 3д объект , данный способ не подходит

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

Рейтинг@Mail.ru Яндекс.Метрика
Скриншот к примеру
Среда программирования: 
Javascript

Данная программа реализует такие операции преобразования фигуры на плоскости как: параллельный перенос, поворот, масштабирование. Дополнительно реализована смена цвета фигуры на случайный.

Файл Demo.html содержит как визуальную часть, так и всё логику программы

Код программы: 

<html>
 <head>
  <title>Demo</title>
  <meta charset="utf-8">
  <style>
	#instructions 
	{
		position: absolute;
		top: 90px;
		left: 850px;
		font-family: sans-serif;
		font-size: 20pt;
		color: #000;
	}
  </style>
 </head>
 <body>
 
	<div id = "instructions">
		<p>W - движение вверх</p>
		<p>S - движение вниз</p>
		<p>A - движение влево</p>
		<p>D - движение вправо</p>
		<p>P - увеличение радиуса</p>
		<p>O - уменьшение радиуса</p>
		<p>R - поворот направо</p>
		<p>L - поворот налево</p>
		<p>C - изменение цвета</p>
	</div>
 
	<canvas id="image" width="1500" height="1500"></canvas>
 
	<script>
		//Создание canvas'a для рисования
		var drawingCanvas = document.getElementById('image');
		var a = drawingCanvas.getContext('2d');
 
		//Создание области рисования
		function box()
		{
			//Создание фона области рисования
			a.lineWidth = 3;
			a.strokeStyle = "black";
			a.fillStyle = "white";
			a.fillRect(40, 40, 735, 615);
			a.strokeRect(40, 40, 735, 615);
 
			//Создание координатной сетки
			for(var i = 100; i < 750; i+=50)
			{
				for(var j = 50; j < 640; j+=10)
				{
					a.strokeStyle = "dimgrey";
					a.beginPath();
					a.moveTo(i, j);
					a.lineTo(i, j+5);
					a.closePath();
					a.stroke();
				}
			}
			for(var i = 95; i < 620; i+=50)
			{
				for(var j = 50; j < 760; j+=10)
				{
					a.strokeStyle = "dimgrey";
					a.beginPath();
					a.moveTo(j, i);
					a.lineTo(j+5, i);
					a.closePath();
					a.stroke();
				}
			}
 
			//Ось ординат
			a.strokeStyle = "black";
			a.beginPath();
			a.moveTo(400, 50);
			a.lineTo(400, 645);
			a.closePath();
			a.stroke();
			a.fillStyle = "black";
			a.beginPath();
			a.moveTo(400, 45);
			a.lineTo(410, 60);
			a.lineTo(390, 60);
			a.closePath();
			a.fill();
 
			//Ось абсцисс
			a.beginPath();
			a.moveTo(50, 345);
			a.lineTo(765, 345);
			a.closePath();
			a.stroke();	
			a.fillStyle = "black";
			a.beginPath();
			a.moveTo(770, 345);
			a.lineTo(755, 355);
			a.lineTo(755, 335);
			a.closePath();
			a.fill();
		}
 
		//Проверка: не выходит ли фигура за границы поля для рисования
		function border_check(X0, Y0, R, x, y)
		{
			var cnt = 0;
			if(y0+Y0-y*(r+R) >= br_top && y0+Y0+y*(r+R) <= br_bottom) 	//По вертикали
			{
				y0+=Y0;
				cnt+=1;
			}
			if(x0+X0-x*(r+R) >= br_left && x0+X0+x*(r+R) <= br_right) 	//По горизонтали
			{
				x0+=X0;
				cnt+=1;
			}
			if(cnt==2 && r+R != 0) r+=R;								//По радиусу
		}
 
		//Перевод десятичного числа в шестнадцатеричное
		function decToHex(n){ return Number(n).toString(16); }
 
		//Генерация случайного числа
		function randomNumber(max)
		{
			return Math.floor(Math.random() * (max + 1));
		}
 
		//Генерация случайного цвета
		function randomColor() 
		{
			var r, g, b;
			r = decToHex(randomNumber(254));
			g = decToHex(randomNumber(254));
			b = decToHex(randomNumber(254));
			a.strokeStyle = "#" + r + g + b;
		}
 
		//Пересчёт координаты x при повороте
		function rotate_X(x, y, a)
		{
			return x*Math.cos(a) - y*Math.sin(a);
		}
 
		//Пересчёт координаты y при повороте
		function rotate_Y(x, y, a)
		{
			return x*Math.sin(a) + y*Math.cos(a);
		}
 
 
		//Построение фигуры
		function figure(X0, Y0, R, Angle, color)
		{
			box();												//Отрисовка поля для рисования
 
			a.strokeStyle = "red";								//Базовый цвет
			if(color == 1)										//Установка случайного цвета
			{
				randomColor();
				color = 0;
			}
 
			a.lineWidth = 2;
 
			//Начальные значения x и y для определения границ
			x = (1 + 1/6.2);
			y = (1 - Math.sin(3.1 * Math.PI)/6.2);	
 
			//Проверка границ
			border_check(X0, Y0, R, x, y);
 
			//Пересчёт координат для поворота фигуры
			angle+=Angle;
			tmp = x;
			y = 0;
			x = rotate_X(x, y, angle);
			y = rotate_Y(tmp, y, angle);
 
			//Отрисовка заданной фигуры
			a.beginPath();			
			a.moveTo(x0+x*r, y0+y*r);
			for(var t = 0; t < 10*Math.PI; t+=0.1)
			{
				x = (Math.cos(t) + Math.cos(6.2*t)/6.2);
				y = (Math.sin(t) - Math.sin(6.2*t)/6.2);
				tmp = x;
				x = rotate_X(x, y, angle);
				y = rotate_Y(tmp, y, angle);
				a.lineTo(x0+x*r, y0+y*r);	
			}
			a.closePath();
			a.stroke();
		}
 
		//Начальные значения угла, координат центра, радиуса
		var angle = 0, x0 = 400, y0 = 345, r = 100;
		//Границы поля для рисования
		var br_top = 67, br_bottom = 628, br_left = 47, br_right = 756;
 
		box();
		figure(0, 0, 0, 0, 0);
 
		//Управление рисованием с помощью клавиатуры
		document.addEventListener("keydown", function(event) {
			if(event.keyCode == 87) figure(0, -5, 0, 0, 0);			//W
 
			if(event.keyCode == 83) figure(0, 5, 0, 0, 0);			//S
 
			if(event.keyCode == 65) figure(-5, 0, 0, 0, 0);			//A
 
			if(event.keyCode == 68) figure(5, 0, 0, 0, 0);			//D
 
			if(event.keyCode == 82) figure(0, 0, 0, Math.PI/4, 0);	//R
 
			if(event.keyCode == 76) figure(0, 0, 0, -Math.PI/4, 0);	//L
 
			if(event.keyCode == 80) figure(0, 0, 10, 0, 0);			//P
 
			if(event.keyCode == 79) figure(0, 0, -10, 0, 0);		//O
 
			if(event.keyCode == 67) figure(0, 0, 0, 0, 1);			//C
		});
 
	</script>
 </body>
 
</html>

Прикрепленный файлРазмер
Ivancha_Demo.zip2.12 кб