Как изменить данную фигуру на пирамиду?

118
07 января 2022, 03:50

Помогите, срочно нужно найти решение

'use strict'; 
Math.TAU = Math.PI * 2; 
 
Math.RAD = Math.PI / 180; 
 
Math.DEG = 180 / Math.PI; 
 
Math.PHI = 0.5 + 0.5 * Math.sqrt(5); 
 
Math.random = (function(x) { 
  return function() { 
    x ^= x << 13; 
    x ^= x >>> 17; 
    x ^= x << 5; 
    return 1 - (x >>> 0) / 0xFFFFFFFF; 
  }; 
})(1); 
 
window.addEventListener('load', function() { 
 
 
  var _, buffer, canvas, colors, context, data, j, k, l, model, mvp, palette, points, projection, render, v, view, 
    x, y, z, zero, θ, ρ, φ; 
  canvas = document.getElementById('canvas'); 
  context = canvas.getContext('2d'); 
  // document.body.appendChild(canvas); 
  buffer = mat4.create(); 
  model = mat4.create(); 
  view = mat4.create(); 
  projection = mat4.create(); 
  mvp = mat4.create(); 
  points = []; 
  colors = []; 
  palette = [ 
    [1.00, 1.00, 1.00, 0.30], 
    [0.25, 0.50, 1.00, 0.75] 
  ].map(vec4.clone); 
 
 
  for (_ = j = 0; j < 25000; _ = ++j) { 
    ρ = 3 / 5; 
    θ = Math.acos(Math.random() * 2 - 1); 
    φ = Math.random() * Math.PI * 2; 
    x = ρ * Math.sin(θ) * Math.cos(φ); 
    y = ρ * Math.sin(θ) * Math.sin(φ); 
    z = ρ * Math.cos(θ); 
    points.push(v = vec4.fromValues(x, y, z, 1)); 
    colors.push(palette[0]); 
  } 
  for (_ = k = 0; k < 25000; _ = ++k) { 
    x = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
    y = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
    z = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
    points.push(v = vec4.fromValues(x, y, z, 1)); 
    colors.push(palette[1]); 
  } 
  for (_ = l = 0; l < 50000; _ = ++l) { 
    x = Math.random() * 2 - 1; 
    y = Math.random() * 2 - 1; 
    z = Math.random() * 2 - 1; 
    points.push(v = vec4.fromValues(x, y, z, 1)); 
    colors.push(palette[ρ < vec3.len(v) ? 1 : 0]); 
  } 
  data = null; 
  zero = null; 
  return (render = function() { 
    var H, T, W, a, b, g, i, len, m, n, point, r, ref, ref1, w; 
    requestAnimationFrame(render); 
    T = 1e-3 * Date.now(); 
    W = canvas.clientWidth; 
    H = canvas.clientHeight; 
    if (W !== canvas.width || H !== canvas.height) { 
      canvas.width = W; 
      canvas.height = H; 
      data = context.createImageData(W, H); 
      zero = context.createImageData(W, H); 
 
 
      for (i = m = 3, ref = zero.data.length; m < ref; i = m += 4) { 
        zero.data[i] = 0xFF; 
      } 
      data.data.set(zero.data); 
    } 
    mat4.identity(model); 
    mat4.rotateX(model, model, T / 5); 
    mat4.rotateY(model, model, T / 6); 
    mat4.rotateZ(model, model, T / 7); 
    mat4.lookAt(view, [0, 0, 5], [0, 0, 0], [0, 1, 0]); 
    mat4.perspective(projection, 30 * Math.RAD, W / H, 1e-3, 1e3); 
    [model, view, projection].reduce(function(a, b) { 
      return mat4.mul(mvp, b, a); 
    }); 
    for (i = n = 0, len = points.length; n < len; i = ++n) { 
      point = points[i]; 
      vec4.transformMat4(buffer, point, mvp); 
      vec3.scale(buffer, buffer, 1 / buffer[3]); 
      x = buffer[0], y = buffer[1], z = buffer[2], w = buffer[3]; 
      if ((-1 < z && z < 1) && (-1 < y && y < 1) && (-1 < x && x < 1)) { 
        ref1 = colors[i], r = ref1[0], g = ref1[1], b = ref1[2], a = ref1[3]; 
        x = (1 + x) * 0.5 * W | 0; 
        y = (1 - y) * 0.5 * H | 0; 
        i = x + y * W << 2; 
        a = a * H / w; 
        data.data[i++] += r * a; 
        data.data[i++] += g * a; 
        data.data[i++] += b * a; 
      } 
    } 
 
    context.putImageData(data, 0, 0); 
    return data.data.set(zero.data); 
 
  })(); 
 
});
html { 
  display: table; 
  width: 100%; 
  height: 100%; 
} 
 
