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

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

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

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

У меня проблема вот с этим: gl.Clear(OpenGL.GL_COLOR_BUFFER_BIT | OpenGL.GL_DEPTH_BUFFER_BIT);. Вылезает ошибка: CS1061 "object" не содержит определения "GL_COLOR_BUFFER_BIT", и не удалось найти доступный метод расширения "GL_COLOR_BUFFER_BIT",...
Большое спасибо. Единственный код который прошел без каких либо ошибок. Ура!!!
Скажите пожалуйста, подскажите алгоритм по которому по заданным точкам можно определить тип многогранника, скажем это куб или прямоугольный параллелепипед. Нашел теорию по этим фигурам: https://www.mat... https://www.mat... Акцентировать внимание...
Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё

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

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

JavaScript

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

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

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

Введите количество разбиений [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);

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

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

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

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

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

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