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
  • + за то, что хотелось бы увидеть решение....вопрос конешно "четкий"..такое чувство что вы откуда-то "стыбрили" код Commented 19 дек. 2019 в 7:19
  • Код открытий Взят с Codepen
    – ref21
    Commented 19 дек. 2019 в 7:35
  • Я за то, что на этом сайте помагают с конкретной проблемой...а у вас задача для фриланса (хоть и не значительная) Commented 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
    Commented 19 дек. 2019 в 19:16
  • 1
    @ref21 Ну прям любое тело - вряд ли, просто куб легко превратить в пирамиду. Математика не сложная. Пирамиду, усеченную пирамиду, можно получить по представленной формуле, из сферы можно получать разные эллипсоиды итд. Булевыми операциями над такими примитивами можно получать комбинации этих тел... Commented 19 дек. 2019 в 20:02
  • а если в 6тиугольник?
    – ref21
    Commented 19 дек. 2019 в 20:04
  • @ref21 могу попробовать... Commented 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
    Commented 19 дек. 2019 в 21:28
  • @ref21 сложно сказать, нужно этим заниматься, я вот у этого товарища многое узнал iquilezles.org/www/index.htm , codepen еще помогает Commented 19 дек. 2019 в 21:30
  • @ref21 codepen.io/strangerintheq/pen/KKKEwMd Commented 19 дек. 2019 в 21:32
  • какой-то не настоящий гексагон. боковых ребра все равно 4 осталось. И странное ощущение иногдп , будто перспектива неправильная - при отдалении грани не сужаются, а расширяются (но это возможно не всегда понятно где передняя грань а где задняя) :)
    – Grundy
    Commented 18 мая 2021 в 19:10
  • @Grundy конечно, ведь это на глаз подобранная 3д проекция :D Commented 1 июн. 2021 в 15:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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