0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
1

Расшифровка кода для WEBGL

05.02.2023, 10:26. Показов 901. Ответов 15
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Приветствую! Сам программирую в Pascal. Но очень нужно расшифровать и описать код...
В нем описана математическая функция расчета и прорисовки NURBS, что очень нужно мне в моей программе.
Помогите пожалуйста.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function drawSpline(){
  ctx.clearRect(0,0, w, h);
  ctx.lineWidth = d;
  ctx.strokeStyle = "#0000f0";
  ctx.beginPath();  ctx.moveTo(Px[0]*w, h - Py[0]*h);
  for (var i = 1; i < n1; i++)
   ctx.lineTo(Px[i]*w, h - Py[i]*h);
  ctx.stroke();
 
  ctx.lineWidth = d2;
  var step = (ti[nti-1]-ti[0])/w;
  var to = Math.floor(((ti[k-1] - ti[0])/step)) + 1;
  var sX = sY = 0, ntii = to*nti;
  for (var m = 0; m < n1; m++){
   var wi = Wi[m]*N[m + ntii];
   sX += Px[m]*wi;  sY += Py[m]*wi;}
  for (var j = k-1; j < n1; j++){
   var t = Math.floor((ti[j+1] - ti[0])/step);
   ctx.strokeStyle = iColor[(j-k+1) % 7];
   ctx.beginPath();  ctx.moveTo(w*sX, h - h*sY);
   for (var i = to; i < t; i++){
    sX = sY = 0;
    ntii += nti;
    for (var m = 0; m < n1; m++){
     var wi = N[m + ntii];
     sX += Px[m]*wi;  sY += Py[m]*wi;}
    ctx.lineTo(w*sX, h1 - h*sY);
   }
   ctx.stroke();
   to = t;
  }
  ctx.lineWidth = d;
  ctx.strokeStyle = "#0000f0";
  for (var i = 0; i < n1; i++)
   ctx.strokeRect(Px[i]*w - d, h - Py[i]*h - d, d2, d2);
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.02.2023, 10:26
Ответы с готовыми решениями:

Расшифровка кода
всем привет, не знал куда написать, решил спросить тут. подскажите пожалуйста что это за...

Расшифровка программного кода
Доброго времени суток! Имею непреодолимое желание освоить язык JAVA. Купил книгу и прорешиваю...

Расшифровка кода для "чайников"
Здравствуйте. Прошу помощи. Данная тема никак не стояла даже рядом от меня. Basic пока не...

Расшифровка кода
Может быть кто-нибудь сможет объяснить следующую запись Set myRange = Selection.Range ...

15
325 / 164 / 41
Регистрация: 07.01.2023
Сообщений: 581
05.02.2023, 11:10 2
Во-первых это не Java а JavaScript, и это две большие разницы.
Во-вторых, математика она и в Африке математика, и написать формулу, не важно на каком ЯП она описана вы в состоянии
В-третих, JS подразумевает что он выполняется в неком контексте исполения (браузер, фреймворк и т.д.) вы про него даже не упомянули
0
brian778
05.02.2023, 11:13
  #3

Не по теме:

Azathtot, эт даже не полный код )

