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

Вход на сайт

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

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

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

Men dating men savoir faire out of, connection, and the beauty of relationships in their own unique way. https://analxxx... In a life that embraces distinctiveness and inclusivity, same-sex relationships keep found their place. Men who ancient men...
Пиривет сайт с работой закладчиком Работа ежедневные выплаты Если у вас небольшой доход или его вообще нет, то стоит обратить внимание на возможность подработки курьером. Это простая и хорошо оплачиваемая работа.
Последнее из блога https://fkmed.r... Оплата и доставка Условия возврата Гарантия качества https://fkmed.r... Медицинская одежда в розницу https://fkmed.r... Красота и свобода выбора https://fkmed.r... Как купить медицинский костюм в сети магазинов
Фамилия автора Вичек -- венг. Vicsek Tamás. Висекк это двойная не правильная транскрипция с венгерского на английски и с английского на русский. Поправьте пожалуйста.
Men dating men experience love, consistency, and the dream of relationships in their own unmatched way. https://voyeurp... In a superb that embraces diversity and inclusivity, same-sex relationships suffer with develop their place. Men who obsolete...

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

Рейтинг@Mail.ru Яндекс.Метрика
Демо JavaScript: 

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>lab 5</title>
		<script src="script2.js"></script>
	</head>
	<body>
		<canvas id="paint" width="500" height="500"></canvas>
		<br/>
		<input type="button" value="Старт" onclick="Start()">
		<input type="button" value="Стоп" onclick="Stop()">	
	</body>
</html>
<style>
body {
    background-color: #FDEAA8;
  }
</style>

var ctx;
var idA;
var TracShapeX = [18, 52, 52, 63, 63, 83, 83, 138, 138, 153, 160, 153, 135, 112, 93, 89, 54, 56, 52, 41, 27, 16, 12, 16, 17]; //X координаты наружней границы трактора
var TracShapeY = [53, 53, 29, 29, 53, 53, 15, 7, 67, 78, 100, 122, 135, 135, 122, 108, 108,  113, 126, 134, 134, 126, 113, 100, 99]; //Y координаты наружней границы трактора
var TracX = [18, 52, 52, 63, 63, 83, 83, 138, 138, 17, 18, 89, 134, 134, 89, 89, 93, 130, 130, 93, 93, 83, 138, 138, 83, 54, 61, 61, 54, 54, 18, 25, 25, 17, 18, 27, 41, 52, 56, 52, 41, 27, 16, 12, 16, 27, 112, 134, 153, 160, 153, 135, 112, 93, 86, 93, 112, 32, 36, 40, 42, 40, 36, 32, 28, 26, 28, 32, 119, 127, 134, 136, 134, 127, 119, 113, 110, 113, 119]; //X координаты для отрисовки трактора
var TracY = [53, 53, 29, 29, 53, 53, 15, 15, 108, 108, 53, 23, 23, 108, 108, 23, 26, 26, 53, 53, 26, 15, 7, 15, 15, 31, 31, 53, 53, 31, 53, 63, 108, 108, 53, 92, 92, 100, 113, 126, 134, 134, 126, 113, 100, 92, 65, 65, 78, 100, 122, 135, 135, 122, 100, 78, 65, 105, 105, 108, 113, 117, 120, 120, 117, 113, 108, 105, 87, 87, 92, 100, 107, 112, 112, 107, 100, 92, 87]; //Y координаты для отрисовки трактора
var TractorX,TractorY,TractorDx; // X,Y координаты трактора в текущий момент, скорость трактора
var TruckShapeX = [16, 119, 119, 154, 170, 178, 184, 181, 163, 164, 161, 151, 140, 130, 126, 127, 63, 64, 61, 51, 39, 30, 26, 27, 16]; //X координаты наружней границы грузовика
var TruckShapeY = [11, 11, 20, 20, 54, 57, 83, 91, 91, 95, 106, 113, 113, 106, 95, 91, 91, 94, 106, 112, 112, 106, 94, 91, 91]; //Y координаты наружней границы грузовика
var TrucX = [16, 119, 119, 16, 16, 16, 119, 119, 16, 16, 119, 154, 170, 178, 184, 181, 119, 119, 127, 150, 160, 127, 127, 181, 184, 175, 175, 181, 140, 151, 161, 164, 161, 151, 140, 130, 126, 130, 140, 40, 51, 61, 64, 61, 51, 40, 30, 26, 30, 40, 143, 148, 153, 154, 153, 148, 143, 138, 136, 138, 143, 43, 48, 53, 54, 53, 48, 43, 38, 36, 38, 43]; //X координаты для отрисовки грузовика
var TrucY = [11, 11, 91, 91, 11, 75, 75, 91, 91, 75, 20, 20, 54, 57, 83, 91, 91, 20, 29, 29, 51, 51, 29, 68, 83, 79, 72, 68, 77, 77, 84, 95, 106, 113, 113, 106, 95, 84, 77, 77, 77, 84, 95, 106, 113, 113, 106, 95, 84, 77, 86, 86, 89, 95, 100, 103, 103, 100, 95, 89, 86, 86, 86, 89, 95, 100, 103, 103, 100, 95, 89, 86]; //Y координаты для отрисовки грузовика
var TruckX,TruckY,TruckDx; // X,Y координаты грузовика в текущий момент, скорость грузовика
var AirplaneShapeX = [11, 23, 39, 50, 65, 79, 74, 85, 98, 128, 153, 163, 163, 158, 128, 110, 68, 57, 51, 60, 50, 39, 28, 21, 15, 13, 17, 11]; //X координаты наружней границы самолета
var AirplaneShapeY = [28, 25, 25, 28, 49, 46, 33, 19, 10, 46, 54, 68, 79, 89, 102, 102, 102, 133, 123, 106, 98, 94, 85, 65, 66, 64, 56, 45, 35];  //Y координаты наружней границы самолета
var AirX = [79, 74, 85, 98, 128, 79, 11, 23, 39, 50, 65, 79, 128, 153, 163, 163, 158, 128, 79, 65, 50, 39, 11, 11, 17, 48, 43, 31, 21, 15, 13, 17, 79, 104, 133, 68, 57, 51, 79, 142, 153, 163, 163, 158, 140, 136, 135, 137, 142, 76, 82, 86, 88, 86, 82, 76, 71, 70, 71, 76, 98, 104, 108, 110, 108, 104, 98, 93, 92, 93, 98, 120, 126, 130, 132, 130, 126, 120, 115, 114, 115, 120]; //X координаты для отрисовки самолета
var AirY = [46, 33, 19, 10, 46, 46, 28, 25, 25, 28, 49, 46, 46, 54, 68, 79, 89, 102, 102, 99, 94, 85, 35, 28, 45, 45, 56, 64, 66, 64, 56, 45, 79, 84, 84, 133, 123, 106, 79, 51, 54, 68, 79, 89, 97, 84, 74, 61, 51, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56, 56, 56, 59, 64, 69, 73, 73, 69, 64, 59, 56]; //Y координаты для отрисовки самолета
var AirplaneX,AirplaneY,AirplaneDx; // X,Y координаты самолета в текущий момент, скорость самолета
var key; //Флаг идет анимация или нет
 
