Comment simuler le mouvement de la souris pour générer de façon procédurale de belles galaxies en JS ?

Question

Je travaille sur un projet qui génère de manière procédurale des images de galaxies comme celle-ci :

Cet échantillon a été "dessiné à la main" (en agitant le curseur). Voir ce stylo : https://codepen.io/OpherV/pen/JQBKVq?editors=0110

J'aimerais générer de manière procédurale ce type d'images, mais plutôt que de les générer en une seule fois J'aimerais que la génération soit réalisée à l'aide d'un processus de "dessin", c'est-à-dire en déplaçant le curseur de dessin selon un modèle qui permet d'obtenir ces structures visuelles.

Le code de simulation de la souris dont je dispose actuellement est tiré directement de l'ouvrage de Louis Hoebregts intitulé Article "Simulation du mouvement de la souris" sur CSS Tricks .

La fonction principale repose sur le bruit Simplex :

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

Cependant, ce type de bruit ne permettra pas de créer les visuels que je recherche. En décomposant la structure visuelle que j'ai en tête, nous avons un blob à poids central et des "bras" elliptiques. Pour obtenir la première structure, je pense qu'il faut effectuer plus de "temps de dessin" près du centre (ce qui crée les gouttes lumineuses à l'intérieur), avec des "ramifications" moins fréquentes effectuant un mouvement plus elliptique pour obtenir la seconde.

J'ai pensé à gradienter le bruit Simplex pour qu'il se dirige davantage vers le centre, mais je ne suis pas sûr de savoir comment le faire dans un espace 2D. Je ne suis pas non plus certain de la façon de procéder pour combiner cela avec quelque chose qui dessine les "bras" de la galaxie.

Pouvez-vous suggérer un algorithme pour y parvenir ? Merci

Answer 1

Si vous souhaitez uniquement générer des images, vous pouvez envisager de générer une galaxie avec un certain nombre de bras spiraux en utilisant cos et sin Jouez avec le rayon du cercle :

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

Faites d'abord fonctionner ça. Vous voudrez probablement dessiner quelque chose d'un peu elliptique au lieu d'un cercle complet. Allez plus souvent au hasard au centre de la galaxie et près des bras.

• Étape 1 : Générer aléatoirement des points de galaxie
• Étape 2 : Mélangez les couleurs ( Outil de mélange de couleurs pour la peinture sur toile HTML5 )
• Étape 3 : si vous voulez des performances en temps réel, utilisez WebGL ...

Bonus : si vous voulez vous surmener, vous pouvez même essayer d'utiliser des formules réalistes : https://arxiv.org/pdf/0908.0892.pdf