Bonjour,
J'aimerai déformer une image de façon à ce que cette image deviennent cette image.
J'ai cherché dans la doc Mozilla mais leurs transformations sont assez simplistes, le mieux serait de pouvoir déformer à partir d'un chemin que j'ai défini.
(Dans Gimp, cet effet est appelé la perspective)
J'aimerai ne pas devoir passé par l'analyse des pixels un par un.
# Mince les liens
Posté par Dorian . Évalué à 2.
http://pix.toile-libre.org/upload/original/1248616112.jpg
Pour donner :
http://pix.toile-libre.org/upload/img/1248616191.jpg
« En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll
[^] # Re: Mince les liens
Posté par NeoX . Évalué à 2.
en CSS, toujours pour permuter les 2 images
le futur ?
avec < canvas >
mais il me semble que ca reste du code javascript à creer/utiliser
[^] # Re: Mince les liens
Posté par Dorian . Évalué à 2.
Mais pour faire quelque chose modulaire et de léger je n'ai pas envie de créer des images que je change à la volée.
Je vais donc faire la méthode d'analyse par pixel, il ne me reste plus qu'à comprendre l'effet de perspective (utilisé par Gimp par exemple) et à l'appliquer.
En analysant le problème, il me suffit de définir un point de fuite vers lequel ira l'image, or ce point de fuite devrait être définit en 3D si je veux faire un bon effet, mais je vais essayer de ruser en passant par de la pseudo-3D (en 2D).
Là je cherche comment avoir la taille d'une image (facile) puis comment accéder à l'image pixel par pixel (moyen) puis créer une image en y placant les pixels un à un (difficile) !
« En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll
[^] # Re: Mince les liens
Posté par jcs (site web personnel) . Évalué à 2.
Regarde la fonction getImageData de l'API de canvas. À partir de là tu peux obtenir la taille de l'image et un tableau de pixels. La fonction putImageData te permet d'écrire tes modifications dans le canvas. Évidemment tu vas devoir ré-implémenter l'algorithme qui fait l'effet que tu veux en javascript. Mais avant toute chose, je te conseille de vérifier que ces fonctions sont bien implémentées dans les navigateurs web que tu vises.
http://www.whatwg.org/specs/web-apps/current-work/multipage/(...)
[^] # Re: Mince les liens
Posté par benoar . Évalué à 1.
[^] # Re: Mince les liens
Posté par geb . Évalué à 3.
Tu trouveras quelques pointeurs sur ejohn.org , dont un port de processing , des benchmarks et un réseau de neurones en js pour les captchas.
[^] # Re: Mince les liens
Posté par jcs (site web personnel) . Évalué à 2.
[^] # Re: Mince les liens
Posté par Dorian . Évalué à 2.
« En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll
[^] # Re: Mince les liens
Posté par jcs (site web personnel) . Évalué à 1.
# Euh
Posté par Axioplase ıɥs∀ (site web personnel) . Évalué à 2.
Donc, tu veux
- avoir ton image dans un tableau de pixels,
- la multiplier par une matrice
- recommencer
Cherche des mots clefs comme "rotation" et "matrice", t'auras toute la doc sous la main.
[^] # Re: Euh
Posté par Octabrain . Évalué à 2.
Mais par contre, je doute qu'une bête matrice de transformation 2d suffise à faire l'effet qu'il veut (http://en.wikipedia.org/wiki/Transformation_matrix surtout qu'on ne peut indiquer que 6 des coeffs).
[^] # Re: Euh
Posté par Axioplase ıɥs∀ (site web personnel) . Évalué à 3.
Faut une matrice rotation 3D justement (comme je l'ai indiqué)! Et tu mets même un lien correcte (vers le bas, avec projection 3D. C'est ce qu'on veut faire) !
Plus de détails avec les bonnes matrices pour les rotations dans l'espace ici : ttp://mathworld.wolfram.com/RotationMatrix.html
Ce qu'il faut faire, c'est donc une translation à droite de la moitié de l'image, le produit avec la matrice (qui se fait donc sur la tranche de l'image), et une translation à gauche (pour la recentrer).
[^] # Re: Euh
Posté par Octabrain . Évalué à 2.
[^] # Re: Euh
Posté par Axioplase ıɥs∀ (site web personnel) . Évalué à 3.
J'ai cherché aussi, mais rien à faire, c'est limité sur ce plan.
On peut donc faire le produit matriciel à la main (ce que j'envisageais initialement), ou utiliser une autre méthode… C'est vraiment dommage de filer une interface bridée comme ça… c'est comme une voiture dont on ne peut pas tourner le volant…
# Bloqué sur la déformation de l'image
Posté par Dorian . Évalué à 2.
J'ai reussi à récupérer une image puis l'afficher, puis récupérer les données de cette image sous forme d'un tableau de pixels. Ce tableau de pixels, j'ai vu comment il fonctionne : tout les pixels à la suite (pas de 2éme dimension), 4 cases par pixels (rgba).
Maintenant j'aimerai utiliser les données et les changer pour déformer l'image or la transformation que je voudrais faire c'est faire rentrer une image dans un quadrilatère et c'est là que vient le problème.
Les transformations par matrice ne sont pas assez complètes.
J'ai voulu faire un tableau à 3 dimension de l'image (par conversion) : [x][y][rgba] mais la conversion est trop longue pour avoir une application fluide.
Donc connaitriez vous une façon de "faire rentrer" une image dans un quadrilatère ?
« En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.