Créer une image à partir d'un tableau

Fermé
TR_2000 Messages postés 23 Date d'inscription mardi 17 mai 2022 Statut Membre Dernière intervention 28 juin 2022 - 13 juin 2022 à 11:12
TR_2000 Messages postés 23 Date d'inscription mardi 17 mai 2022 Statut Membre Dernière intervention 28 juin 2022 - 13 juin 2022 à 16:40
Bonjour,

Je souhaite créer une image de 1024 par 200 à l'aide d'un tableau de 1024 valeurs. L'objectif est alors qu'à chaque seconde je puisse raffraichir la dernière ligne de l'image pour la rendre dynamique.

Néanmoins je maîtrise très mal le javascript et je n'arrive pas à réaliser cette tâche. Je l'ai faite en python donc je connais le processus mais je n'arrive pas ou ne trouve pas quelles fonctions utiliser en js.

Merci pour votre aide
A voir également:

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
13 juin 2022 à 12:13
Bonjour,

En JavaScript/HTML, tu pourrais utiliser canvas : https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial
0
[Dal] Messages postés 6174 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 2 février 2024 1 083
13 juin 2022 à 13:06
0
Salut,
pas vraiment de grandes différences entre Python et JavaScript(au moins pour la base) ce qui change c'est la syntaxe et le fait que JavaScript puisse manipuler le DOM = une page HTML et ses contenus.
Donc pas besoin de bibliothèques graphiques et vous avez accès à des API comme CNVAS.

Si vous voulez dessiner tout les pixels d'une image vous pouvez le faire juste avec cela:https://www.w3schools.com/tags/canvas_rect.asp


Mais bon il y a plus simple.
Par exemple plutôt que de retenir un tableau pourquoi ne pas créer une image vectorielle en SVG?
https://www.w3schools.com/html/html5_svg.asp

C'est beaucoup plus léger et évite d'avoir à retenir un tableau pour les convertir en couleurs.

Vous pouvez bien sûr faire cela dynamiquement en local ou avec une base de données si besoin d'avoir quelque chose de plus sécurisé et partagé.
En local JavaScript et une boucle d'animation suffisent(que ce soit par Canvas ou par SVG) pour la base de données il faudra un programme serveur et utiliser AJAX.

Le mieux si vous n^'êtes pas à l'aise avec la conception serait de commencer par simplifier votre question et faire étape par étape en rajoutant la complexité au fur et à mesure:

1)afficher un point de couleur dans la page (de quelle manière: avec du dessin bitmap 2D par canvas, en vectoriel avec un svg , en utilisant simplement un style CSS appliqué à une balise qui va représenter le point de couleur....). Vous soyez les possibilités ne manquent pas et elles sont toutes assez simples à mettre en œuvre.

2)Changer la couleur de ce point.

3)Créer et afficher des formes plus complexes qu'un point.

4)Combiner 2 et 3

5)Faire le changement dans une boucle(animation?)

6)Faire ce changement en fonction de données qui changent(d'où viennent elles?)

La logique de programmation que ce soit avec Python ou JavaScript à beau être identique ce qu'il faut prendre en compte c'est le contexte.
Le contexte ici c'est une page web et éventuellement la base de données et PHP:

https://fr.wikipedia.org/wiki/Page_web_dynamique

Différents contextes implique différentes logiques.
Un programme Python autonome n'a rien à voir avec le contexte d'une page web qui utilise plusieurs langages, programmations et entités matérielles(un navigateur accédant au réseau et interprétant pas mal de choses pour par exemple afficher la page et ses contenus, un serveur HTTP, un serveur d'application et une base de données généralement).

Donc ce n'est pas JavaScript qu'il faut savoir utiliser(ce qui est simple si vous savez programmer) mais aussi HTML, CSS et éventuellement le type de contenu qui sert à faire l'image(SVG, HTMLCanvasRenderer2D, autre chose? )
Il n'y a pas de limites mais des choix à faire conceptuellement et techniquement(ça dépends de vos buts dont vous ne parlez pas, un tableau de points coloré n'est pas un but: faire une animation, dessiner quelque chose est un but) et bien sûr des méthodes éprouvées sur lesquelles vous trouverez différentes ressources/cours et tutos.

https://duckduckgo.com/?q=animation+HTML5+canvas

https://duckduckgo.com/?q=animation+CSS

https://duckduckgo.com/?q=animer+du+SVG+dans+une+page+web

Si c'est autre chose et que j'ai mal compris(les points d'une image qui change au cours du temps ça s'appelle une animation ou de la vidéo) même chose: définissez vos buts et faites des recherches dessus avant de rentrer dan,s des détails qui seront ou ne seront pas pertinents(un tableau de points de couleurs, quelle étrange idée ça revient à réinventer l'eau chaude et jpg, png sur le web font très bien cela aussi, pour dessiner utiliser des formes est plus efficaces que du point par point).
0
TR_2000 Messages postés 23 Date d'inscription mardi 17 mai 2022 Statut Membre Dernière intervention 28 juin 2022 1 > DoctorHow
13 juin 2022 à 16:40
Bonjour,

Merci pour ta réponse,

Je me suis rendu compte qu'au final le problème était plus difficile. Je ne sais pas quel type de données envoyer depuis mon serveur. Je m'explique :

Sur le serveur, je récupère des données issues d'une FFT sur un autre logiciel à travrs une connexion UDP. Ces données sont convertis de byte vers un type complex64 puis j'en calcule le module. J'ai alors un tableau de 1024 float qu j'utilise pour creer une ligne de mon image qui est constitué de 200 lignes en tout.

Je pense alors dans un premier temps que ce sont les dernières données (celles en float) qui sont à envoyées et alors de l'autres coté, sur le client, j'aimerais reproduire le processus. C'est à dire créér une image de 1024x200 toute noire peu importe. Puis la modifier ligne par ligne grace au tableau de 1024 float.

Cependant je me demande si ce n'est pas mieux d'envoyer directement une image (celle que j'ai déjà créée sur le serveur) mais je n'arrive pas...
0