body { 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  background: #1A1D3E; 
} 
 
canvas { 
  display: block; 
  margin: auto; 
  width: 100%; 
  height: 720px; 
  background: #1A1D3E; 
}
<canvas id="canvas"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js"></script>

Answer 1

Если отталкиваться от куба - необходимо добавить зависимости x и z от y, я сделал так

y = Math.abs(y)*2; 
x *= y*0.4;
z *= y*0.4;
y -= 1;

'use strict'; 
Math.TAU = Math.PI * 2; 
 
Math.RAD = Math.PI / 180; 
 
Math.DEG = 180 / Math.PI; 
 
Math.PHI = 0.5 + 0.5 * Math.sqrt(5); 
 
Math.random = (function(x) { 
  return function() { 
    x ^= x << 13; 
    x ^= x >>> 17; 
    x ^= x << 5; 
    return 1 - (x >>> 0) / 0xFFFFFFFF; 
  }; 
})(1); 
 
window.addEventListener('load', function() { 
 
 
  var _, buffer, canvas, colors, context, data, j, k, l, model, mvp, palette, points, projection, render, v, view, 
    x, y, z, zero, θ, ρ, φ; 
  canvas = document.getElementById('canvas'); 
  context = canvas.getContext('2d'); 
  // document.body.appendChild(canvas); 
  buffer = mat4.create(); 
  model = mat4.create(); 
  view = mat4.create(); 
  projection = mat4.create(); 
  mvp = mat4.create(); 
  points = []; 
  colors = []; 
  palette = [ 
    [1.00, 1.00, 1.00, 0.30], 
    [0.25, 0.50, 1.00, 0.75] 
  ].map(vec4.clone); 
 
  for (_ = k = 0; k < 125000; _ = ++k) { 
    y = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
    z = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
    x = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
     
    y = Math.abs(y)*2;  
    x *= y*0.4; 
    z *= y*0.4; 
    y -= 1; 
     
    points.push(v = vec4.fromValues(x, y, z, 1)); 
    colors.push(palette[1]); 
  } 
 
  data = null; 
  zero = null; 
  return (render = function() { 
    var H, T, W, a, b, g, i, len, m, n, point, r, ref, ref1, w; 
    requestAnimationFrame(render); 
    T = 1e-3 * Date.now(); 
    W = canvas.clientWidth; 
    H = canvas.clientHeight; 
    if (W !== canvas.width || H !== canvas.height) { 
      canvas.width = W; 
      canvas.height = H; 
      data = context.createImageData(W, H); 
      zero = context.createImageData(W, H); 
 
 
      for (i = m = 3, ref = zero.data.length; m < ref; i = m += 4) { 
        zero.data[i] = 0xFF; 
      } 
      data.data.set(zero.data); 
    } 
    mat4.identity(model); 
    mat4.rotateX(model, model, T / 5); 
    mat4.rotateY(model, model, T / 6); 
    mat4.rotateZ(model, model, T / 7); 
    mat4.lookAt(view, [0, 0, 5], [0, 0, 0], [0, 1, 0]); 
    mat4.perspective(projection, 30 * Math.RAD, W / H, 1e-3, 1e3); 
    [model, view, projection].reduce(function(a, b) { 
      return mat4.mul(mvp, b, a); 
    }); 
    for (i = n = 0, len = points.length; n < len; i = ++n) { 
      point = points[i]; 
      vec4.transformMat4(buffer, point, mvp); 
      vec3.scale(buffer, buffer, 1 / buffer[3]); 
      x = buffer[0], y = buffer[1], z = buffer[2], w = buffer[3]; 
      if ((-1 < z && z < 1) && (-1 < y && y < 1) && (-1 < x && x < 1)) { 
        ref1 = colors[i], r = ref1[0], g = ref1[1], b = ref1[2], a = ref1[3]; 
        x = (1 + x) * 0.5 * W | 0; 
        y = (1 - y) * 0.5 * H | 0; 
        i = x + y * W << 2; 
        a = a * H / w; 
        data.data[i++] += r * a; 
        data.data[i++] += g * a; 
        data.data[i++] += b * a; 
      } 
    } 
 
    context.putImageData(data, 0, 0); 
    return data.data.set(zero.data); 
 
  })(); 
 
});
canvas { 
  width: 600px; 
  height: 600px; 
}
<canvas id="canvas"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js"></script>

Answer 2

Вот так из куба получится гексагон:

x *= (4.5-Math.abs(y)*2)/4;
z *= 0.3;

Math.RAD = Math.PI / 180; 
 