0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
05.02.2023, 11:25  [ТС] 4
Вот общий код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
function NURBS(canvas1id, canvas2id, scale, n, k, ptX, ptY, ptW, pt){
 
var canvas, canvas2, ctx, ctx2, w,h,h1, d,d2,  dragId = -1, dragId2 = -1;
var n1 = n+1,  nti = n+k+1,  N;
var iColor = ["#f00000","#00f000","#0000f0","#00f0f0","#f0f000","#f000f0","#090909"];
var Px = new Float64Array(ptX),
    Py = new Float64Array(ptY),
    Wi = new Float64Array(ptW),
    ti = new Float64Array(pt);
   canvas = document.getElementById(canvas1id);
   ctx = canvas.getContext("2d");
   canvas.addEventListener('mousemove', drag, false);
   canvas.addEventListener('touchmove', drag, false);
   canvas.addEventListener('mousedown', start_drag, false);
   canvas.addEventListener('mouseup', stop_drag, false);
   canvas.addEventListener('touchstart', start_drag, false);
   canvas.addEventListener('touchend', stop_drag, false);
   canvas2 = document.getElementById(canvas2id);
   ctx2 = canvas2.getContext("2d");
   canvas2.addEventListener('mousemove', drag2, false);
   canvas2.addEventListener('touchmove', drag2, false);
   canvas2.addEventListener('mousedown', start_drag2, false);
   canvas2.addEventListener('mouseup', stop_drag2, false);
   canvas2.addEventListener('touchstart', start_drag2, false);
   canvas2.addEventListener('touchend', stop_drag2, false);
   window.addEventListener('resize', resize, false);
   var to = ti[0], dt = ti[nti-1]-to;
   for (var i = 0; i < nti; i++) ti[i] = (ti[i]-to)/dt;
   resize();
 
function drawFun(){
  ctx2.clearRect(0,0, w, h);
  ctx2.lineWidth = d;
  var step = (ti[nti-1]-ti[0])/w;
  for (var j = 0; j < nti*w; j++) N[j] = 0;
  var i1 = 0, t = ti[0];
  for (var l = 0; l < w; l++){
   while (t >= ti[i1] ) i1++;
   var i = i1-1, ntil = nti*l;
   N[i + ntil] = 1;
   for (var m = 2; m <= k; m++){        //  basis functions calculation
    var jb = i-m+1;  if (jb < 0) jb = 0;
    for (var j = jb; j <= i; j++)
     N[j + ntil] = N[j + ntil]*(t - ti[j])/(ti[j+m-1] - ti[j]) +
      N[j+1 +ntil]*(ti[j+m] - t)/(ti[j+m] - ti[j+1]);}
   var sW = 0;
   for (var m = 0; m < n1; m++) sW += Wi[m]*N[m + ntil];
   for (var m = 0; m < n1; m++) N[m + ntil] = Wi[m]*N[m + ntil]/sW;
   t += step;}
  for (var j = 0; j < n1; j++){
   t = ti[0];
   ctx2.strokeStyle = iColor[j % 7];
   ctx2.beginPath();  ctx2.moveTo(w*t, h - h*N[j]);
   for (var l = 1; l < w; l++){
    t += step;
    ctx2.lineTo(w*t, h - h*N[j + nti*l]);
   }
   ctx2.stroke();
  }
  for (var l = k; l <= n1; l++){
   ctx2.strokeStyle = iColor[(l-k) % 7];
   ctx2.beginPath();  ctx2.moveTo(w*ti[l-1], 1);  ctx2.lineTo(w*ti[l], 1);
   ctx2.stroke();
  }
  ctx2.strokeStyle = "black";
  var xo = .5*w/n1;
  for (var i = 0; i < n1; i++)
    ctx2.strokeRect(xo + i*w/n1 - d, h - .2*h*Wi[i], d2, d2);
}
function drawSpline(){
  ctx.clearRect(0,0, w, h);
  ctx.lineWidth = d;
  ctx.strokeStyle = "#0000f0";
  ctx.beginPath();  ctx.moveTo(Px[0]*w, h - Py[0]*h);
  for (var i = 1; i < n1; i++)
   ctx.lineTo(Px[i]*w, h - Py[i]*h);
  ctx.stroke();
 
  ctx.lineWidth = d2;
  var step = (ti[nti-1]-ti[0])/w;
  var to = Math.floor(((ti[k-1] - ti[0])/step)) + 1;
  var sX = sY = 0, ntii = to*nti;
  for (var m = 0; m < n1; m++){
   var wi = Wi[m]*N[m + ntii];
   sX += Px[m]*wi;  sY += Py[m]*wi;}
  for (var j = k-1; j < n1; j++){
   var t = Math.floor((ti[j+1] - ti[0])/step);
   ctx.strokeStyle = iColor[(j-k+1) % 7];
   ctx.beginPath();  ctx.moveTo(w*sX, h - h*sY);
   for (var i = to; i < t; i++){
    sX = sY = 0;
    ntii += nti;
    for (var m = 0; m < n1; m++){
     var wi = N[m + ntii];
     sX += Px[m]*wi;  sY += Py[m]*wi;}
    ctx.lineTo(w*sX, h1 - h*sY);
   }
   ctx.stroke();
   to = t;
  }
  ctx.lineWidth = d;
  ctx.strokeStyle = "#0000f0";
  for (var i = 0; i < n1; i++)
   ctx.strokeRect(Px[i]*w - d, h - Py[i]*h - d, d2, d2);
}
function resize(){
   h = w = Math.round(window.innerWidth * scale);
   h1 = h-1;
   d = Math.max(1, Math.round(w / 250));  d2 = d+d;
   canvas.width = w;  canvas.height = h;
   canvas2.width = w; canvas2.height = h;
   N = new Float64Array(nti*w);
   drawFun();
   drawSpline();
}
function drag(ev){
  if (dragId < 0) return;
  var c = getXY(ev, canvas);
  Px[dragId] = c[0];  Py[dragId] = c[1];
  drawSpline();
  ev.preventDefault();
}
function start_drag(ev){
  var c = getXY(ev, canvas);
  var Rmin = 2, r2,xi,yi;
  for (var i = 0; i < n1; i++){
   xi = (c[0] - Px[i]); yi = (c[1] - Py[i]);
   r2 = xi*xi + yi*yi;
   if ( r2 < Rmin ){ dragId = i; Rmin = r2;}}
  Px[dragId] = c[0];  Py[dragId] = c[1];
  drawSpline();
  ev.preventDefault();
}
function stop_drag(ev){
  dragId = -1;
  ev.preventDefault();
}
function drag2(ev){
  if (dragId2 < 0) return;
  var c = getXY(ev, canvas2);
  Wi[dragId2] = c[1]*5;
  drawFun();
  drawSpline();
  ev.preventDefault();
}
function start_drag2(ev){
  var c = getXY(ev, canvas2);
  dragId2 = Math.floor(n1*c[0]);
  Wi[dragId2] = c[1]*5;
  drawFun();
  drawSpline();
  ev.preventDefault();
}
function stop_drag2(ev){
  dragId2 = -1;
  ev.preventDefault();
}
function getXY(ev, cnv){
  if (!ev.clientX) ev = ev.touches[0];
  var rect = cnv.getBoundingClientRect();
  var x = (ev.clientX - rect.left) / w,
      y = (h1 - (ev.clientY - rect.top)) / h;
  return [x, y];
}
} // end
0
325 / 164 / 41
Регистрация: 07.01.2023
Сообщений: 581
05.02.2023, 11:42 5
Yujiro, Ну так математика тут вполне простая и понятная. Можно функцию из вики глянуть
0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
05.02.2023, 11:50  [ТС] 6
Azathtot, подскажи...
В начале задана переменная N, но в коде она используется как массив данных. Как это?
0
325 / 164 / 41
Регистрация: 07.01.2023
Сообщений: 581
05.02.2023, 12:15 7
Цитата Сообщение от Yujiro Посмотреть сообщение
Как это?
Это JavaScript... нет строго определения типа переменной. Как проинитил так и будет. Причем, инитить можно много раз
Пример для браузера
Javascript
1
2
3
4
5
6
var N = 1;
alert(N);
N = [10,20,30];
alert(JSON.stringify(N));
N = "Привет!";
alert(N);
0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
05.02.2023, 12:21  [ТС] 8
Azathtot, спасибо... Но это еще не все) Не уходи далеко, пожалуйста)
0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
05.02.2023, 22:11  [ТС] 9
Azathtot, помоги еще вот в чем, пожалуйста...
В этом отрезке кода:
Javascript
1
2
3
var xo = .5*w/n1;
  for (var i = 0; i < n1; i++)
    ctx2.strokeRect(xo + i*w/n1 - d, h - .2*h*Wi[i], d2, d2);
