Luciane N'da Koussan

Projets intéractifs/note d'intention

Recette 1

Dans cette recette de forme, je voulais créer une animation avec un motif répétitif qui pouvait évoluer en fonction de l’interaction.

Le protocole : Créer un espace de 400 pixels par 400 pixels, créer un diamètre pour les pétales de fleurs à 50 pixels. Créer un nombre initial de 10 pétales. -Dessiner la fleur à l’endroit où on clique avec la souris. -Centrer la fleur à l’endroit où on cliquer avec la souris. Tige qui se dessine depuis le point click jusqu’au bas du cadre Création d’un cercle jaune au centre de la fleur pour représenter son cœur. -Ajout d’un cercle jaune au centre pour le détail Création de deux couches de pétales : 10 pétales, couleur rose vif, en forme d’ellipse, dessiner en cercle autour du centre Cinq pétales plus petit et plus clair, entre les pétales de la première couche interaction : Dès que l’on clique avec la souris, le nombre de pétales augmente La fleur est redessiner avec le nouveau nombre de pétales après chaque clic.

Recette 2

Dans cette recette de forme, j’avais pour objectif de créer une animation où les cercles apparaissez à chaque mouvement et clic de souris. En fait, je voulais rester dans une logique d’interactivité avec l’utilisateur

Protocole : Créer un canva de 400 pixels par 400 pixels, À chaque nouveau clic un nouveau cercle apparaît à l’endroit où l’utilisateur a cliquer. Les cercles sont de 50 pixels de diamètre. Trois couleurs sont utilisés le le vert, le jaune et le violet des couleurs que l’on retrouve dans notre premier sketch. Deux modes de sélection de couleurs sont proposés en mode séquentielle et en mode aléatoire pour varier l’expérience.

Recette 3

Dans cette animation, je voulais créer un Canva interactif ou plusieurs formes, notamment des rectangles et des ellipse tombe en haut de l’écran et s’arrête lorsqu’elles atteignent le bas d’une autre forme, l’utilisateur pouvez jouer avec ce côté interactif en déplaçant les formes.

Protocole : Créer un Canva de 600 pixels par 400 pixels. Établir les propriétés de forme Taille des formes aléatoire entre 20 à 50 pixels Les formes tombent à une vitesse constante. Celles-ci s’arrêtent lorsqu’elles atteignent le bas du corps va ou une autre forme. Création d’interactivité : détecter si une forme est sous la souris. Lors du clic, activer le déplacement de la forme lorsqu’elle est cliquée et maintenue, déplacer la forme sous la souris, tout en maintenant le clic. Relâcher la forme lorsque l’on relâche.

Recette 4

Cette recette est l’une des plus longues à mettre en place, l’objectif c’est de créer une animation ou les cercles suivent la souris, comme si ils étaient attirés magnétiquement vers elle.

Protocole : J’ai créé un c un canva de 400 par 400 pixels Puis j’ai créé une liste de cercle Création de 50 cercle a des positions aléatoire sur le Canva. Chaque cercles a un diamètre de 20 pixels et une couleur violette . Appeler une fonction draw. Calcul de «la force magnétique» vers la position de la souris La position varie en fonction de la force.

Recette 5

J’ai créer cette animation pour expérimenter la manière dont les utilisateurs peuvent interagir avec les éléments visuels sur l’écran permettant par exemple de figer les formes en mouvement. Et j’ai cherché également à créer une composition visuel assez dynamique.

Protocole : Création d'un canva de taille de 400 par 400 pixels au démarrage des cercles se génèrent avec des positions aléatoire. Des tailles aléatoire entre 20 et 50 pixels et des couleurs définies qui se réfère au premier scketch. Il varie en fonction de leurs mouvements c’est-à-dire qu’ils sont remis à jour. Chaque cercle est indépendants. il possède une position, une taille, une couleur, une vitesse de déplacement est un indicateur pour savoir s’il est figé ou non. Utilisation de la fonction update et display : La fonction update met à jour la position des cercles en fonction de leurs mouvements, c’est-à-dire que si je choisis de cliquer sur l’écran, les cercles sont remis à jour et la fonction display les affiches sur le canva.

PS pour ce projet, j’ai utilisé des fonctions nouvelle freez et unfreez. Ça permet de figer de libérer l’élément respectivement.