JavaScript

Пример точки определения пересечения двух отрезков

2. Декабрь 2019 - 13:16 | Воротилова Валерия

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

Определение точки пересечения двух отрезков

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

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

Шум Перлина

1. Декабрь 2019 - 20:20 | Панюков Никита

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

Шум Перлина с использованием шейдеров

Демо 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;	//униформ переменная времени
 
 
							//функция генерации случайных чисел

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

Реализация алгоритма z-буфера. Пирамида перед пирамидой

29. Ноябрь 2019 - 21:02 | Мазинова Эльзара

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

Удаление невидимых граней. Алгоритм z-буфера

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

29. Ноябрь 2019 - 11:04 | Каялиев Аметхан

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

Центр масс треугольника

Демо JavaScript:

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

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

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

Мячик

22. Ноябрь 2019 - 16:16 | Троян Владислав

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

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

Триангуляция различных многоугольников

20. Ноябрь 2019 - 7:52 | Шумский Александр

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

Триангуляция многоугольника

Демо JavaScript:

<canvas id = "canvas" width = "500" height = "500"></canvas><br>
 
<div>
    <select id = "select">
        <option value = "0"> Heart 1 </option>
        <option value = "1"> Heart 2 </option>
        <option value = "2"> Star    </option>
        <option value = "3"> Square  </option>
        <option value = "4"> Arrow   </option>
    </select>
    <button onclick = "init()"> Select </button>
</div>
 
<script>
    /***** Canvas *****/
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");

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

Папоротник Барнсли

20. Ноябрь 2019 - 7:27 | Каялиев Аметхан

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

Папоротник Барнсли

Демо JavaScript:

<canvas height="1000" width='1000' id='cnvs'></canvas><br />
<input type="button" onclick="draw()" value="Пуск">
<script>
 
var ctx, imgData, canvas;
var color = {r: 54, g: 163, b: 116 , a: 255}; // цвет папоротника
 
canvas = document.getElementById("cnvs");
ctx = canvas.getContext("2d");
 
function setPixel (x,y,c) // устанавливает пиксель с координатой (x, y) с цветом c
{ 
    var index = 4*(x + canvas.width*y);
    imgData.data[index + 0]=c.r;
    imgData.data[index + 1]=c.g;
    imgData.data[index + 2]=c.b;
    imgData.data[index + 3]=c.a;

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

Проверка принадлежности точки многоугольнику

19. Ноябрь 2019 - 14:13 | Полонский Дмитрий

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

Проверка принадлежности точки многоугольнику. Метод трассировки лучом

Демо JavaScript:

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>lab 5</title>
		<script src="script2.js"></script>
	</head>
	<body>
		<canvas id="paint" width="500" height="500"></canvas>
		<br/>
		<input type="button" value="Старт" onclick="Start()">
		<input type="button" value="Стоп" onclick="Stop()">	
	</body>
</html>
<style>
body {
    background-color: #FDEAA8;
  }
</style>

var ctx;
var idA;

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

Трассировка лучом - Самолет Pepe

13. Ноябрь 2019 - 7:52 | Марков Николай

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

Проверка принадлежности точки многоугольнику. Метод трассировки лучом

Демо JavaScript:

Тест на попадание точки внутрь многоугольника. При нажатии на корпус самолета (серую часть) появляются pepe, летящие вниз.

  let offset = -100;
  let bgColor = '#14142d';
  let bombsFlag = false;
 
  window.addEventListener('load', start);
  document.getElementById('viewport').addEventListener('click', (e) => { // Обработка нажатий на canvas
    let pol = [ // Массив вершин многоугольника, внутрь которого может попасть точка, нужен для передачи в функцию проверки.
      {x: 305 - offset, y: 243},
      {x: 320 - offset, y: 235},

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

Интерактивный график функций на JavaScript

12. Ноябрь 2019 - 18:14 | Васильченко Анд...

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

Visual Studio Code

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

Операции преобразования на плоскости

Построение параметрического графика функций, на примере "Спирали", с возможностью поворота, масштабирования, сдвига графика или плоскости.

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

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

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

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

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

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

Пример точки определения пересечения двух отрезков

Шум Перлина

Реализация алгоритма z-буфера. Пирамида перед пирамидой

Пример нахождения центра масс треугольника на JavaScript

Мячик

Триангуляция различных многоугольников

Папоротник Барнсли

Проверка принадлежности точки многоугольнику

Трассировка лучом - Самолет Pepe

Интерактивный график функций на JavaScript