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

Вход на сайт

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

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

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

Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.

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

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

JavaScript

Статья по теме: 
Демо 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 - координаты для центрирования по клику.

Демо 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 = [];