3

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

'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>

3
  • + за то, что хотелось бы увидеть решение....вопрос конешно "четкий"..такое чувство что вы откуда-то "стыбрили" код 19 дек 2019 в 7:19
  • Код открытий Взят с Codepen
    – ref21
    19 дек 2019 в 7:35
  • Я за то, что на этом сайте помагают с конкретной проблемой...а у вас задача для фриланса (хоть и не значительная) 19 дек 2019 в 7:57

2 ответа 2

2

Если отталкиваться от куба - необходимо добавить зависимости 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>

4
  • Расскажите, пожалуйста, подробнее как получить любую фигуру исходя из данного куба. Как вообще это работает? Мне очень интересна данная тема. Есть хорошие ресурсы для ее изучения?
    – ref21
    19 дек 2019 в 19:16
  • 1
    @ref21 Ну прям любое тело - вряд ли, просто куб легко превратить в пирамиду. Математика не сложная. Пирамиду, усеченную пирамиду, можно получить по представленной формуле, из сферы можно получать разные эллипсоиды итд. Булевыми операциями над такими примитивами можно получать комбинации этих тел... 19 дек 2019 в 20:02
  • а если в 6тиугольник?
    – ref21
    19 дек 2019 в 20:04
  • @ref21 могу попробовать... 19 дек 2019 в 20:05
1

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

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>

6
  • Спасибо, очень помогло. С чего лучше начинать для развития в данной теме?
    – ref21
    19 дек 2019 в 21:28
  • @ref21 сложно сказать, нужно этим заниматься, я вот у этого товарища многое узнал iquilezles.org/www/index.htm , codepen еще помогает 19 дек 2019 в 21:30
  • @ref21 codepen.io/strangerintheq/pen/KKKEwMd 19 дек 2019 в 21:32
  • какой-то не настоящий гексагон. боковых ребра все равно 4 осталось. И странное ощущение иногдп , будто перспектива неправильная - при отдалении грани не сужаются, а расширяются (но это возможно не всегда понятно где передняя грань а где задняя) :)
    – Grundy
    18 мая 2021 в 19:10
  • @Grundy конечно, ведь это на глаз подобранная 3д проекция :D 1 июн 2021 в 15:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.