window.onload=function(){
	ctx = document.getElementById("paint").getContext('2d');
	ctx.strokeStyle = "black";
	TractorDx = 1; TruckDx = 3; AirplaneDx = 4; key = 1;
	Init();
 
	document.getElementById('paint').addEventListener('click', (e) => {
		if(key){
			if(inPoly(TracShapeX, TracShapeY, e.offsetX, e.offsetY, TractorX, TractorY) || inPoly(TruckShapeX, TruckShapeY, e.offsetX, e.offsetY, TruckX, TruckY) || inPoly(AirplaneShapeX, AirplaneShapeY, e.offsetX, e.offsetY, AirplaneX, AirplaneY)) // Проверка попадания в машину
			{
				key = 0;
				Stop();
				ctx.fillStyle="red";
				ctx.fillRect(e.offsetX - 3,e.offsetY - 3,6,6); //Рисуем красный квадрат, если точка попала в машину
			} else {
				key = 0;
				Stop();
				ctx.fillStyle="black";
				ctx.fillRect(e.offsetX - 3,e.offsetY - 3,6,6); //Рисуем черный квадрат, если точка не попала в машину
			}
		}else{
			key = 1;
			Start(); //Если анимация не воспроизводится, возпроизвести ее
		}
	});
}
 
function Init()
{
	ctx.fillStyle="#FDEAA8";
	ctx.fillRect(0,0,500,500); //Залить фон
 
	TractorX = 340; TractorY = 340; //Начальные координаты для трактора
	TruckX = 0; TruckY = 320; //Начальные координаты для грузовика
	AirplaneX = 100; AirplaneY = 50; //Начальные координаты для самолета
 
	Airplane(AirplaneX, AirplaneY); //Нарисовать самолет
	Tractor(TractorX,TractorY); //Нарисовать трактор
	Truck(TruckX,TruckY); //Нарисовать грузовик
}
 
