• Mise en ligne sur votre nom de domaine, avec comme nomenclature https://nom-de-domaine.extension/creative-coding
• Ajouter dans le fichier url_projet.txt l'url vers votre projet
• Fournir au minimum 3 exports au format A4 et A3
• Remise au plus tard le ?? janvier avant minuit
• Remise sur le dossier sharepoint (en attente de la création du dossier)
• Pas de dossier compressé

• Respect des consignes
• Utilisation des concepts vus aux cours
• Lisibilité du code
• Performance (surtout si animation/3d)
• Créativité et originalité
• Prise de risque

Poster

J'ai prévu un template qui permet d'exporter votre code au format A4/A3, en vue de les imprimer.

Contexte

La première chose à faire est de choisir votre context, 2d ou 3d et d'activer dans le fichier index.html la balise script correspondante :

• 2d : ./js/main-2d.js
• 3d : ./js/main-3d.js

⚠️ Vous ne modifiez aucun autre fichier que l'index.html et les fichiers main-2d.js / main-3d.js.

Imports

Vous verrez dans ces 2 fichiers des imports, qui donne accès aux fonctions qu'on a déjà utilisé pendant les cours ( rand, getRandomItem, clamp, shuffleArray ) et à certaines librairies comme Tweakpane, Chroma.js et Three.js.

Variables

Dans ces 2 fichiers vous trouverez une section variables & options, où on défini les constantes width et height qui sont liés à la taille de votre canvas.

Une variable scene existe pour ceux qui se lancent dans un canvas 3d, ça vous évitera des maux de têtes.

N'oubliez pas de modifier les propriétés firstname, lastname et projectTitle dans la variable options.

Tweakpane

Une section Tweakpane est à votre disposition avec des exemples et une constante values qui n'attend que d'être remplie de données à modifier.

Custom settings

C'est dans cette section du code que vous placerez vos classes, fonctions, autres variables, etc. nécessaires au bon fonctionnement de votre jeu de particules.

J'ai déjà placé une classe Particle et une boucle qui appele le constructor. Dans la version 3d vous trouverez une fonction populate qui s'occupe de créer un cube et de l'insérer dans votre scene.

Draw

C'est ici que vous allez écrire votre logique de dessin, dans la fonction draw. À l'intérieur de cette fonction, vous avez accès à une variable canvasOptions qui contient des informations qui dépende de votre contexte (2d ou 3d);

En 2d cela renvoit le contexte, la largeur, la hauteur et le canvas.

En 3d cela est plus complexe. Vous aurez accès à scene, camera, renderer, et d'autres propriétés. N'hésitez pas à utiliser console.log( canvasOptions ) pour avoir une vue globale.

Animation

La section animation met en place une fonction qui peut être appelée avec requestAnimationFrame (ou raf). Votre logique d'animation se situera à cette endroit. Attention de ne pas modifier les 2 dernières lignes.

Par défaut la ligne permettant d'appeler l'animation est commentée. Plus d'information dans les slides suivantes.

Calls & events

Les section calls et events appellent les fonctions nécessaires. Vous n'avez rien à modifier ici sauf à décommenter/commenter la ligne suivante si vous avez des animations:

raf( animate );