javascript - JS中如何模拟鼠标移动程序生成漂亮的星系？

Question

我正在从事一个程序化生成星系图像的项目，就像这样:

此示例是“手绘”的(通过四处挥动光标)。看这支笔: https://codepen.io/OpherV/pen/JQBKVq?editors=0110

我想按程序生成这些类型的图像，而不是一次生成它们 我希望使用“绘图”过程执行生成，即，以一种模式移动绘图光标实现这些视觉结构。

我目前拥有的鼠标模拟代码直接来自 Louis Hoebregts 的 "Simulating Mouse Movement" article on CSS Tricks .

原理函数依赖于单纯形噪声:

    const s = 0.001 * (speed / 100);
    const noiseX = (noise.simplex3(1, 0, a * s) + 1) / 2;
    const noiseY = (noise.simplex3(11, 0, a * s) + 1) / 2;

    random += randomness / 1000;
    const randX = noise.simplex3(1, 0, random) * window.innerWidth * 0.1;
    const randY = noise.simplex3(3, 0, random) * window.innerHeight * 0.1;
    const x = noiseX * innerWidth + randX;
    const y = noiseY * innerHeight + randY;

    updateMouse(x, y);

但是，这种噪音不会产生我想要的视觉效果。打破我脑海中的视觉结构，我们有一个中心重点的 Blob 和椭圆形的“ ARM ”。为了实现前者，我认为应该在中心附近执行更多的“绘图时间”(这会在内部创建明亮的 Blob )，而较少的“分支”执行更多的椭圆运动来制作后者。

我考虑过以某种方式对 Simplex 噪声进行梯度处理，使其更偏向中心，但我不确定如何在 2d 空间中执行此操作。我也不确定如何继续将它与吸引银河系“ ARM ”的东西结合起来。

你能推荐一个算法来实现这个吗？ 谢谢🙏

Answer 1

如果您只想生成图像，您可以考虑使用 cos 和 sin 生成具有一定数量旋臂的星系。 ，玩转圆半径:

Math.cos(radians) * radius, Math.sin(radians) * radius

首先让它工作。 你可能想画一些椭圆形的东西而不是一个完整的圆圈。 更频繁地随机前往星系中心和靠近 ARM 。

• 第 1 步:随机生成星系点
• 第 2 步:混合颜色 ( HTML5 canvas paint blending color tool )
• 第 3 步:如果您想要实时性能，请使用 WebGL ...

奖励:如果你想完全矫枉过正，你甚至可以尝试使用现实的公式: https://arxiv.org/pdf/0908.0892.pdf