How to simulate mouse movement to procedurally generate beautiful galaxies in JS?

Question

I'm working on a project that procedurally generates images of galaxies like this one:

This sample was "hand drawn" (by waving the cursor around). See this pen: https://codepen.io/OpherV/pen/JQBKVq?editors=0110

I would like to procedurally generate these types of images, but rather than generate them at one go 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.

The mouse-simulation code that I currently have is lifted directly from Louis Hoebregts' "Simulating Mouse Movement" article on CSS Tricks.

The principle function relies on Simplex noise:

    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);

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.

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.

Can you suggest an algorithm to achieve this? Thanks

I know this isn't exactly what you're looking for but you shout check out the https://threejs.org/ library. [this](http://stars.chromeexperiments.com/) was built with it. — Mr. Robot, Aug 18 '19 at 18:55
@tommmmmmmy this is very cool indeed but doesn't really pertain to my question — OpherV, Aug 18 '19 at 19:03
Here's something that could be adapted to your needs. Random Bezier Walker: https://machinesdontcare.wordpress.com/2009/06/05/random-walk-bezier-javascript-code/ — Synthetx, Aug 20 '19 at 01:34

score 0 · Answer 1 · answered Aug 20 '19 at 14:27

If you only want to generate images, you could look into generating a galaxy with some number of spiral arms using cos and sin, play around with the circle radius:

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

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.

Step 1: Randomly generate galaxy points
Step 2: Blend colors (HTML5 canvas paint blending color tool)
Step 3: if you want realtime performance use WebGL ...

Bonus: if you want to go full overkill you could even try to use realistic formulas: https://arxiv.org/pdf/0908.0892.pdf

How to simulate mouse movement to procedurally generate beautiful galaxies in JS?

1 Answers1