window.addEventListener('load', function() { 
     
 
        var _, buffer, canvas, colors, context, data, j, k, l, model, mvp, palette, points, projection, render, v, view, 
            x, y, z, zero, θ, ρ, φ; 
        canvas = document.getElementById('canvas'); 
        context = canvas.getContext('2d'); 
        // document.body.appendChild(canvas); 
        buffer = mat4.create(); 
        model = mat4.create(); 
        view = mat4.create(); 
        projection = mat4.create(); 
        mvp = mat4.create(); 
        points = []; 
        colors = []; 
        palette = [[1.00, 1.00, 1.00, 0.30], [0.25, 0.50, 1.00, 0.75]].map(vec4.clone); 
 
        for (_ = j = 0; j < 12000; _ = ++j) { 
            ρ = 2 / 5; 
            θ = Math.acos(Math.random() * 2 - 1); 
            φ = Math.random() * Math.PI * 2; 
            x = ρ * Math.sin(θ) * Math.cos(φ); 
            y = ρ * Math.sin(θ) * Math.sin(φ); 
            z = ρ * Math.cos(θ); 
            points.push(v = vec4.fromValues(x, y, z, 1)); 
            colors.push(palette[0]); 
        } 
        for (_ = k = 0; k < 35000; _ = ++k) { 
            x = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
            y = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
            z = (1 - Math.pow(Math.random(), 5)) * ((Math.random() * 2 << 1) - 1); 
            x *= (4.5-Math.abs(y)*2)/4; 
            z *= 0.3; 
            points.push(v = vec4.fromValues(x, y, z, 1)); 
            colors.push(palette[1]); 
        } 
  
        data = null; 
        zero = null; 
        return (render = function () { 
            var H, T, W, a, b, g, i, len, m, n, point, r, ref, ref1, w; 
            requestAnimationFrame(render); 
            T = 1e-3 * Date.now(); 
            W = canvas.clientWidth; 
            H = canvas.clientHeight; 
            if (W !== canvas.width || H !== canvas.height) { 
                canvas.width = W; 
                canvas.height = H; 
                data = context.createImageData(W, H); 
                zero = context.createImageData(W, H); 
                for (i = m = 3, ref = zero.data.length; m < ref; i = m += 4) { 
                    zero.data[i] = 0xFF; 
                } 
                data.data.set(zero.data); 
            } 
            mat4.identity(model); 
            mat4.rotateX(model, model, T / 5); 
            mat4.rotateY(model, model, T / 6); 
            mat4.rotateZ(model, model, T / 7); 
            mat4.lookAt(view, [0, 0, 5], [0, 0, 0], [0, 1, 0]); 
            mat4.perspective(projection, 30 * Math.RAD, W / H, 1e-3, 1e3); 
            [model, view, projection].reduce(function (a, b) { 
                return mat4.mul(mvp, b, a); 
            }); 
            for (i = n = 0, len = points.length; n < len; i = ++n) { 
                point = points[i]; 
                vec4.transformMat4(buffer, point, mvp); 
                vec3.scale(buffer, buffer, 1 / buffer[3]); 
                x = buffer[0], y = buffer[1], z = buffer[2], w = buffer[3]; 
                if ((-1 < z && z < 1) && (-1 < y && y < 1) && (-1 < x && x < 1)) { 
                    ref1 = colors[i], r = ref1[0], g = ref1[1], b = ref1[2], a = ref1[3]; 
                    x = (1 + x) * 0.5 * W | 0; 
                    y = (1 - y) * 0.5 * H | 0; 
                    i = x + y * W << 2; 
                    a = a * H / w; 
                    data.data[i++] += r * a; 
                    data.data[i++] += g * a; 
                    data.data[i++] += b * a; 
                } 
            } 
 
 
            context.putImageData(data, 0, 0); 
            return data.data.set(zero.data); 
 
        })(); 
 
 
     
 
});
html { 
  display: table; 
  width: 100%; 
  height: 100%; 
} 
 
body { 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  background: #1A1D3E; 
} 
 
canvas { 
  display: block; 
  margin: auto; 
  width: 100%; 
  height: 720px; 
  background: #1A1D3E; 
}
<canvas id="canvas"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js"></script>

READ ALSO
Как модернизировать данный фильтр javascript?

Как модернизировать данный фильтр javascript?

Добрый день есть такой код фильтра

184
Вопрос по методу filter() в JavaScript

Вопрос по методу filter() в JavaScript

Из массива чекбоксов нужно получить лишь те, у которых атрибут 'data-set-chld' равен атрибуту 'data-set-parent' того, на который кликнули

176
Подставить значение JS к URL

Подставить значение JS к URL

Есть следующий код:

193
Как понять, что присылает подписка Xsi-events АТС Билайн на указанный для нее URL?

Как понять, что присылает подписка Xsi-events АТС Билайн на указанный для нее URL?

Оформлена подписка Xsi-event через PUT запрос в API АТС БилайнВ параметре URL был указан адрес, который принимает POST запросы

228