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

Вход на сайт

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

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

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

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

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

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

JavaScript

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

var canvas, ctx, h, w, n, x0, y0, it, len, s, s1, s2, arr = [];
 
			window.onload = function(){ // начальная функция
 
				canvas = document.getElementById("paint");
				ctx = canvas.getContext("2d");
				h = canvas.height;
				w = canvas.width;
				alert("Введите кол-во итераций в пределах от 10 до 23.")
				len = 1;
				x0 = 0;
				y0 = h;
 
			}
 
			function Click(){
				var str = document.getElementById("txt").value; // считываем кол-во итераций с текстового поля
				it = Number(str);
				s; 
				s1 = "1";
            			s2 = "0";

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

<script>
			var canvas, ctx, h, w, n, x = [], y = [], coords = [];
 
			window.onload = function(){ // начальная функция
 
				canvas = document.getElementById("paint");
				ctx = canvas.getContext("2d");
				h = canvas.height;
				w = canvas.width;
				alert("Введите координаты через запятую и пробел  (Например: 0, 0, 0, 100, 100, 100, 100, 0 ).")
 
			}
 
			function Click(){
				var str = document.getElementById("txt").value; // считываем координаты с текстового поля
 
				coords = str.split(", ");
				n = coords.length;
				x = [];

Демо JavaScript: 

var angle;
var check;
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame
})();
window.onload =function(){//начальная отрисовка
	var ctx = document.getElementById("paint").getContext("2d");
	angle=0;
	check=0;
	ctx.translate(250,250);
	ctx.beginPath();
	ctx.fillStyle="blue";
	//левый верхний круг

Демо JavaScript: 

 
		<canvas width = "500" height = "500" id = "paint"></canvas>
		<script>
		var x1,y1;
var x2,y2;
var check;
var check2;
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame
})();
window.onload =function(){
	x1=0;
	y1=0;
	x2=0;
	y2=0;
	check=0
	check2=0;
	Animation();
}
function Animation(){

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

//длина и ширина сanvas

<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<input type = "text" id = "text" value = "1" size = "3"></input>
 
		<input type = "button" value = "Draw" onclick = "Click()"></input> 
		</br>
 
		<canvas id = "paint" width = "400" height = "400"> //длина и ширина сanvas
		<script>
			var ctx, canvas, h, w;
 
			var LastX, LastY;
 
			function Drawing(dx, dy)//функция отрисовки линии
			{
				ctx.beginPath();
				ctx.moveTo(LastX, LastY);
				ctx.lineTo(LastX + dx, LastY + dy);
				ctx.closePath();

Демо JavaScript: 

Для интерполяции заданной функции необходимо выбрать узлы, через которые будет проходить многочлен Нютона. Необходимо выбрать минимум 3 точки, нажав на левую кнопку мыши (не обязательно нажимать на сам график функции), и нажать кнопку "Старт".

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageData;
let x = new Array(canvas.width);
let fx = new Array(canvas.height);
// Массив, через точки которого будет построен ногочлен Ньютона
let xMouse = [];
// Сдвиг координат
let offset = 300;

Статья по теме: 
Демо JavaScript: 
fractal
index.html

<!doctype html>
<html lang = "en">
	<head>
		<title> fractal </title>
        <meta charset = "utf-8">
        <script src = "script.js" defer></script>
	</head>
 
	<body>
		<div id = "main">
			<canvas id = "canvas" width = "500" height = "500"></canvas>
			<div id = "menu">
				<span> length </span>
				<label>
					<input id = "length" type = "number" size = "3" min = "1" max = "5000" value = "10">
				</label>
				<span> factor </span>
				<label>
					<input id = "factor" type = "number" size = "3" min = "1" max = "5000" value = "10">
				</label>
				<span> power </span>
				<label>
					<input id = "power" type = "number" size = "3" min = "1" max = "5000" value = "2">
				</label>
				<span> step</span>
				<label>
					<input id = "step" type = "number" size = "3" min = "1" max = "5000" value = "1">
				</label>
				<button id = "start"> Select </button>
			</div>
		</div>
	</body> 
</html>

Статья по теме: 
Демо 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) {