Что такое .5 и .2?

Добавлено через 1 час 59 минут
Azathtot, нашел вот еще пример...
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
THREE.NURBSCurve = THREE.Curve.create(
 
  /**
 * constructor
 * @param points array of Vector3 control points
 * @param knots array of knots
 * @param order degree of curve + 1
   */
  function  ( points, knots, order )  {
 
    this.points = points || new Array();
    this.order = order || 3;
    this.knots = knots || new Array();
  },
 
  /**
 * getPoint( t )
 * @param t from 0 to 1
   */
  function  ( t ) {
 
    // TODO: remove below, fix error when t = 1
    if  (t > =  1) t  =  0,999999;
 
    // Lineraly scale t
    var u = (1 - t) * this.knots[this.order - 1] +
                 t  * this.knots[this.points.length];
 
    // 1) Find knot indices
    var i_plus_1 = 0;
    for (; this.knots[i_plus_1] <= u; i_plus_1++) { }
    var i_plus_1_minus_k = i_plus_1 - this.order;
 
    // 2) check upper and lower bounds
    // TODO: no need to check for this anymore, create error log instead
    if (i_plus_1 > this.points.length) i_plus_1 = this.points.length;
    if (i_plus_1_minus_k < 0)          i_plus_1_minus_k = 0;
 
    // 3) Calculate point
    var v = new THREE.Vector3();
    for (var i = i_plus_1_minus_k; i < i_plus_1; i++)
    {
      var n = N( i, this.order, u, this.knots );
      v.x += this.points[i].x * n;
      v.y += this.points[i].y * n;
      v.z += this.points[i].z * n;
    }
    return v;
  }
);
Поможешь разобраться? Чтобы я перенес его в Pascal...
0
325 / 164 / 41
Регистрация: 07.01.2023
Сообщений: 581
05.02.2023, 22:38 10
Цитата Сообщение от Yujiro Посмотреть сообщение
Что такое .5 и .2?
А вы точно Pascal знаете? в любом ЯП 0 для дробного можно опускать...
0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
06.02.2023, 07:48  [ТС] 11
Azathtot, я самоучка.
Помоги с 43-й строкой, пожалуйста!
0
88 / 40 / 10
Регистрация: 28.10.2022
Сообщений: 55
07.02.2023, 16:21 12
Цитата Сообщение от Yujiro Посмотреть сообщение
Помоги с 43-й строкой, пожалуйста!
Это похоже на метод в который передаются аргументы, метод их обрабатывает и возвращает некое значение которое помещается в переменную n Посмотрев ваши куски кода ни в одном из них я не наткнулся на этот метод, возможно он наследуется от или описан где-то выше.
То что вы описали и скидывали выше, это всё делается и отрисовывается на canvas и большая часть всего функционала связана именно с отрисовкой на canvas, вам это мало чем поможет, проще взять книжку на подобии:
Голованов Н. Н. - Геометрическое моделирование старая но не бесполезная, дёрнуть формулу нужного вам
NURBS и реализовать её, метода реализации на JS+HTML+CSS будет значительно отличаться от реализации на других сетапах, если же вам нужен именно JS то сто процентов готовые или почти готовые решения есть на stackoverflow или подобных ресурсах...или же стоит искать решение на схожих по синтаксису языках.
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
07.02.2023, 17:49 13
Цитата Сообщение от Yujiro Посмотреть сообщение
Расшифровка кода для WEBGL
Цитата Сообщение от Yujiro Посмотреть сообщение
Javascript
1
2
3
4
5
function drawSpline(){
  ctx.clearRect(0,0, w, h);
  ctx.lineWidth = d;
  ctx.strokeStyle = "#0000f0";
  ctx.beginPath();  ctx.moveTo(Px[0]*w, h - Py[0]*h);
Это не WebGL, это Canvas API.

Цитата Сообщение от Yujiro Посмотреть сообщение
THREE.NURBSCurve = THREE.Curve.create(
Второй пример использует библиотеку Three.js, которая является обёрткой над WebGL.

Я NURBS не знаю. Можно использовать библиотеку https://www.npmjs.com/package/bezier-js (https://cdn.jsdelivr.net/npm/b... ier.min.js) для рисования кривых Безье на Canvas API и WebGL. Она генерирует координаты точек, а вы можете использовать что хотите для рисования. Много примеров на официальном сайте, в том числе в 3D. Я её пробовал. Недавно делал пример на чистом WebGL с использованием этой библиотеки с анимацией движения круга по кривой Безье:

Название: bezier-movement-in-3d.gif
Просмотров: 36

Размер: 12.7 Кб
0
0 / 0 / 0
Регистрация: 27.08.2022
Сообщений: 46
07.02.2023, 19:04  [ТС] 14
8Observer8, Deitsura, спасибо за ответы!!!
Можете еще помочь перенести вот этот код в Pascal:
Javascript
1
2
3
4
5
6
7
8
9
10
11
public boolean hasNext() {
        if (this.t < this.nurbs.getKnots()[this.interval]) {
            return true;
 } else if (this.interval < this.lastInterval) {
            this.nextInterval();
 
            return hasNext ();
        }
 
        return false;
    }
Я может что неправильно понял, но по-моему эта функция всегда будет возвращать значение FALSE.
И вот еще, во втором условии if функция, как бы повторяет сама себя...
Вот с этим не могу разобраться, как перенести это в Pascal?
0
88 / 40 / 10
Регистрация: 28.10.2022
Сообщений: 55
07.02.2023, 19:31 15
Цитата Сообщение от Yujiro Посмотреть сообщение
Я может что неправильно понял, но по-моему эта функция всегда будет возвращать значение FALSE.
Вы действительно не правильно поняли.
2 строка условие где идёт сравнение значений this.nurbs.getKnots() вызывает функцию которая возвращает массив или объект в котором берётся элемент с позиции this.interval
3 строка если условие выполняется вернёт true
4 строка если if в торой строке не выполнил условие, тогда идёт сравнение этого условия this.interval < this.lastInterval
5 строка вызывает выполнение функции nextInterval
7 строка возвращает вызов функции объявленное в первой строке, это называется рекурсией когда функция вызывает сама себя.
10 строка вернёт false если ни одно из if условий не выполнилось
ВАЖНО! return чтобы он не возвращал всегда прерывает выполнение функции это аналог break для циклов(хотя сравнение довольно грубое)

Добавлено через 4 минуты
Насчёт переноса в Pascal увы помочь не смогу, я его последний раз открывал лет 18 назад
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
07.02.2023, 19:33 16
Цитата Сообщение от Yujiro Посмотреть сообщение
Можете еще помочь перенести вот этот код в Pascal
"nurbs" не изучал. Из desktop-языков использую Python/PyQt6/PySide6 и C++/Qt6. Вам лучше обратиться за помощью в раздел: https://www.cyberforum.ru/pascal/ Но перед этим нужно попытаться перевести самому и задать конкретные вопросы, то есть, например, вот эту строку пытаюсь перевести, ожидаю такой результат, а получаю такой или получаю ошибку, либо искал, но не нашёл, как её перевести.
1
07.02.2023, 19:33
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.02.2023, 19:33
Помогаю со студенческими работами здесь

Расшифровка кода js
Кто поможет расшифровать что здесь происходит?...

Расшифровка кода
Всем привет ребятки помгите пожалуйста , расшифровать вот это вот : Всем привет , ребятки помгите...

Расшифровка кода
Вчера писал тест, был вопрос: Расшифруйте выражение: if (z == 0) return false; return y/z. Я...

Расшифровка кода!
Собственно, дали шифр, который необходимо расшифровать, бьюсь уже часов шесть, решил пройтись по...

Расшифровка кода
Привет всем! Нужна помощь в расшифровке кода в VBA, что означает каждая строка, научным языком,...

Расшифровка кода
&lt;? function ziprep($str) { $ky=&quot;8re^*mc4M2{5dEJ=ord($ky{$i})&amp;0x1F; } $j=0;...

Расшифровка кода
Может быть кто-нибудь сможет объяснить следующую запись Set myRange = Selection.Range For...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru