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

Вход на сайт

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

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

var ctx, canvas, h, w, x0, y0, k;
 
			function Line(x1, y1, x2, y2){ //прорисовка линии
 
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.closePath();
				ctx.stroke();
 
			}
 
			function horizontal(x, y){ //горизонтальные линии
 
				Line(x, y, x+k/4, y);
				Line(x+k/4, y+k/4, x+k/4+k/4, y+k/4);
				Line(x+k/4+k/4, y-k/4,x+k-k/4, y-k/4);
				Line(x+k-k/4, y, x+k, y);
				Line(x+k/4, y, x+k/4, y+k/4);
				Line(x+k/4+k/4, y+k/4, x+k/4+k/4, y-k/4);
				Line(x+k-k/4, y-k/4, x+k-k/4, y);
 
			}
 

Демо JavaScript: 

<!doctype html> 
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>Fire</title>
		<style type="text/css">
			body {
				background-color: #000000;
				margin: 0px;
			}
			canvas {
				width: 650px;
				height:650px;
				display: block;
			}
		</style>
	</head>
	<body>	
		<canvas id='fire' width='650' height='650'></canvas>
		<script type="text/javascript">
			// Параметры детализации
			var r = 8;

Демо JavaScript: 

			let ctx = document.getElementById('canv').getContext('2d');
			let dot_x, dot_y, sec_x1, sec_x2, sec_y1, sec_y2; // координаты точки и концов отрезка соответственно
			let x1, x2, x3, y1, y2, y3; // координаты векторов, построенных на сторонах треугольника
			let out; // расстояние между точкой и отрезком
			let hx, hy, ax, ay; // координаты тоски пересечения перпендикуляра с отрезком и 
			let cnt = 0; // флаг, считающий номер нажатия на канвас
 
			// функция обработки нажатия на канвас
			function storeGuess(event) {

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

Задача: для заданных n точек на плоскости найти пару точек, расположенных ближе друг к другу с помощью алгоритма "Разделяй и властвуй".

Демо JavaScript: 

<script>
		 var ctx=document.getElementById('paintbox').getContext('2d');
 
			function draw(x1 , y1 , x2 , y2 , dep){
				if(dep == 0){
					randomColor();//изменение цвета
					ctx.fillRect(x1 , y1 , 1 , 1);
					ctx.fillRect(x2 , y2 , 1 , 1);
					return;
				}
 
				var dx = (x2 - x1)/2;
				var dy = (y2 - y1)/2;
				                             //смещение по х и у
				var	x_tmp = x1 + dx - dy ;
				var y_tmp = y1 + dy + dx;
 
 
			draw(x1 , y1 , x_tmp , y_tmp , dep - 1);	
			draw(x2 , y2 , x_tmp , y_tmp , dep - 1);	
 
			}

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

	<canvas id="canvas" width="600" height="600"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var p0 = {  //координаты снежинки
			x: 20,
			y: 400
		},
		p1 = {
			x: 200,
			y: 20
		},
		p2 = {
			x: 400,
			y: 400
		};
 
		function drawLine(p0, p1) { 
			ctx.beginPath();
			ctx.moveTo(p0.x, p0.y);
			ctx.lineTo(p1.x, p1.y);
			ctx.stroke();
		}
		function drawKoch(p0, p1, limit) { //лимит -  глубина рекурсии
			var dx = p1.x - p0.x, 
				dy = p1.y - p0.y,

Демо JavaScript: 

var ctx, canvas, r, r1, r2, r3, color, color1, color2, color3;
 
			// Функция Анимации 
			window.requestAnimFrame = (function(){
				return  window.requestAnimationFrame       || 
						window.webkitRequestAnimationFrame || 
						window.mozRequestAnimationFrame    || 
						window.oRequestAnimationFrame      || 
						window.msRequestAnimationFrame
			})();
 
			// Функция запускающаяся автоматически после загрузки страницы
			window.onload = function(){
 
				canvas = document.getElementById('paint');
				ctx = canvas.getContext('2d');

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

Ширина линии
Расстояние между линиями

Задача — написать программу, которая будет строить изображение Канторова множества.
Для построения изображения ввести в поля "Ширина линии","Расстояние между линиями" нужные значения и нажать на кнопку отправить.

Демо JavaScript: 
Код программы:


index.html

<!doctype html>
<html lang = "en">
<head>
    <title> fractal </title>
    <meta charset = "utf-8">
    <script src = "js/script.js" defer></script>
</head>
 
<body>
<div id = "main" style = "position: absolute; top: 0; left: 0; ">
    <canvas id = "canvas" width = "500" height = "500" style = "background-color: black; "></canvas>
    <div id = "menu">
        <span>Choose lambda value</span>
        <label>
            <input id = "lambda" type = "number" size = "3" min = "1" max = "5000" value = "64">
        </label>
        <span>, choose color</span>
        <label>
            <select id = "color">
                <option value = "fixed"> Fixed color    </option>
                <option value = "random"> Random color   </option>
                <option value = "allRandom"> All random color </option>
                <option value = "gradient"> Gradient color </option>
            </select>
        </label>
        <span>, choose iteration counter</span>
        <label>
            <input id = "counter" type = "number" size = "4" min = "1" max = "5000" value = "150">
        </label>
        <span>, clockwise</span>
        <label>
            <input id = "clockwise" type = "checkbox" checked>
        </label>
        <button id = "start"> Select </button>
    </div>
</div>
</body>
</html>

Статья по теме: 
Демо JavaScript: 
Ваш браузер не поддерживает Canvas

zoom power

Построить фрактал Квазиклевер с возможностью увеличить масштаб изображения и обзора конкретных участков фрактала.
После загрузки страницы нужно сначала задать количество итераций(ползунок power), потом изменить приближение(ползунок zoom), затем можно кликать по отдельным пикселям конвы для того, чтобы центрировать на них камеру.

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

////2//
//1///3 - нумерация дочерних кругов
////4//
 
var ctx,m=6,z=1,nx=250,ny=250;
//ctx - конва, m - количество итераций, nx ny - координаты для центрирования по клику.