Simulateur de systèmes en JavaScript

Publié le 17 juin 2021 par BUQUET Antoine

Bonjour à toutes et à tous !

Nous sommes trois étudiants en seconde année du cycle préparatoire de Polytech Angers et lors de ce quatrième semestre nous avons travaillé sur un simulateur de systèmes de production en JavaScript. Vous trouverez dans cet article le déroulement de notre projet et les problèmes auxquels nous avons pu faire face !

Objectif

Le but est de créer une application web pouvant simuler un système de production, cela implique de programmer différents composants tels que des convoyeurs, des aiguillages et d’autres types de machines que l’on peut retrouver sur des chaînes de production réelles.

Ce genre de système est souvent pris en exemple pour illustrer des travaux de recherche car il permet de suivre l’évolution des flux du système au cours du temps.

Notre application devra également permettre à un utilisateur de créer facilement ses propres systèmes.

Pourquoi JavaScript ?

Tout simplement car il s’agit d’un langage de programmation qui convient parfaitement aux applications web et permet de programmer des animations graphiques dans un navigateur comme nous en avons besoin pour créer notre simulateur.

Logo du langage JavaScript

Déroulement du projet

Pour que notre simulateur puisse être le plus complet et permette un maximum de possibilités, nous avons créé au total 9 composants utilisables dans le système que voici :

Les convoyeurs : ce sont eux qui permettent le mouvement des pièces entre les différentes machines du système.

Un convoyeur

Les convoyeurs butés : il s’agit d’un convoyeur normal avec en plus la capacité de stopper les pièces et de les faire repartir (on pourrait l’assimiler à un feu de circulation).

Un convoyeur buté

Les machines : elles traitent les pièces en un certain temps et peuvent en traiter également qu’un certain nombre simultanément. Pour plus de dynamisme, leur design change en fonction de leur stock pendant la simulation.

Une machine

Les lots : ce sont des machines qui rassemblent un nombre défini de pièces en une seule pièce.

Un lot

Les lots doubles : des machines possédant le même comportement que les lots mais avec deux entrées pour les pièces et chacune de ces deux entrées doit avoir un nombre défini de pièces pour créer un lot.

Un lot double

Les découpeurs : des machines qui découpent une pièce en plusieurs pièces.

Un découpeur

Les découpeurs doubles : ils fonctionnent comme les découpeurs mais la sortie des pièces découpées est divisée en deux.

Un découpeur double

Les aiguillages : ils permettent de séparer les pièces qui arrivent. Cette séparation suit une logique cyclique : dans l’image suivante une pièce va en bas (0) puis deux pièces vont en haut (1).

Un aiguillage

Les téléporteurs : des éléments qui transportent les pièces à travers la simulation afin de simplifier les échanges entre les machines sans surcharge visuelle.

Avec tous ces composants disponibles nous avons pu créer plusieurs presets (exemples de système de production déjà faits) permettant à l’utilisateur de tester et de comprendre plus rapidement le comportement de chaque machine et leur manière de fonctionner.

Vous pouvez tester ces différents presets et essayer de créer votre propre système en téléchargeant notre programme ici

Les problèmes rencontrés

Bien que le langage JavaScript soit le plus adapté pour ce projet, aucun de nous trois n’avait auparavant codé en JavaScript. Nous avons dû faire de nombreuses recherches pour apprendre les bases avant de commencer à travailler.

Nous nous sommes rapidement rendu compte qu’il n’allait pas être simple pour l’utilisateur et même pour nous-même de créer des systèmes complexes s’il faut les coder directement dans le programme. C’est pour cette raison que nous avons créé une autre page qui permet d’ajouter et de retirer des machines bien plus facilement et avec un aperçu du système final en temps réel avant de lancer réellement la simulation.

Le résultat

Après plus d’une centaine d’heures de travail sur ce projet, nous avons pu aboutir à un résultat fonctionnel et qui satisfait le cahier des charges ainsi que nous-même.

Voici une courte vidéo faisant la démonstration du premier preset intégré à notre application :

Les améliorations possibles

Avec plus de temps et de moyen, nous aurions pu envisager la mise en place d’un serveur offrant la possibilité à un utilisateur de se connecter pour enregistrer et récupérer ses créations plus facilement qu’avec la fonction de copier-coller actuel.

La page principale où l’on crée sa simulation peut également être améliorée d’un point de vue ergonomique avec un système de “Glisser-déposer” par exemple pour placer les différents composants.

Conclusion

