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

Вход на сайт

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

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

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

Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.

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

Рейтинг@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]


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); ctx.lineTo(b.x, b.y); ctx.stroke(); } function drawMCT(A, B, C, iter) // // нахождение центра масс треугольника, построение { if(iter == 0) return; // нахождения центра масс треугольника var v1 = { x: B.x - A.x, y: B.y - A.y }, v2 = { x: C.x - A.x, y: C.y - A.y }, D = { x: A.x + Math.floor((v1.x + v2.x) / 3), y: A.y + Math.floor((v1.y + v2.y) / 3) } // проводим линии к центру масс drawLine(A, D), drawLine(B, D), drawLine(C, D); // решаем для 3-х треугольников меньшего размера drawMCT(A, B, D, iter-1), drawMCT(B, C, D, iter-1), drawMCT(A, C, D, iter-1); } function drawTriangle(a, b, c) // построение главного треугольника { drawLine(a, b); drawLine(b, c); drawLine(c, a); } function draw() // главная функция { var imgData = ctx.createImageData(600, 600); ctx.beginPath(); ctx.putImageData(imgData, 0, 0); var a = new Point(100, 300); // вершины главного треугольника var b = new Point(250, 100); var c = new Point(400, 300); var iter = document.getElementById("iterationCnt").value; // количество разбиений drawTriangle(a, b, c); // строим главный треугольник drawMCT(a, b, c, Math.min(6, iter)); // решение ctx.closePath(); }

<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

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