Статья по теме:
Демо 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.gif | 1.9 Мб |
| kod_horizon.rar | 1.78 кб |