Cette expérience a été riche et très enrichissante pour nous trois. Adepte de l’informatique, nous avons pris beaucoup de plaisir à travailler sur ce simulateur et avons également beaucoup appris. Les problèmes rencontrés n’ont fait que renforcer nos connaissances du sujet et nous ont permis d’acquérir de nouvelles compétences qui nous seront utiles un jour dans notre carrière professionnelle.

Nous tenons à remercier M. COTTENCEAU pour son encadrement tout au long du projet.

Merci d’avoir lu notre article jusqu’au bout !

Antoine Buquet
Thomas Billequin
Mathis Vaugeois

Modélisation mathématique et simulation numérique de la phyllotaxie

Publié le 17 juin 2021 par FRAT Adrien

Bonjour à toutes et à tous,

Nous sommes Théo TROUILLARD et Adrien FRAT, deux étudiants en deuxième année de cycle préparatoire à Polytech Angers. Lors du semestre quatre de notre formation, nous avons réalisé un projet de conception qui avait pour intitulé “Modélisation mathématique et simulation numérique de la phyllotaxie”. Lors de ce projet, nos professeurs référents ont été Madame Laetitia PEREZ et Monsieur Laurent AUTRIQUE.

Qu’est-ce que la phyllotaxie ?

Le mot phyllotaxie vient du grec et il désigne l’arrangement des feuilles ou des fruits d’un être végétal. Ces arrangements sont multiples et ce phénomène permet donc une grande diversité des végétaux dans la nature. En effet, il existe différents types de phyllotaxie et chacun est caractérisé par le nombre de feuilles par nœud d’une plante et par l’angle de divergence entre ces feuilles.

Par exemple, sur cette photo de camérisier à balais, on voit très bien qu’il y a deux feuilles par noeud et que ces deux feuilles sont séparées par un angle de divergence de 180° :

Image 1 : Photo de camérisier à balais

L’objectif de ce projet

L’objectif de ce projet était de proposer une ou plusieurs simulations de ces arrangements à l’aide d’un outil informatique afin de simuler le développement de certaines plantes.

Les différentes étapes du projet

Notre projet s’est divisé en quatre grandes étapes.

D’abord, une phase de documentation où nous avons pu appréhender le sujet en nous renseignant grâce à différents supports sur ce qu’était la phyllotaxie.

Puis, il y a eu une phase d’étude. Dans cette phase, nous nous sommes intéressés plus particulièrement aux différents types de phyllotaxie et à leurs modèles mathématiques, c’est-à-dire à la façon dont on pouvait définir chaque type de phyllotaxie. Nous avons identifié cinq types principaux de phyllotaxie :

–spiralée : une feuille par nœud et deux feuilles successives séparées par un angle de divergence de 137,5°

–alternée distique : une feuille par nœud et deux feuilles successives séparées par un angle de divergence de 180°

–opposée distique : deux feuilles par nœud séparées par un angle de 180°

–opposée décussée : deux feuilles par nœud séparées par un angle de 180° et les feuilles de deux nœuds successifs sont divergentes de 90°

–verticillée : plusieurs feuilles par nœud (plus de 3)

Ensuite est venu le moment de réaliser nos simulations. Pour cela, nous avons utilisé le logiciel Scilab. Nous avons retenu seulement quatre types de phyllotaxie (les quatre premières citées précédemment).

Enfin, la dernière phase de notre projet concernait la rédaction de notre rapport.

Travail réalisé – Modèles Mathématiques et Simulations

Comme dit précédemment, avant de mettre en œuvre les simulations sur Scilab, nous avons d’abord étudié les modèles mathématiques. Pour nous aider, nous avons réalisé des schémas pour chaque type de phyllotaxie. Pendant notre étude, nous avons vu que nous avions la possibilité de travailler avec des coordonnées polaires car chaque point est défini selon un angle et une distance au centre.

Image 2 : Schéma représentant la phyllotaxie alternée distique

Image 3 : Schéma représentant la phyllotaxie opposée décussée

A partir de ces schémas, nous avons essayé de déterminer des algorithmes pour chaque cas de phyllotaxie. Puis, nous avons adapté ces algorithmes pour les retranscrire dans Scilab.

Ainsi, nous avons réalisé 4 simulations différentes (exemple dans le prochain paragraphe) que nous avons réunies à l’aide d’une interface graphique.

Exemple : Phyllotaxie Spiralée

Prenons comme exemple la phyllotaxie spiralée (rappel : une feuille par nœud, deux feuilles successives séparées par un angle de divergence de 137,5°) dont voici le schéma que nous avons fait :

Image 4 : Schéma représentant la phyllotaxie spiralée

On voit que pour chaque feuille (une feuille étant représentée par un point vert) l’angle va évoluer et la distance au centre va augmenter. On va donc raisonner avec une boucle itérative.

