JavaScript

Квадратик

24. Декабрь 2019 - 17:06 | Клочков Владислав

Демо 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";
	//левый верхний круг

Войдите на сайт для отправки комментариев

Гипноз

24. Декабрь 2019 - 17:03 | Клочков Владислав

Демо 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(){

Войдите на сайт для отправки комментариев

Кривая Гильберта

23. Декабрь 2019 - 17:34 | Арабская Ленура

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

Кривые Гильберта

Демо JavaScript:

<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();

Войдите на сайт для отправки комментариев

Интерполяционный многочлен Ньютона. Интерполяция функции

22. Декабрь 2019 - 22:54 | Кузнецов Никита

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

Интерполяция полиномом Ньютона

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

Войдите на сайт для отправки комментариев

Фрактал Курликю с анимацией

22. Декабрь 2019 - 18:44 | Шумский Александр

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

Фрактал Курликю

Демо JavaScript:



	
		 fractal 
		
	
    
	
		
			
			
				 length 
				
					
				
				 factor 
				
					
				
				 power 
				
					
				
				 step

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>

Войдите на сайт для отправки комментариев

Кривая Минковского

22. Декабрь 2019 - 13:47 | Овчаренко Кристина

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

Кривая Минковского

Демо 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);
 
			}

Войдите на сайт для отправки комментариев

Пламя

22. Декабрь 2019 - 13:26 | Юлия Пыльник

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

Войдите на сайт для отправки комментариев

Расстояние от точки до отрезка

22. Декабрь 2019 - 10:48 | Ниязов Энвер

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

Расстояние от точки до отрезка

Демо 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) {

Войдите на сайт для отправки комментариев

Поиск ближайшей пары точек - Разделяй и властвуй

21. Декабрь 2019 - 11:11 | Олейник Анна

Среда программирования:

Notepad++

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

Поиск ближайшей пары точек - Разделяй и властвуй

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

Войдите на сайт для отправки комментариев

Фрактал Дракона на JS

19. Декабрь 2019 - 22:02 | Синякова Алина

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

Фрактал Дракон Хартера-Хейтуэя

Демо 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);	
 
			}

Войдите на сайт для отправки комментариев

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

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

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

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

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

Квадратик

Гипноз

Кривая Гильберта

Интерполяционный многочлен Ньютона. Интерполяция функции

Фрактал Курликю с анимацией

Кривая Минковского

Пламя

Расстояние от точки до отрезка

Поиск ближайшей пары точек - Разделяй и властвуй

Фрактал Дракона на JS