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

Вход на сайт

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

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

		<script>
			var ctx, canvas;
			var xc1, xc2, xc3;
			var yc1, yc2, yc3;
			var iter;
 
			//анимирующая функция, реализуемая для всех браузеров
			window.requestAnimFrame = (function(){
			    return  window.requestAnimationFrame       || 
				    window.webkitRequestAnimationFrame || 
				    window.mozRequestAnimationFrame    || 
				    window.oRequestAnimationFrame      || 
				    window.msRequestAnimationFrame
			})();
 
			//функция, запускающаяся при загрузке станицы
			window.onload = function() {

Демо JavaScript: 

<canvas id="canv" width="500" height="500" style="border: 1px solid black"></canvas>
		<script>
			let ctx = document.getElementById('canv').getContext('2d');
 
			let tn = Math.tan(Math.PI / 3), // тангенс и косинус угла в 60 градусов
				cs = Math.cos(Math.PI / 3);
 
			let x = [], y = [], tmpx = [], tmpy = []; // массивы, в которых хранятся координаты точек пересечения внутренних линий со сторонами треугольника
 
			// трегольник

Демо JavaScript: 

<canvas id="canvas" width="500" height="500" style="border: 1px solid black" onclick="storeGuess(event)"></canvas>
		<script>
			let ctx = document.getElementById('canvas').getContext('2d');
			// отрисовка фона
			ctx.beginPath ();
			ctx.fillStyle = "blue";
			ctx.fillRect (0, 0, 500, 300);
			ctx.fillStyle = "green";
			ctx.fillRect (0, 300, 500, 500);
			ctx.stroke ();
 
			let score = 0; // переменная, хранящая кол-во попаданий в быка

Демо JavaScript: 

Построение функции, проходящей через заданные точки, с помощью полинома Ньютона. Функция строится при добавлении новой точки с помощью клика.

Демо JavaScript: 

При нажатии на кнопку "Нарисовать" строится функция, проходящая через точки, заданные кликом мыши.

Демо JavaScript: 
Поставьте 4 точки левой кнопкой мыши, чтобы определить отрезки

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Определение точки пересечения отрезков</title>
		<script src="main.js"></script>
	</head>
	 <body > 
		<canvas id="paint" width="503" height="503"></canvas>
	</body>
</html>

var ctx;
var idA;
var x,y;
let points1 = [];
var A,B,C;
var pointxx,pointyy;
 
window.onload=function(){ //по нажатию левой кнопки мыши ставятся точки
    document.getElementById('paint').addEventListener('click', (e) => {
		if(points1.length < 4) points1.push({x: e.offsetX, y: e.offsetY});
		Init();
	});

Демо JavaScript: 

<canvas id="canvas" width="500" height="500"></canvas>
 
	<!-- 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 float u_time;	//униформ переменная времени
 
 
							//функция генерации случайных чисел

Демо JavaScript: 

<html> 
 <head>
 <meta charset="utf-8">
</head>
<body>
  <canvas id='tutorial' width='500' height='500'></canvas>
  <script>
	var vertices = [];
	var vertices1 = [];
	var a = [];
 
	var context, imData, em;
 
	const Point3D = function (x, y, z) {
		this.x = x;
		this.y = y;
		this.z = z;
	};
 
	function Pixel(col) {
		imgData = em.createImageData(1, 1);
 
		imgData.data[0] = col.r;
		imgData.data[1] = col.g;
		imgData.data[2] = col.b;
		imgData.data[3] = col.a;
	}
 
 
	function Grafic() {
		// big pyramid

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

Введите количество разбиений [1; 6]


var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d"); var Point = function(x, y) // Конструктор для точки { this.x = x; this.y= y; } function drawLine(a, b) // Рисование линии { ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } function drawMCT(A, B, C, iter) // // нахождение центра масс треугольника, построение { if(iter == 0) return; // нахождения центра масс треугольника var v1 = { x: B.x - A.x, y: B.y - A.y }, v2 = { x: C.x - A.x, y: C.y - A.y }, D = { x: A.x + Math.floor((v1.x + v2.x) / 3), y: A.y + Math.floor((v1.y + v2.y) / 3) } // проводим линии к центру масс drawLine(A, D), drawLine(B, D), drawLine(C, D); // решаем для 3-х треугольников меньшего размера drawMCT(A, B, D, iter-1), drawMCT(B, C, D, iter-1), drawMCT(A, C, D, iter-1); } function drawTriangle(a, b, c) // построение главного треугольника { drawLine(a, b); drawLine(b, c); drawLine(c, a); } function draw() // главная функция { var imgData = ctx.createImageData(600, 600); ctx.beginPath(); ctx.putImageData(imgData, 0, 0); var a = new Point(100, 300); // вершины главного треугольника var b = new Point(250, 100); var c = new Point(400, 300); var iter = document.getElementById("iterationCnt").value; // количество разбиений drawTriangle(a, b, c); // строим главный треугольник drawMCT(a, b, c, Math.min(6, iter)); // решение ctx.closePath(); }

<canvas height="600" width='600' id='cnvs'></canvas><br />		 
		<p1> Введите количество разбиений [1; 6] </p1> <br /> <br />
		<input type="number" id="iterationCnt" min="1" max="6" value="1" />  
                <br /> <br />
		<input type="button" onclick="draw()" value="Старт">
</canvas>
 
<script>
var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d");
 
var Point = function(x, y) // Конструктор для точки
{
    this.x = x;
    this.y= y;
}
 
function drawLine(a, b) // Рисование линии
{
    ctx.moveTo(a.x, a.y);

Демо JavaScript: 

 var f=0; //переключатель состояний
  var a=150,b=150; // параметры сжатия по оси Х и У
  var c=100;       // координата У центра мячика, а координата Х не изменяется
  var ctx;         //наш конвас
  var ImgData      //тут храним слепок фона)для быстрой отрисовки.
 
  ctx = document.getElementById('paintbox').getContext('2d');
 
 function bg(){ //рисуем фон
	ctx.fillStyle="#008000";
	for(var i=0;i<500;i+=20){
	   for(var j=0;j<500;j+=20){
	       ctx.beginPath();
           ctx.fillRect(i,j,15,15);
           ctx.closePath();
           ctx.fill();