<p>If you only want to generate images, you could look into generating a galaxy with some number of spiral arms using cos and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" rel="nofollow noreferrer">sin</a>, play around with the circle radius: </p>

<p><code>Math.cos(radians) * radius, Math.sin(radians) * radius</code></p>

<p>Get this to work first.
You probably want to draw something somewhat elliptical instead of a full circle.
Randomly go more often in the center of the galaxy and close to the arms.</p>

<ul>
<li>Step 1: Randomly generate galaxy points</li>
<li>Step 2: Blend colors (<a href="https://stackoverflow.com/questions/28564851/html5-canvas-paint-blending-color-tool">HTML5 canvas paint blending color tool</a>)</li>
<li>Step 3: if you want realtime performance use WebGL ...</li>
</ul>

<p>Bonus: if you want to go full overkill you could even try to use realistic formulas:
<a href="https://arxiv.org/pdf/0908.0892.pdf" rel="nofollow noreferrer">https://arxiv.org/pdf/0908.0892.pdf</a></p>
How to simulate mouse movement to procedurally generate beautiful galaxies in JS?
<p>I'm working on a project that procedurally generates images of galaxies like this one: </p>

<p><a href="https://i.stack.imgur.com/4h34S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4h34S.jpg" alt="Galaxy"></a></p>

<p>This sample was "hand drawn" (by waving the cursor around). See this pen:
<a href="https://codepen.io/OpherV/pen/JQBKVq?editors=0110" rel="nofollow noreferrer">https://codepen.io/OpherV/pen/JQBKVq?editors=0110</a></p>

<p>I would like to procedurally generate these types of images, but rather than generate them at one go <strong>I'd like the generation be performed using a "drawing" process, that is, moving the drawing cursor in a pattern that achieves these visual structures.</strong> </p>

<p><a href="https://i.stack.imgur.com/LSsLb.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LSsLb.gif" alt="enter image description here"></a></p>

<p>The mouse-simulation code that I currently have is lifted directly from Louis Hoebregts' <a href="https://css-tricks.com/simulating-mouse-movement/" rel="nofollow noreferrer">"Simulating Mouse Movement" article on CSS Tricks</a>.</p>

<p>The principle function relies on Simplex noise:</p>

<pre><code>    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);
</code></pre>

<p>However this type of noise won't create the visuals I'm aiming for. Breaking down the visual structure I have in mind, we have a center-weighted blob and elliptical "arms". To achieve the former, I think more "drawing time" should be performed near the center (which creates the bright blobs inside), with less often "offshoots" performing more elliptic motion to make the latter.</p>

<p>I thought about somehow gradienting the Simplex noise so that it veers more towards the center, but I'm unsure how to go about doing that in 2d space. I'm also not certain how to proceed combining that with something that draws the "arms" of the galaxy.</p>

<p>Can you suggest an algorithm to achieve this? 
Thanks </p>