Bonjour,
connaitriez vous un algo permettant de programmer un effet néon sur les contours d'une image?
Version imprimable
Bonjour,
connaitriez vous un algo permettant de programmer un effet néon sur les contours d'une image?
Vu la question , j'ai envie de dire que cela n'a rien n'a voir avec le C :p
(Je pense que il existe d'autre sous forum plus spécialisé dans ce domaine )
Sinon un exemple d'effet de neon que tu veux ?
Comme ceci par exemple ? http://www.mediatheque-beziers-agglo...=1&itemId=6141
Le truc c'est que il faut déterminer les sources de lumière.
Parce que ça me semble juste d’être un éclairage par pixel basic sinon.
Bonjour Kannagi.
C'est bien l'effet que je recherche.
Déteminer les sources de lumière, je ne sais pas faire, quant à éclairer les pixel, je sais faire, mais la question est : de quelle façon pour obtenir l'effet néon.Citation:
Le truc c'est que il faut déterminer les sources de lumière.
Parce que ça me semble juste d’être un éclairage par pixel basic sinon.
Voici par exemple une fonction qui permet d'appliquer certains effets sur une image. Celà marche trés bien pour le flou de bougé, la mise en relief, et le flou tout court par exemple.
Est il possible d'utiliser cette fonction pour l'effet néon? si oui, comment peut ont faire ça?
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
Flou gaussien + Affichage par transparence. Après ça dépend du résultat recherché car en infographie il existe plusieurs techniques.
ok, l'effet que je recherche est celui qui correspond au lien posté par Kannagi dans la présente discussion.
Par exemple, calculer un effet néon sur le rectangle jaune.
je vais essayer le flou gaussien + transparence.
Plutôt que des formes pleines je te conseille des lignes afin de reproduire la structure d'une lampe néon. Sinon une astuce pour t'aider c'est de tester l'effet avec un éditeur d'images. Les fonctionnalités existent déjà et à partir de là tu peux déterminer le processus. Faire quelques didacticiels d'infographie au besoin ça peut aussi être une piste.
Bonjour,
je reviens à vous car après des semaines de retournement de cerveau, j'ai à peu près réussi à faire ce que je voulais.
voici comment je procède :
A a place de dessiner un pixel, je dessine un disque avec les algos de Bresenham. Ensuite je pars du centre jusqu'à la périphérie, et pour chaque ligne remplissant le cercle, je calcule une transparence de plus en plus forte.
Pour la seconde image, ce n'est pas un cercle qui forme le pixel "neon" mais un calcul qui ajoute des x ou des y au point du pixel.
Ca vaut ce que ca vaut, mais c'est de moi.
Je ne sais pas du tout si au niveau temps d'éxécution, c'est bien ou non.
Voici plusieurs images avec plusieurs façons de programmer un effet néon.
Code:
2
3
4
5
6
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
(le troisième octant ne fonctionne pas)
voici les images :
Au passage, message pour Jacques Olivier Lapeyre : dans tes lectures de commentaires de ta chaine youtube, tu parles du pseudo Moi Moi en disant qu'il est fou (dans le bon sens du terme) d'avoir regardé tes vidéos en entier. Merci pour le compliment, il s'agit de moi. Merci encore pour tes videos.
Pièce jointe 271190
Pièce jointe 271193Pièce jointe 271195
voici également le code pour choisir la couleur qu'on veut "néoner" dans une image:
(le code commenté a été utilisé pour l'image jaune ci dessus)
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
qui donne par exemple:
(on peut choisir d'allumer seulement le blanc, le vert ou bien le rouge)
Pièce jointe 271308
C'est astucieux d'utiliser cet algorithme et je t'encourage à expérimenter surtout compte tenu du résultat encourageant. Par contre je comprends pas pourquoi tu t'es éloigné des solutions de départ surtout qu'en remontant je suis tombé sur le code correspondant exactement à celle que je t'avais proposé. Ici la tienne se rapproche plus d'un effet de brosse : Circulaire, étoilée… À défaut d'être du traitement d'image pur ça pourrait donc servir pour dessiner. D'ailleurs ta 1ère image me laisse à penser que tu as un petit outil pour tracer des courbes.
Sinon quelles sont tes pistes d'amélioration ? Je pense niveau performance, car l'algo est un gouffre pour cet usage, et rendu visuel. J'ai notamment remarqué les inévitables trous. Sinon même si tu t'es amusé, tout en t'arrachant un peu les cheveux parfois à mon avis, il ne faut pas négliger l'apprentissage et je pense notamment aux concepts mathématiques derrière. Mais réinventer la roue et partir dans d'autres directions en fonction de ses connaissances c'est aussi enrichissant. Faut trouver le juste équilibre !
Donc bravo et la prochaine fois faut poster un néon rigolo car sur la 3e image le pauvre bonhomme tire un peu la gueule héhé. Pas content de ses néons colorés le Léon ?! :ptdr:
Salut,
merci pour tes encouragements, ohnomorejmmings, vu comment j'ai transpiré pour arriver à ce petit résultat, ça fait plaisir de voir que quelqu'un l'aprécie.
Pour ce qui est des améliorations algorithmiques, je n'ai pas encore réfléchi à la question. J'y penserai quand j'aurais un truc qui me plait pleinement (quand il n'y aura plus de trous par exemple, ou bien que le 3eme octant de mes cercles fonctionnera).
Ma première image a été faite à la main, en tatonnant comme un malade pour les x et les y. J'envisage de faire justement un petit utilitaire pour faire cela graphiquement, mais je n'ai pas bien compris comment implémenter un drag and drop. J'ai déjà posté la question sur ce forum, et j'ai compris la réponse, par contre pour le faire tourner graphiquement, c'est autre chose. Je voudrais me servir de pointeurs de fonction. Par exemple tirer sur l'extrémité d'un segment de droite donne une autre orientation à la courbe.
Dans ma fonction qui trace des courbes de Bézier, j'utilise un booléen qui permet d'afficher ou non les traits droits qui donnent l'orientation à la courbe.
J'aimerais aussi changer la position de la couleur la plus blanche du néon en fonction d'une autre source lumineuse que je placerai dans l'image.
Donc, si je réussis, je reviens ici pour montrer un smiley, content cette fois ci, de s'être fait néoner!
Je reviens ici car j'ai trouvé un autre algorithme sur wikipedia, il s'agit des cercles d'andres :Citation:
Envoyé par ohnomorejmmings
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
j'ai traduit cet algorithme en langage c et cela donne un résultat qui se rapproche au plus près de ce que je veux.
voici une image programmée par moi, où chaque disque a pour rayon 255, ce qui permet de passer par les 255 valeurs de transparence.
La fonction que j'ai écrite permet de recalculer une transparence acceptable quel que soit le diamètre du disque qu'on choisit.
Cela me plait vraiment pour UN disque, en revanche, lorsque je veux réduire la taille pour "allumer" une forme, c'est la cata.
Par exemple, une ligne rouge que je veux "néoner" devient floue et il manque l'éclat blanc au milieu.
Encore de quoi bien me retourner le cerveau en perspective. :yaisse3::yaisse2::yaisse1:
Est-ce qu'il ne faut pas tout simplement attribuer à chaque pixel une valeur d'« intensité lumineuse » proportionnelle à sa distance (ou au carré de sa distance) à l'élément qui génère le halo (point, droite, courbe, silhouette d'une forme convexe..) ?
Bonjour Matt_Houston.
Une intensité lumineuse à chaque pixel? Si je comprends bien, il faut que je convertisse mes pixels rgb en pixels hsl.
j'ai réussi à traduire l'algo du site http://http://www.rapidtables.com/co...rgb-to-hsl.htm
en langage c pour convertir une couleur rgb en couleur hsl, en passant par une structure H qui a pour champs r, g, b:
Code:
2
3
4
5
6
7
8
9
10
11
12
ce qui donne en fonction :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
et voici une image qui joue sur hsl et non rgb :
il faudrait que j'arrive à intervertir les couleurs blanches et noires.
En réalité je n'entendais le terme qu'en tant que notion spécifique à ton problème d'effet néon, ce pourquoi je l'ai écrit entre guillemets. Je ne pensais pas du tout au codage de la couleur.
Pour éviter la confusion, je vais reformuler et parler de « quantité d'énergie » reçue par chaque pixel : cette dernière est maximale sur les pixels qui composent l'objet auquel est appliqué l'effet puis décroit à mesure que l'on s'en éloigne. Ça se modélise de manière assez directe en passant sur chaque pixel et en lui attribuant l'énergie qu'il reçoit en fonction de sa distance à l'objet (calculée via une projection orthogonale s'il s'agit d'une ligne, par exemple).
C'est une simple idée, je n'ai jamais programmé cet effet en software / séquentiel (par opposition à un bloom sur GPU).
Calculer la luminosité de chaque pixel rejoint l'approche pour le lancer de rayon ou un moteur d'éclairage. Trop compliqué à mon avis pour simuler un simple effet de néon surtout qu'il y aurait beaucoup trop de "pixels sources" à prendre en compte.
Ne sous-estimes pas les progrès faits avec ton dernier résultat. En plus d'avoir comblé les trous tu as de beaux halos colorés ! En combinant tout ça avec tes dessins tu devrais t'approcher encore plus de l'effet tant convoité. Allez hop on agrandit les centres hyper lumineux pour éclater le forum ! Ensuite on applique tout ça à des hordes de formes pixelisées !!
PS : Attention t'as marqué cette discussion comme résolue
Je t'accorde que ça ne doit pas être le meilleur rapport qualité / performance. Cela dit il y a toujours manière de définir une AABB ou une OOBB de la zone à prendre en compte et l'opération est aisément parallélisable puisque les contributions à différents pixels peuvent être déterminées indépendamment (ou en grande partie).
Mais bon là encore ce sont mes suppositions : je n'ai pas votre recul pratique. :)
re!
c'est cool de voir que le sujet vous intérresse.
j'ai donc encore bien galéré pour vous présenter ce qui suit:
voici une image qui mélange plusieurs algos. J'ai repris l'idée initiale et j'ai suivi ton conseil ohnomorejmmings, c'est à dire que je n'ai pas laissé tombé les cercles d'andres.
Pour une ligne horizontale, je calcule d'abord des cercles d'andres dont les x_centre et les y_centre sont placés aléatoirement de part et d'autre de la ligne (c'est à dire que le centre du cercle est un nombre aléatoire compris entre les x et les y de la ligne elle même et une certaine valeur qu'on peut modifier).
Je répète l'opération avec des cercles de rayon légèrement plus petits.
Pour chaque cercle, la transparence, elle, est fixe.
Ensuite, je dessine une ligne "néon" blanche aux coordonnées de la ligne précédemment calculée.
Voilà pour l'instant.
En ce qui concerne la rapidité d'exécution, voici ce que cela donne pour l'image ci dessous (image tga 24 en 800x800):
real 0m0.188s
user 0m0.180s
sys 0m0.004s
question à Matt_Houston : qu'est ce qu'une AABB ou une OOBB?
Ça progresse, ça progresse. Super !
Par contre je ne comprends pas trop l'utilisation du hasard même si ça donne un rendu unique. Aussi finalement ça fait plus laser maintenant non ? Ça reste trop propre pour comparer avec l'image postée par Kannagi. Le néon ça bave quoi comme quand le Léon a trop bu !
Le centre blanc fonctionne plus ou moins bien selon les couleurs. Par exemple pour le bleu je verrai plus du cyan. Ça sera d'autant plus visible quand il sera plus étalé.
Je critique et c'est bon signe car je sens que la prochaine fois ça sera encore mieux. En plus ta technique devrait aussi s'adapter à d'autres formes…
PS : Hum pour que des stats soient crédibles faut donner les spécs du Tron générant ce monde électropsychédélique
Hello.
Alors, pour faire baver le néon (ou plutôt donner une vague impression de fumée diffuse dans mon cas), j'ai besoin du hasard justement. Voici le bout de code que j'ai modifié, écoutant à nouveau tes conseils:
Code:
2
3
Je m'explique : pour chaque pixel sur la ligne horizontale, je calcule un rayon en 1 et 100.
Je longe toute la ligne horizontale, et je place des cercles un peu partout, dont les x_centre sont compris entre x_centre - 25 et x_centre + 25 => c'est le sens horizontal de l'image,
et dont les y_centre sont situés entre 25 et 255 => c'est le sens vertical.
C'est ce qui me permet d'obtenir une sorte d'effet fuménoïde.
Bonjour, je m’appelle Léon. Avant, j’étais moche. Ma vie était sans intérêt. Je me retrouvais sur tous les sites, dans tous les forums, utilisé pour exprimer des émotions ridicules…
Mais depuis que j’ai rencontré mon ami Néon, c’est la fête tous les jours*!!!! Vous aussi, venez rencontrer Néon, votre vie deviendra lumineuse*!!! VIVE NEON*!!!!
(ouais….bon….ça se voit que je suis content de mon algo?...)
Voilà comment se comporte la fonction avec une autre forme :
Bonjour,
Je ne crois pas que cela a été dit, mais en 3D temps réel (donc avec le GPU), le flou lumineux se fait souvent par un down scale sur plusieurs niveaux de la résolution de l'image lumineuse (ce qui fait un floutage de l'image) puis une fusion.
Bien sûr, une passe de flou gaussien c'est toujours la base.
Exemple sur DOOM : https://jeux.developpez.com/articles...udy/doom/#LI-R
Bonjour LittleWhite. Si je comprends bien l article, il faut appliquer l effet une fois que la forme est dessinée et non appliquer l effet pour chaque pixel qu on est en train de dessiner.
En effet, mais il ne faut pas oublier que la 3D impose des contraintes différentes aux votre, sachant que pour les formes 3D, elles sont dessinées par triangle.
Du coup, moi, je prendrai votre image finale (image de luminance) et j'appliquerai l'effet en post traitement.
pour flouter l'impression de fumée et donner une impression de dégradé continu?
Arf, je me suis mal exprimé. Je parlais (bêtement d'image finale), l'image avec la couleur du néon, sur fond noir, mais sans l'effet néon.
Genre celle-ci : https://www.developpez.net/forums/at...age/leon1.png/ et vous lui appliquée la technique que j'ai mentionnée.
Président Léon-Néon
T'as raison d'être content de toi car Léon-Néon en jète. Un festival de couleurs et l'effet fuménoïde est original. Par contre j'ai l'impression qu'avec les formes non linéaires tu perds le rendu laser. Physiquement ça devrait ressembler au tube contenant le gaz permettant l'émission de lumière. Mais par l'aléatoire t'obtiens bien un éclairage des zones alentours. Une forme de radiance ? Lumière diffuse, émise… Enfin l'idée est là !
Traitement d'images temps réel vs. fondamental
Merci pour l'article les techniques d'id Software sont toujours un régal ! En effet agrandir/rétrécir une image plusieurs fois permet de la flouter et d'ailleurs pour s'en rendre compte il suffit de le faire avec un simple logiciel d'édition d'images. Par contre les algos supportées ne le sont pas toujours par les cartes graphiques limitées à du bilinéaire & Cie. Je pense aussi que l'astuce verrait ses limites par rapport à un vrai flou gaussien.
Sinon dans ce cas je trouverai dommage de s'éloigner des fondamentaux. C'est pas un hasard si j'ai mentionné le traitement d'images car à partir de là ça permet d'avoir accès à plein de trucs utiles : Déterminer le contour, épaissir les formes… En plus la base est la même que pour le flou.
Après tout dépend de tes besoins et envies ! En plus les résultats obtenus sont vraiment sympas.
Hello et merci pour vos conseils et tes compliments.
Bon, trève de satisfaction, je me prends une belle claque quand justement je veux expérimenter ce que vous appelez les fondamentaux.
C'est à dire le traitement d'image (contour, épaississement etc.).
J'en arrive à la convolution d'image.
J'ai posté un autre sujet sur ce forum, mais en fait je crois que les deux sont liés.
Je ne cesse de modifier une fonction de convolution, mais rien ne marche comme je voudrais : quand je compare mes résultats avec ceux de google, cela n'a rien à voir.
Je publie ici ma fonction une nouvelle fois modifiée, mais les résultats sont mauvais.
Aurais tu une seconde de ton temps pour y jeter un oeil et me dire où ca merdoie?
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
Il te faut des images de tests, précisément définies pour que tu puisses calculer toi-même, à la main, l'image résultat.
Par exemple, des images ultra contrasté: un rectangle de 8 pixels de haut par 16 de long, blanc sur la moitié gauche, noir sur la moitié droite.
La même avec les combinaisons de couleurs entre blanc, noir, rouge, bleu et vert.
Puis avec des formes un peu moins tranchées une ligne en travers d'un bloc, une tache, etc.
OK. Tests en vue!
Si ça peut te rassurer t'es pas le seul à rencontrer des difficultés. C'est normal car le traitement d'images ça peut être compliqué surtout que certaines connaissances en math sont nécessaires. Les matrices sont-elles tes amies ? Les tableaux tu aimes ? Pour le flou gaussien une recherche rapide a retourné des discussions utiles alors je te conseille de faire de même. Je vais jeter un coup d'œil à ton autre discussion mais si tu bloques je connais une technique pour simplifier le processus même si le résultat est moins puissant.
