2020年新年大赛！

Question

ref21

Asked:2020-12-19 14:57:01 +0000 UTC2020-12-19 14:57:01 +0000 UTC 2020-12-19 14:57:01 +0000 UTC

我怎样才能把这个形状变成金字塔？

772

求助，急需解决

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

2 个回答

Voted

Stranger in the Q · Answer 1 · 2020-12-19T19:21:54Z

如果您从多维数据集开始 - 您需要添加依赖项，x我这样做了zy

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>

Stranger in the Q · Answer 2 · 2020-12-20T04:53:28Z

这是从立方体变成六边形的方式：

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>

我怎样才能把这个形状变成金字塔？

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

我怎样才能把这个形状变成金字塔？

2 个回答

相关问题