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

Вход на сайт

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

Построения
на плоскости (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: 

<canvas id="canv" width="500" height="500" ></canvas>
		<script>
			let ctx = document.getElementById('canv').getContext('2d');
			ctx.beginPath();
			ctx.fillStyle = "black";
			ctx.fillRect (0, 0, 500, 500);
			ctx.fill();
			ctx.stroke();
			// функция строящая квадрат по длине диагонали, углу между диагональю и положительным направлением оси х, центру квадрата
			function SQR (d, alpha, cx, cy) {
				// расчет координат вершин квадрата

Демо JavaScript: 

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var imageData; var xMouse = 0; var yMouse = 0; var stack = []; // Данная строчка необходима для правильной работы алгоритма // Смысл залючается в переносе начала координат на пол пикселя // Это необходимо для достижения четких границ линий // Без этого метода линии в канвасе не идеально черные, тк имеют сглаживание ctx.translate(0.5, 0.5); // Ставим пиксель, по умолчанию цвет черный function putPixel(x, y, c = {R: 0, G: 0, B: 0, A: 255}) { var index = (y * imageData.width + x) * 4; imageData.data[index + 0] = c.R; imageData.data[index + 1] = c.G; imageData.data[index + 2] = c.B; imageData.data[index + 3] = c.A; } // Узнать цвет пикселя function getPixel(x, y) { var index = (y * imageData.width + x) * 4; return { R: imageData.data[index + 0], G: imageData.data[index + 1], B: imageData.data[index + 2], A: imageData.data[index + 3] }; } // Получить (x,y) кордианты курсора, в момент нажатия function getCursorPosition(canvas, event) { const rect = canvas.getBoundingClientRect(); xMouse = (event.clientX - rect.left) | 0; yMouse = (event.clientY - rect.top) | 0; } // Функция поиска в ширину function clicked(stack, used) { // Блок try catch для избежания кликов вне замкнутых фигур while (stack.length != 0) { // Из стека достаем в обратном порядке var y = stack.pop(); var x = stack.pop(); if (used[x][y] != 1) { used[x][y] = 1; } else { continue; } // Красим пиксель putPixel(x, y); // Проверяем соседей текущего пикселя на цвет if (isBorderColor(x,y-1) || used[x][y - 1] == 1) { } else { stack.push(x); stack.push(y - 1); } if (isBorderColor(x,y+1) || used[x][y + 1] == 1) { } else { stack.push(x); stack.push(y + 1); } if (isBorderColor(x+1,y) || used[x + 1][y] == 1) { } else { stack.push(x + 1); stack.push(y); } if (isBorderColor(x-1,y) || used[x - 1][y] == 1) { } else { stack.push(x - 1); stack.push(y); } } // Обновляем данные ctx.putImageData(imageData, 0, 0); } // Проверка на наличие замкнутой границы фигуры function checkBorder(x, y) { for (let i = x; i <= canvas.width; i++) { if (isBorderColor(i,y)) { break; } if (i == canvas.width) { return false; } } for (let i = x; i >= 0; i--) { if (isBorderColor(i,y)) { break; } if (i == 0) { return false; } } for (let i = y; i >= 0; i--) { if (isBorderColor(x,i)) { break; } if (i == 0) { return false; } } for (let i = y; i <= canvas.height; i++) { if (isBorderColor(x,i)) { break; } if (i == canvas.height) { return false; } } return true; } // Проверка пикселя на совпадения цвета с цветом границы function isBorderColor(x,y){ if (getPixel(x, y).R == 0 && getPixel(x, y).G == 0 && getPixel(x, y).B == 0) { return true; } return false; } function start() { // Массив, необходимый для Поиска в ширину let used = new Array(canvas.width); for (let i = 0; i < canvas.width; i++) { used[i] = new Array(canvas.height).fill(0); } // Красим канвас ctx.fillStyle = "#ccc"; ctx.fillRect(0, 0, 600, 600); // Рисуем фигуры ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 50); ctx.lineTo(100, 100); ctx.lineTo(50, 50); ctx.strokeRect(350, 250, 50, 50); ctx.stroke(); imageData = ctx.getImageData(0, 0, 600, 600); // Клик мыши canvas.addEventListener('mousedown', function (e) { getCursorPosition(canvas, e) // Если замкнута, то закрашиваем if (checkBorder(xMouse, yMouse)) { stack.push(xMouse, yMouse); clicked(stack, used); } else { alert("Нет границ") } }) } start();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageData;
var xMouse = 0;
var yMouse = 0;
var stack = [];
 
// Данная строчка необходима для правильной работы алгоритма
// Смысл залючается в переносе начала координат на пол пикселя
// Это необходимо для достижения четких границ линий
// Без этого метода линии в канвасе не идеально черные, тк имеют сглаживание
ctx.translate(0.5, 0.5);
 
// Ставим пиксель, по умолчанию цвет черный
function putPixel(x, y, c = {R: 0, G: 0, B: 0, A: 255}) {

Демо JavaScript: 

 
       <!-- VERTEX SHADER -->
	<script type="shader" id="Vshader">
		attribute vec2 vertexPosition;		//атрибут вершин
 
		void main(){
			gl_Position = vec4(vertexPosition, 0.0, 1.0);	//строим вершинный шейдер
 
		}
 
	</script>
 
 
	<!-- FRAGMENT SHADER -->
	<script type="shader" id="Fshader"> 
 
	    precision mediump float;   //устанавливаем точность для чисел с плавающей точкой
 
 
	    uniform vec2 u_resolution; //униформы
	    uniform float u_time;
 
	    void main(){
		    vec2 st = gl_FragCoord.xy/u_resolution.xy;	//нормализуем область

Демо JavaScript: 

       <script>    
            var ctx=document.getElementById('io').getContext('2d');
            var LUCHI1X = [210, 237, 230, 190, 200, 221, 231, 243, 238, 326, 399, 345, 341, 379, 349, 320, 429, 325, 327, 379, 315, 332, 362, 325, 264, 257, 231, 200, 185, 183, 100, 30, 75, 47, 0, 41, 40, 25, 43, 80, 42, 107, 123, 132, 148];

Демо JavaScript: 
Задайте масштаб, учитывая, что размеры холста не превышают 800x800:

Начало первого отрезка:
Конец первого отрезка:

Начало второго отрезка:
Конец второго отрезка:

			var ctx, canvas, h, w, m, xs = [], ys = [], xt = [], yt = [], min = [], ans, xcen, ycen, k;
 
			window.onload = function(){
 
				canvas = document.getElementById("paint");
				w = canvas.width;
				h = canvas.height;
				ctx = canvas.getContext("2d");
				ctx.fillStyle = "white";
 
			};	
 
			function Init(){ // Инициализация переменных
 
				var xa, xb, ya, yb, xc, xd, yc, yd; // точки концов отрезков
 
				// массивы, содержащие информацию о точках и длинах всех рассматриваемых отрезков
				xs = []; 
				ys = []; 
				xt = [];

Демо JavaScript: 

Вращение:

<canvas width = "600" height = "600"></canvas><br>
<b>Вращение:</b>
<input type = "range" min = "-10" max = "10" step = "0.00001" value = "0" id = "degY" oninput = "update()"><br>

<script>
	//3. Пирамида перед кубом
	var canvas = document.querySelector("canvas");
	var ctx = canvas.getContext("2d");
	ctx.translate(canvas.width/2, canvas.height/2);
	class Vector2d{ 
		constructor(x, y){
			this.x = x;
			this.y = y;
		}
		move(mx, my){
			let x = this.x + mx;
			let y = this.y + my;
			return new Vector2d(x, y);
		}
		scale(w){

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

<canvas height="600" width='600' id='cnvs'></canvas><br />	
<script>	
var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d");
var ang90 = Math.PI / 2; // Угол поворота на 90 градусов
var ang45 = Math.PI / 4; // Угол поворота на 45 градусов
var ang30 = Math.PI / 6; // Угол поворота на 30 градусов
var animAngle = ang90;
var dDeg = 0.002;
 
function play()
{
    draw();
    update();
    requestAnimationFrame(play);
}
 
function update()
{
    animAngle -= dDeg;
    if(animAngle < -ang90)dDeg *= -1;

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

<canvas height="600" width='600' id='cnvs'></canvas><br />		 	
<input type="button" onclick="draw()" value="Start">
</canvas>
<script>		
var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d");
var ang90 = Math.PI / 2; // Угол поворота на 90 градусов
var ang45 = Math.PI / 4; // Угол поворота на 45 градусов
var ang30 = Math.PI / 6; // Угол поворота на 30 градусов
 
var Point = function(x, y) // Конструктор для точки
{
    this.x = x;
    this.y= y;
}
 
function drawLine(a, b) // Рисование линии
{ 
    ctx.moveTo(a.x, a.y);