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

Вход на сайт

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

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

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

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

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

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

JavaScript

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

Скриншот к примеру
Среда программирования: 
Visual Studio Code

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

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

Проверяем принадлежность точки многоугольнику.
В роли точки выступают координаты мыши.
При нажатии ЛКМ по пустому месту на экране (канве) ничего не происходит.
При нажатии ЛКМ по многоугольнику производится обводка контуром данного многоугольник и пауза анимации.
При повторном нажатии на ЛКМ контур исчезает и анимация возобновляется.

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

<canvas id="cvs" width="175" height="175"></canvas>

// инициализация канваса
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
 
var x = 0;
var y = 300;
var tick_count = 0;
 
var flag = 0; // 0 - летит вверх
 
var sprite = new Image();
sprite.src = 'http://grafika.me/files/bird_sprite.png'; // наше изображение
 
 
// событие с функцией инициализации
sprite.onload = function() {
	tick();
	requestAnimationFrame(tick);
}
 
// функция для анимации циклических алгоритмов
function tick() {

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

// инициализация канваса
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
 
// координаты х, у и радиус
function hexagon(x, y, r) {
  ctx.save();
  ctx.translate(x, y);
  var angle = 0;
  // угол многоугольника — 60 градусов
  // рассчитывается по формуле п/3
  for(var i = 0; i < 6; i ++) {
    ctx.lineTo(Math.cos(angle) * r, Math.sin(angle) * r);
    angle += Math.PI / 3;
  }
  ctx.closePath();
  ctx.restore();
}
// устанавливаем радиус 50
var radius = 50;
// насколько далеко мы хотим разместить каждую строку

Демо JavaScript: 

ParD:
NumberOfIntervals:
Random X

var ctx = document.getElementById("paintbox").getContext('2d');
var x = [];
var y = [];
var x1=[];
var y1=[];
 
function Hermit(t){  //функция для построения многочлена
	var k;
	k=(t-x[0])/(x[1]-x[0]);
	return (1-3*k*k+2*k*k*k)*y[0]+(3*k*k-2*k*k*k)*y[1]+(x[1]-x[0])*((k-2*k*k+k*k*k)*y[2]+(-k*k+k*k*k)*y[3]);
}
 
function compareNumeric(a, b) {  //необходимо для сортировки
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}
 
function start()
{

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


Points
Line

<canvas id="canvas" width="1500" height="800"></canvas><br/>
<input type="checkbox" id="Points">Points<br />
<input type="checkbox" id="Line">Line<br />
<input type="button" onclick="update()" value="Update">
<script type="text/javascript">
var coords = [];
var k=0;
var plot = function(x, y, c) { // ”становить пиксель в т. (x, y) с прозрачностью c 
    if(isFinite(x) && isFinite(y)){
        var color = {
            r: plot.color.r,
            g: plot.color.g,
            b: plot.color.b,
            a: plot.color.a*c
        };
 

Демо JavaScript: 

масштаб
сдвиг по x
сдвиг по y
наклон

// x = (1 + cos(t)) * cos(t)
// y = (1 + cos(t)) * sin(t)
// t принадлежит промежутку [0; 2п]
 
var t, x, y, nX, nY, oldX, oldqY;
let scl, DX, DY, Rotate;
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
 
// отрисовка графика
function Init() {
 
	scl = Number(document.getElementById('scale').value); // масштаб
	DX = Number(document.getElementById('shiftX').value); // сдвиг по х
	DY = Number(document.getElementById('shiftY').value); // сдвиг по у
	Rotate = Number(document.getElementById('rotate').value); // наклон

Демо JavaScript: 
Не поддерживается:С
СдвигX:
СдвигY:
СдвигZ:
ПоворотX:
ПоворотY:
ПоворотZ:
Наблюдатель:

<canvas width="500" height="500">Не поддерживается:С</canvas><br>
СдвигX: <input id="moveX" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoX"></b><br>
СдвигY: <input id="moveY" type="range" min="-27" max="27" value="0" step="0.01" oninput="update()"><b id="infoY"></b><br>
СдвигZ: <input id="moveZ" type="range" min="-50" max="50" value="10" step="0.01" oninput="update()"><b id="infoZ"></b><br>
ПоворотX: <input id="rotateX" type="range" min="-3.1415" max="3.1415" value="0" step = "0.0001" oninput="update()"><b id="infoRotateX"></b><br>

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

<canvas width="500" height="500"></canvas>

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.strokeStyle = "yellow";
 
 
class Vector{
	constructor(x, y){
		this.x = x || 0;
		this.y = y || 0;
	}
	add(vector){ //Сложить два вектора
		this.x += vector.x;
		this.y += vector.y;
	}
	getMagnitude(){ //Получить длину вектора
		return Math.sqrt(this.x * this.x + this.y * this.y);
	}
	getAngle(){ //Получить угол вектора
		return Math.atan2(this.y,this.x);
	}