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

Вход на сайт

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

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

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

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

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

Рейтинг@Mail.ru Яндекс.Метрика

JavaScript

Демо JavaScript: 

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

// x = (1 + cos(t)) * cos(t)
// y = (1 + cos(t)) * sin(t)
// t принадлежит промежутку [0; 2п]
 
var t, x, y, nX, nY, oldX, oldqY;
let scl, DX, DY, Rotate;
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
 
// отрисовка графика
function Init() {
 
	scl = Number(document.getElementById('scale').value); // масштаб
	DX = Number(document.getElementById('shiftX').value); // сдвиг по х
	DY = Number(document.getElementById('shiftY').value); // сдвиг по у
	Rotate = Number(document.getElementById('rotate').value); // наклон

Демо JavaScript: 
Не поддерживается:С
СдвигX:
СдвигY:
СдвигZ:
ПоворотX:
ПоворотY:
ПоворотZ:
Наблюдатель:

<canvas width="500" height="500">Не поддерживается:С</canvas><br>
СдвигX: <input id="moveX" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoX"></b><br>
СдвигY: <input id="moveY" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoY"></b><br>
СдвигZ: <input id="moveZ" type="range" min="-50" max="50" value="10" step="0.01" oninput="update()"><b id="infoZ"></b><br>
ПоворотX: <input id="rotateX" type="range" min="-3.1415" max="3.1415" value="0" step = "0.0001" oninput="update()"><b id="infoRotateX"></b><br>

Статья по теме: 
Демо JavaScript: 

<canvas width="500" height="500"></canvas>

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.strokeStyle = "yellow";
 
 
class Vector{
	constructor(x, y){
		this.x = x || 0;
		this.y = y || 0;
	}
	add(vector){ //Сложить два вектора
		this.x += vector.x;
		this.y += vector.y;
	}
	getMagnitude(){ //Получить длину вектора
		return Math.sqrt(this.x * this.x + this.y * this.y);
	}
	getAngle(){ //Получить угол вектора
		return Math.atan2(this.y,this.x);
	}

Демо JavaScript: 

<script>
/*
Управление мышью:
 - удерживание ЛКМ + перемещение для перетаскивания
 - вращение колесика для масштабирования
 - удерживание ПКМ + вращение колесика для вращения
*/
// Инициализация переменных и добавление обработчика событий для события contextmenu, чтобы предотвратить появление контекстного меню по нажатию ПКМ
document.getElementById('viewport').addEventListener('contextmenu', mouseDown);
let scale = 50, angle = 1, startX, startY, xOffset = 0, yOffset = 0, xPos = 0, yPos = 0, dragging = false, rightMouseButtonPressed = false;

Демо 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/>

Статья по теме: 
Демо JavaScript: 
Размер:
Пушистость:
Количество:
Скорость:

<canvas width = "600" height = "600" style = "border: 1px solid white"></canvas>
<div class = "inputs">
	<b>Размер:</b><input onmouseup = "correct()" oninput = "chooseSize()" id = "size" step = "0.1" min = "1" max = "40" value = "3" type = "range"><br>
	<b>Пушистость:</b><input oninput = "chooseFurry()" id = "furry" min = "0" max = "40" value = "2" type = "range"><br>
	<b>Количество:</b><input oninput = "chooseCount()" id = "count" min = "0" max = "100" value = "20" type = "range"><br>

Скриншот к примеру
Среда программирования: 
Javascript
Статья по теме: 

Любые два многоугольника с одинаковой площадью равносоставлены. Это значит, что разрезав на части одни многоугольник, из этих частей можно составить другой.

Данный код представляет визуализацию теоремы Бояйи-Гервина, то есть получение из одного многоугольника другого. А именно: из четырёхугольника треугольник.

Скриншот к примеру
Среда программирования: 
Javascript

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

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

Скриншот к примеру
Среда программирования: 
JavaScript

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

1. Файл grapher.html содержит HTML скелет программы: подключение необходимых библиотек, создание canvas'а для рисования и элементов управления графиком.

<!DOCTYPE html5>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="grapher.css">
		<script type="text/javascript" src="lib/jquery.min.js"></script>
		<script type="text/javascript" src="lib/jcanvas.min.js"></script>

Скриншот к примеру
Среда программирования: 
Любая
Статья по теме: 

Для определённого количества точек, заданных своими координатами, построить кривую, называемую β-сплайном, которая является аппроксимацией неизвестной функции, содержащей исходные точки.