On commence par initialiser un incrément à 0 (Exemple: n = 0)

Puis commence notre boucle qui va de n au nombre d’itérations souhaité.

Pour chaque itération, on peut définir ou redéfinir :

-un angle phi = n * 137,5 (rotation dans le sens anti-horaire de 137,5° à chaque itération)

-une distance au centre r au centre qui est égale à n (plus l’incrément va augmenter plus la distance au centre va aussi augmenter)

-notre point (x,y) en passant des coordonnées polaires aux coordonnées cartésiennes

Enfin, on termine la boucle en augmentant l’incrément (n+1).

On peut retranscrire cet algorithme sous Scilab en ajoutant dans la boucle l’affichage de chaque point sur un graphique.

Nous obtenons le résultat graphique suivant :

Image 5 : Résultat graphique de notre simulation pour la phyllotaxie spiralée

Conclusion

Nous avons donc réussi à établir quatre simulations différentes que nous avons réunies dans une interface graphique avec Scilab. Pour cela, nous avons utilisé le module GUI Builder de Scilab. Nous sommes fiers du résultat final mais nous sommes conscients qu’il peut être amélioré (ajout de couleurs, simulation en 3D,…). De plus, ce projet nous a permis de réinvestir et/ou d’acquérir de nouvelles connaissances et de travailler en groupe, ce qui est un aspect important du métier d’ingénieur..

Image 6 : Aperçu de notre interface graphique

——————————————————————————————————————-
Image 1 : image prise sur un blog botanique (http://www.annie-claude-bolomier.fr)
Image 2,3 et 4 : schémas réalisés avec le logiciel draw.u-angers.fr
Image 5 et 6 : obtenues avec nos codes Scilab

Simulation en JavaScript

Publié le 13 juin 2021 par BODIN Paul

Introduction

Bonjour à tous. Nous sommes Paul Bodin et Romain Taillet, étudiants à Polytech Angers.
Notre projet de deuxième année avait pour but de produire un outil permettant de créer des simulations de lignes de production sur une page web. Pour cela, nous étions encadré par M. Cottenceau et nous avons utilisé le langage informatique JavaScript.

Le projet de deuxième année prend place durant le quatrième semestre de cycle préparatoire. Nous avons une centaine d’heures marquées sur nos emplois du temps qui y sont consacrées.

Pour réaliser ce travail, nous avons donc dû nous organiser pour remplir le cahier des charges de notre projet en temps et en heure.

Une bonne organisation du travail avec ses camarades fait partie de la réussite du projet

Une bonne organisation du travail avec ses camarades fait partie de la réussite d’un projet.

Notre travail

Pour commencer, nous avons créé des classes d’objets pouvant représenter des machines que l’on peut retrouver sur des lignes de production en usine.

Le séparateur séquentiel est une des machines. Elle sépare les pièces en entrée sur deux convoyeurs en sortie selon une séquence définie en attribut.

Ensuite, nous avons défini des attributs pour toutes ces classes et nous avons codé la manière dont elles doivent interagir entre elles.

Enfin, nous laissons un outil permettant à l’utilisateur de définir les objets qu’il souhaite mettre dans sa simulation ainsi que leurs attributs. Il pourra également changer de simulation aisément depuis le site.

Le bouton de sélection permet de choisir la simulation de notre choix. Nous proposons également deux exemples pour les utilisateurs.

Résultats

Nous pouvons donc vous présenter le résultat de notre projet avec le second exemple créé sur notre site. Il montre toutes les machines que nous avons créé, dans une configuration que nous avons prédéfinie.

Toutes les machines et les convoyeurs peuvent être réarrangés pour donner une autre simulation. Nous avons donc respecté notre cahier des charges. Vous pouvez retrouver notre projet ci-joint.

Conclusion

Le projet nous a permis de développer des qualités nécessaires au métier d’ingénieur telles que l’organisation et la communication. De plus, nous avons pu étudier et améliorer nos connaissances sur un sujet précis durant une centaine d’heure.

Le choix du thème du projet se fait parmi une longue liste et la répartition des élèves avec un algorithme de mariage stable. La probabilité que chacun tombe sur un sujet qu’il aime est alors élevé et cela permet de bien mieux s’investir.

Pour en savoir plus sur notre projet ou le travail de compte-rendu demandé, regardez notre compte-rendu ci-après.

Polytech Angers – Projets PEIP2

Projets de deuxième année du cyle prépa Peip2

Archives par mot-clé : simulation

Simulateur de systèmes en JavaScript

Modélisation mathématique et simulation numérique de la phyllotaxie

Simulation en JavaScript