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

Вход на сайт

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

Построения
на плоскости (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: 


Сдвиг по x
Сдвиг по y
Поворот
Масштаб

Вращение графика функции sin(x)*sin(x)*cos(y) по оси X, с удалением невидимых точек.

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.</canvas>
 
 
<script>
	var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
 
        var p = {
            x: [],
            y: [],
            z: [],
        }
 
        var cnt = {
            x: [],
            y: [],
        }
 
        var itog = {
            x: [],
            y: [],
        }
 
        for(var i = 0; i <= 2*Math.PI; i+=0.1){
            p.x.push(i);
        }
        for(var i = 0; i <= 2*Math.PI; i+=0.1){
            p.y.push(i);
        }//Запоминаем координаты точек от 0 до 2х Пи с шагом 0.1
 
        var n = p.y.length;//количество этих точек
 
        for(var i = 0; i < p.x.length;i++){
            for(var j = 0; j < p.y.length;j++){
                p.z.push(p.x[i]);
                p.z.push(p.y[j]);
                p.z.push(Math.sin(p.x[i])*Math.sin(p.x[i])*Math.cos(p.y[j]));
            }
        }//добавляем в список точку(x,y), затем считаем результат функции и добавляем его в список(т.е. координату Z)
 
 	      var tmp=[];
        	for(var i=0; i< p.z.length;i++){
        		tmp[i]=p.z[i];
        }//запоминаем координаты до изменения
 
 
        function pos(){
        var dx, dy, scale;
        dx = Number(document.getElementById('distX').value); //Получение значения с ползунка "Сдвиг по X"
	      dy = Number(document.getElementById('distY').value); //Получение значения с ползунка "Сдвиг по Y"
	      scale = Number(document.getElementById('scale').value); //Получение значения с ползунка "Масштаб"
 
        ctx.fillStyle = 'white';
        ctx.fillRect(0,0,800,800);//Очистка экрана при изменении положения графика
 
          var k = 100; //задаем расстояние между точками графика и проектором  
 
 
        	var ug = Number(document.getElementById('rotate').value);//Получение значения с ползунка "Поворот"
        	ug = (Math.PI / 180) * ug; //Перевод градусов в радианы
 
 
        	for(var i=0; i< p.z.length;i++){
        	     p.z[i]=tmp[i];
        	}//при изменении положения, возвращаем первоначальные координаты
 
        	var j = 0;//указатель
        	for(var i = 0; i < p.z.length;i+=3){
        	   var x=p.z[i];
        	   var y=p.z[i+1]*Math.cos(ug)+p.z[i+2]*Math.sin(ug);
        	   var z=-(p.z[i+1]*Math.sin(ug))+p.z[i+2]*Math.cos(ug);//вычисляем координаты после поворота по оси X
      		   cnt.x[j]=(k*x/(z+k));
      		   cnt.y[j]=(k*y/(z+k));//проецируем точки в пространстве на плоскость и сохраняем в массив cnt
      		   j++;
          }
 
        var ex = [];//горизонт
 
        for(var i = 0; i < cnt.x.length;i++){
          cnt.x[i]*=scale;
          cnt.y[i]*=scale;
        }//увеличиваем масштаб
 
 
        var b = 0;//объявляем указатель
 
 
        for(var i = n-1; i >= 0; i--){
            for(var j = i ; j < cnt.x.length; j+=n){
              itog.x[b]=(cnt.x[j]);
              itog.y[b]=(cnt.y[j]);
              b++;
            }
        }//записываем точки в массив слева направо, снизу вверх
 
 
 
 
 
          ctx.fillStyle = 'black';
          for(var i = 0; i < itog.x.length; i++){
            ex[i]=itog.y[i];
          }//запоминаем первый горизонт
 
 
 
      	for(var i = 0; i < n; i++){
      			ex[i]=itog.y[i];
      			ctx.fillRect(itog.x[i]+dx,itog.y[i]+dy,2,2);
      		}//отображаем первый горизонт 
 
 
      		 for(var i = n; i < itog.y.length; i+=n){
      		 		for(var j = 0; j < n; j++){
 
      		 		if(ex[j]>itog.y[i+j]){//проверяем положение точки, если она находится ниже горизонта пропускаем
        				ctx.fillRect(itog.x[i+j]+dx,itog.y[i+j]+dy,2,2);//отображаем точки на экране
        				ex[j]=itog.y[i+j];//запоминаем измененный горизонт
        				}
        			}
        		}
        }
 
</script>
<br/>
<button onclick= "pos()">Запуск</button>
<br/>
<input type="range" id="distX" min="0" max="265" value="150" oninput = "pos()"> Сдвиг по x
<br/>
<input type="range" id="distY" min="70" max="270" value="200" oninput = "pos()"> Сдвиг по y
<br/>
<input type="range" id="rotate" min="0" max="90" value="0" oninput = "pos()"> Поворот
<br/>
<input type="range" id="scale" min="18" max="50" value="30" oninput = "pos()"> Масштаб
</body>
</html>

Прикрепленный файлРазмер
horizon_2.gif1.9 Мб
kod_horizon.rar1.78 кб