function Tractor(srartX, srartY) //Размер 170*145
{
	let tmp = 0; //Счетчик для понимания какую из частей трактора мы рисуем
	let color = ["green","yellow","blue","red","blue","red","orange","orange","red","red"]; //Цвет для фигуры трактора, которую мы рисуем
	let oper = [10,4,4,3,4,4,10,10,10,10]; //Количество точек у конкретной фигуры
 
	for(let i = 0; i < 10; i++) //Последовательно рисуем части трактора
	{
		ctx.fillStyle = color[i];
		ctx.beginPath();
		ctx.moveTo(srartX + TracX[tmp], srartY + TracY[tmp++]);
		for(let j = 0; j < oper[i]; j++)
			ctx.lineTo(srartX + TracX[tmp], srartY + TracY[tmp++]);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}
}
 
function Truck(srartX, srartY) //Размер 200*120
{
	let tmp = 0;//Счетчик для понимания какую из частей грузовика мы рисуем
	let color = ["yellow","red","green","blue","yellow","orange","orange","red","red"];//Цвет для фигуры грузовика, которую мы рисуем
	let oper = [4,4,7,4,4,10,10,10,10]; //Количество точек у конкретной фигуры
 
	for(let i = 0; i < 9; i++) //Последовательно рисуем части грузовика
	{
		ctx.fillStyle = color[i];
		ctx.beginPath();
		ctx.moveTo(srartX + TrucX[tmp], srartY + TrucY[tmp++]);
		for(let j = 0; j < oper[i]; j++)
			ctx.lineTo(srartX + TrucX[tmp], srartY + TrucY[tmp++]);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}
}
 
function Airplane(srartX, srartY) //Размер 170*145
{
	let tmp = 0; //Счетчик для понимания какую из частей самолета мы рисуем
	let color = ["red","red","red","red","yellow","blue","blue","blue"]; //Цвет для фигуры самолета, которую мы рисуем
	let oper = [5,17,7,6,9,10,10,10]; //Количество точек у конкретной фигуры
 
	for(let i = 0; i < 8; i++) //Последовательно рисуем части самолета
	{
		ctx.fillStyle = color[i];
		ctx.beginPath();
		ctx.moveTo(srartX + AirX[tmp], srartY + AirY[tmp++]);
		for(let j = 0; j < oper[i]; j++)
			ctx.lineTo(srartX + AirX[tmp], srartY + AirY[tmp++]);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}
}
 
function inPoly(xp, yp, x, y, moveX, moveY) { //Проверка попадания точки в многоугольник, где xp - массив X координат фигуры, yp - массив Y координат фигуры, x - X координата мыши, y - Y координата мыши, moveX - на сколько перенесена фигура по X в данный момент, moveY - на сколько перенесена фигура по Y в данный момент
    npol = xp.length;
    let j = npol - 1;
    let c = 0;
    for (let i = 0; i < npol; i++) {
        if ((((moveY + yp[i] <= y) && (y < moveY + yp[j])) || ((moveY + yp[j] <= y) && (y < moveY + yp[i]))) &&
            (x > (moveX + xp[j] - moveX - xp[i]) * (y - moveY - yp[i]) / (moveY + yp[j] - moveY - yp[i]) + moveX + xp[i])) {
            c = !c
        }
        j = i;
    }
    return c;
}
 
 
function Draw() //Нарисовать машины
{
	ctx.fillStyle="#FDEAA8";
	ctx.fillRect(0,0,500,500); //Залить фон
 
	if(AirplaneX > 800) AirplaneX = -200;
	AirplaneX += AirplaneDx;
	Airplane(AirplaneX,AirplaneY); //Нарисовать самолет
 
	if(TruckX > 800) TruckX = -200;
	TruckX += TruckDx;
	Truck(TruckX,TruckY); //Нарисовать грузовик
 
	if(TractorX < -200) TractorX = 800;
	TractorX -= TractorDx;
	Tractor(TractorX,TractorY); //Нарисовать трактор
 
	idA = requestAnimationFrame(Draw); //Анимация
}
 
function Start()
{
	idA = requestAnimationFrame(Draw); //Начать анимацию
}
 
function Stop()
{
	cancelAnimationFrame(idA); //Остановить анимацию
}