COSMOTRON

1

Difficulté:

Bonjour,

Ceci est un tutoriel de photomaton destinée à prendre des photo sur le thème de l'espace.

Il remplace une couleur défini par une image choisi.

Le langage utilisé est javascript avec la librairie P5JS

Etape 1 : VARIABLE

Var

Voici les Variables,

Elles sont obligatoire pour pouvoir créer des codes qui fonctionne . 


Etape 2 : SETUP

Setup

Voici la function setup,

C'est une fonction nécessaire au codage, elle sert à paramétrer toute les variable écrite précédemment.

Elle n'est appeler qu'une seule fois au début.


Etape 3 : DRAW

Draw

Voici la function Draw,

Chaque image qui apparaîtra sur l'écran, sera dessiné par cette fonction.

Exemple : L'image transmise par votre webcam (ou autre) au codage, sera dessiner par cette fonction.

Etape 4 : WINDOW RESIZED

Sans titre

Function windowResized,

Cette fonction n'est pas très grande, mais elle permet de définir la largeur et la hauteur du canvas et de la camera.

Grâce à cette fonction, le canvas et la camera s'adapte à la taille de votre écran. 

Etape 5 : DESSINER CAMERA

Dessinercamera

Function dessinerCamera,

Fonction qui est appeler dans Draw pour pouvoir définir l'image de la camera,  et que Draw la dessine. 

Etape 6 : DISTANCE

Distance

Function distance,

Fonction qui sert à afficher le calcul de couleur, il calcul la distance des couleurs.

Etape 7 : MOUSE CLICKED

Mousecliked

Function mouseClicked,

C'est une fonction qui est appeler quand la souris clic sur un bouton ou sur l'image. 

Elle calcule la position de la souris ainsi qu'a détecter la couleur sous la souris quand on clic. 

Etape 8 : PHOTO

Photo

Function Photo

C'est la fonction qui permet de définir les actions du bouton photo, permet de définir la date et l'heure de la prise.

Etape 9 : TEXT AFFICHE

Textaffiche

Function textAffiche,

C'est la function qui définie le texte afficher pendant le compte à rebours.

Etape 10 : SUIVANT

Suivant

Function Suivant,

Fonction du bouton suivant, permet de faire défiler les images qui remplaceront la couleur à remplacer.

Etape 11 : CHARGER IMG

Chargerimg

Function chargerImg,

Permet de télécharger les images  qui sont utiliser pour le remplacement de couleurs. 

Etape 12 : HIDE SHOW

Hideshow

Function hideShow,

Cette fonction permet de pouvoir créer un bouton qui nous permet de cacher les autres boutons. 

Etape 13 : SLIDER CHANGE

Sliderchange

Function sliderChange,

Défini un seuil, qui ce modifie en bougeant le petit bouton sur la barre du haut. 

Etape 14 : POSITION BUTTON

Positionbutton

Function position_button,

Permet de définir la position de chaque boutons. 

Etape 15 :

Pleinecran

Function pleinEcran,

Comme son nom l'indique la fonction permet de mettre en plein écran. 

Etape 16 : ÉTOILE

Etoile

Function etoile,

Permet de créer, de définir la taille ainsi que le mouvement de l'étoile.

Etape 17 : DRAW VIDEO

Drawvideo

Function drawVideo,

Permet d'intégrer les étoiles à l'arrière plan.

Sources:

COSMOTRON < Source GitHub avec le code en entier. 


Vous aimez ce tutoriel ?


Soyez le premier à poster un commentaire pour COSMOTRON


Recevez une fois par mois les meilleurs tutoriels Technologie dans votre boîte mail




S'inscrire:


  • Vues: 103
  • J'aime: 0