Monster photographer

/*

 * Titre: EDM4600 Travail de mi-session: "création médias - médias interactifs"

 * Auteur: Samuel Favreau

 * Version: 2.0

 * Instructions: Vous devez prendre le monstre en photo.

                 Lorsque vous arrivez à prendre le monstre en photo, il se cachera sous l'eau et changera de position.

 * Notes: La taille, la couleurs, le nombre de fenêtre présente et le nombre de fenêtre allumé sur les batiments sont décidés aléatoirement à l'ouverture du programme.

          La couleur du ciel et la position du soleil et de la lune sont décider en lien avec l'heure indiqué sur votre machine (Le soleil est à 12h lorsqu'il est 12h).

 */

​

//Création des variables globales

//Variables de l'eau

let couleurEau;

//Variables du ciel

let cielJour;

let cielNuit;

let positionAstre = 350;

//Variables des batiments

let largeurBatiment;

let espaceBatiment = 6;

let nombreBatiments = 31;

let tailleBatiments = [];

let couleurBatiments = [];

let fenetreOuverte = [];

//Variables des nuages

let nombreNuages;

let positionXNuages = [];

let positionYNuages = [];

let vitesseNuages = [];

let augmentationNuages = [];

let tailleNuage = [];

let nuageJour;

let nuageNuit;

let couleurNuages;

//Variables du monstre

let teteX;

let teteY;

let vitesse = 0;

let bas = 0;

let descend = false;

let monte = false;

let posXmonstre;

let posYmonstre;

let tailleMonstre;

let distanceMonstreX;

let distanceMonstreY;

let directionMonstre = 1;

let choixDirection;

//Variables de la caméra

let largeurEcran;

let hauteurEcran;

let photos;

let canvas;

let timerVisible = 255;

​

/*--------------------------------------------------------------------------------------------------------------------------

                                                         Setup

---------------------------------------------------------------------------------------------------------------------------*/

​

function setup() {

  //Taille du canvas

  canvas = createCanvas(1280, 720);

  noCursor();

​

  //------------------------------------------------------------ Décor -----------------------------------------------------------

​

  nombreNuages = Math.round(random(3, 10));

  choixDirection = random(2);

​

  couleurEau = color('#1659DB');

  cielJour = color('#98BBFF');

  cielNuit = color('#001267');

  nuageJour = color('#FFFFFF');

  nuageNuit = color('#84848E');

​

​

  //Création de la largeur et de la hauteur des 30 batiments

  largeurBatiment = width / 30;

  for (let i = 0; i < nombreBatiments; i++) {

    tailleBatiments[i] = Math.round(random(100, 300));

  }

​

  //Création de la couleur des 30 batiments

  for (let i = 0; i < nombreBatiments; i++) {

    couleurBatiments[i] = Math.round(random(50, 100));

  }

​

  //Choix des fenêtres ouvertes et fermées

  for (let i = 0; i < nombreBatiments * 14; i++) {

    fenetreOuverte[i] = Math.floor(random(0, 2));

  }

​

  //Création de la vitesse et de la position des nuages

  for (let i = 0; i < nombreNuages; i++) {

    tailleNuage[i] = random(80, 150);

    positionXNuages[i] = Math.round(random(0, width));

    positionYNuages[i] = Math.round(random(tailleNuage[i], height / 4));

    vitesseNuages[i] = 0;

    augmentationNuages[i] = random(0.1, 0.8);

  }

​

  //------------------------------------------------------------ Monstre -----------------------------------------------------------

​

  //Position initiale du monstre

  posYmonstre = random(height / 2, height);

  tailleMonstre = map(posYmonstre, height / 2, height, 50, 200);

  posXmonstre = random(tailleMonstre / 2, width);

​

  //------------------------------------------------------------ Caméra -----------------------------------------------------------

​

  //Création des variables de la caméra

  largeurEcran = width / 2;

  hauteurEcran = height / 2;

}

​

/*--------------------------------------------------------------------------------------------------------------------------

                                                         Draw

---------------------------------------------------------------------------------------------------------------------------*/

​

function draw() {

​

  //------------------------------------------------------------- Décor ----------------------------------------------------------

​

  //Création des variable modifier par le temps de la journée.

  let s = second();

  let m = minute();

  let h = hour();

  let secondesJour = s + m * 60 + h * 3600;

  let NB_SECONDES_PAR_JOUR = 60 * 60 * 24;

  let num = (secondesJour * PI) / NB_SECONDES_PAR_JOUR;

  let angle = (secondesJour * 2 * PI) / NB_SECONDES_PAR_JOUR;

​

  //Création des variables du ciel

  let sinus = abs(sin(num));

  let couleurCiel = lerpColor(cielNuit, cielJour, sinus);

  couleurNuages = lerpColor(nuageNuit, nuageJour, sinus);

​

  //Couleur du décor

  background(couleurCiel);

​

  //Création du cycle jour nuit

  soleilLune(angle);

​

  //Création des nuages

  for (let i = 0; i < nombreNuages; i++) {

    //Augmentation de la vitesse

    vitesseNuages[i] += augmentationNuages[i];

    //Dessine un nuage

    nuage(positionXNuages[i] + vitesseNuages[i], positionYNuages[i], tailleNuage[i]);

​

    //Si le nuage se rend sur le côté droit de l'écran

    if (positionXNuages[i] + vitesseNuages[i] > width + tailleNuage[i]) {

      //Le nuage est mis du côté gauche

      vitesseNuages[i] = -positionXNuages[i] - tailleNuage[i];

    }

  }

​

  //Création des batiments

  for (let i = 0; i < nombreBatiments; i++) {

    //Dessine un batiment

    batiments(i * largeurBatiment, height / 2, largeurBatiment, tailleBatiments[Math.round(i)], couleurBatiments[Math.round(i)], i);

  }

​

  //Création de l'eau

  rectMode(CORNER);

  fill(couleurEau);

  rect(0, height / 2, width, height / 2);

​

  //------------------------------------------------------------ Monstre -----------------------------------------------------------

​

  //Décide la taille et pa position du monstre

  tailleMonstre = map(posYmonstre, height / 2, height, 50, 250);

  distanceMonstreX = dist(mouseX, 0, posXmonstre, 0);

  distanceMonstreY = dist(0, mouseY, 0, posYmonstre);

​

  push();

  //Positionne le monstre

  translate(posXmonstre, posYmonstre);

  //Modifie la direction du monstre

  scale(directionMonstre, 1);

  //Dessine le monstre

  monstre(0, 0, tailleMonstre);

  pop();

​

  //------------------------------------------------------------ Caméra -----------------------------------------------------------

​

  //Création de la vision de la caméra

  photoCamera();

​

  if (mouseX + width / 4 >= width - 20 - width / 11 && mouseY + height / 4 >= height - 20 - height / 11) {

    if (timerVisible > 0) {

      timerVisible -= 50;

    }

  } else {

    if (timerVisible < 255) {

      timerVisible += 50;

    }

  }

​

  if (photos != undefined) {

    tint(255, timerVisible);

    image(photos, width - width / 10 - 6, height - height / 10 - 6);

    noFill();

    stroke(255, timerVisible);

    strokeWeight(2);

    rect(width - width / 10 - 6, height - height / 10 - 6, Math.round(width / 11), Math.round(height / 11));

  }

}

​

/*--------------------------------------------------------------------------------------------------------------------------

                                                      Fonctions

---------------------------------------------------------------------------------------------------------------------------*/

​

//------------------------------------------------------------ Monstre -----------------------------------------------------------

​

//Création du monstre

function monstre(x, y, w) {

  //Variables du monstre

  let tailleCorps = 2 * w / 3;

  let tailleCoup = w / 3;

  let decalageCoup = tailleCorps / 2;

  let teteXdepart = x + tailleCoup + decalageCoup;

  let teteYdepart = y - decalageCoup + bas;

  teteX = teteXdepart + vitesse;

  teteY = teteYdepart + vitesse;

  let couleurMonstre = color('#2D4320');

​

  //Détecte si la caméra est sur le monstre et si le monstre n'est pas en mouvement

  if (mouseIsPressed && distanceMonstreX + w / 2 <= largeurEcran / 2 && distanceMonstreY - w / 2 <= hauteurEcran / 2 && descend == false && monte == false) {

    //Garde en mémoire que le monstre descend

    descend = true;

  }

  //Si le monstre est en train de descendre

  if (descend == true) {

    //Fait descendre la tête du monstre

    bas++;

    //Fait descendre le monstre

    vitesse++;

    //Si le monstre attelet sa position finale

    if (bas >= w / 2) {

      //Garde en mémoire que le monstre ne descend plus

      descend = false;

      //Garde en mémoire que le monstre monte

      monte = true;

      //Selectionne une nouvelle position au monstre

      posXmonstre = random(0, width);

      posYmonstre = random(height / 2, height);

      //Modifie la direction du monstre aléatoirement

      if (choixDirection >= 1) {

        directionMonstre = 1;

      }

      else {

        directionMonstre = -1;

      }

      choixDirection = random(2);

    }

  }

​

  //Si le monstre monte

  if (monte == true) {

    //Fait monter la tête du monstre

    bas--;

    //Fait monter le monstre

    vitesse--;

    //Si le monstre attelet sa position finale

    if (bas == 0) {

      //Garde en mémoire que le monstre ne monte plus

      monte = false;

    }

  }

​

  //Corps du monstre

  fill(couleurMonstre);

  noStroke();

  ellipse(x, y + bas, tailleCorps, tailleCorps / 2);

  //Coup du monstre

  stroke(couleurMonstre);

  strokeWeight(w / 5);

  noFill();

  bezier(x + decalageCoup, y + bas,

    x + tailleCoup + decalageCoup, y + bas,

    teteX - tailleCoup, teteY,

    teteX, teteY);

  //Oeil du monstre

  noStroke();

  fill(0);

  arc(teteX, teteY - w / 40, w / 10, w / 15, radians(10), radians(190));

  //Écailles du monstre

  noStroke();

  fill(0);

  monTriangle(x - tailleCorps / 3, y - tailleCorps / 4 + tailleCorps / 15 + bas, tailleCorps / 10, 330);

  monTriangle(x - tailleCorps / 5, y - tailleCorps / 4 + tailleCorps / 50 + bas, tailleCorps / 7, 345);

  monTriangle(x, y - tailleCorps / 4 + bas, tailleCorps / 5, 0);

  monTriangle(x + tailleCorps / 5, y - tailleCorps / 4 + tailleCorps / 50 + bas, tailleCorps / 7, 15);

  monTriangle(x + tailleCorps / 3, y - tailleCorps / 4 + tailleCorps / 15 + bas, tailleCorps / 10, 30);

​

  //Création de la cache

  rectMode(CORNER);

  noStroke();

  fill(couleurEau);

  rect(x - w, y, w * 5, height / 2);

}

​

function monTriangle(x, y, w, r) {

  //Création d'un triangle personalisable

  push();

  translate(x, y);

  rotate(radians(r));

  triangle(0, 0 - w, w / 2, 0, 0 - w / 2, 0);

  pop();

}

​

//------------------------------------------------------------ Décor -----------------------------------------------------------

​

//Création des batiments

function batiments(x, y, w, h, couleurBatiment, idBatiment) {

​

  //Créations des variables des batiments

  let espaceFenetre = 6;

  let tailleFenetre = (w / 2) - espaceFenetre;

​

  //Création des styles communs

  rectMode(CENTER);

  noStroke();

​

  //Création du batiment

  fill(couleurBatiment);

  rect(x, y, w, h);

​

  //Création des fenêtres

  for (let i = 0; i < h / 2 - tailleFenetre; i += tailleFenetre + espaceFenetre) {

    //Création des variables de couleurs

    let lumiereOuverte = color('#FFEA00');

    let lumiereFerme = color('#363636');

​

    //Si la valeur aléatoire attribué à la fenêtre de gauche est de 0

    if (fenetreOuverte[i + idBatiment] == 0) {

      //Ouvre la lumière

      fill(lumiereOuverte);

    }

    //Si la valeur aléatoire attribué à la fenêtre de gauche n'est de 0

    else {

      //Ferme la lumière

      fill(lumiereFerme);

    }

    //Dessine la fenêtre de gauche

    square(x - w / 4, y - tailleFenetre / 2 - i, tailleFenetre);

​

    //Si la valeur aléatoire attribué à la fenêtre de droite est de 0

    if (fenetreOuverte[i + 1 + idBatiment] == 0) {

      //Ouvre la lumière

      fill(lumiereOuverte);

    }

    //Si la valeur aléatoire attribué à la fenêtre de droite n'est de 0

    else {

      //Ferme la lumière

      fill(lumiereFerme);

    }

    //Dessine la fenêtre de droite

    square(x + w / 4, y - tailleFenetre / 2 - i, tailleFenetre);

  }

}

​

//Création du cycle jour nuit

function soleilLune(angle) {

  //Création des variables de la lune

  let x1 = width / 2 + sin(angle) * positionAstre;

  let y1 = height / 2 - cos(angle) * positionAstre;

  //Dessine la lune

  noStroke();

  fill(color('#D9DFFA'));

  circle(x1, y1, 100);

​

  //Création des variables du soleil

  let x2 = width / 2 - sin(angle) * positionAstre;

  let y2 = height / 2 + cos(angle) * positionAstre;

  //Dessine le soleil

  noStroke();

  fill(color('#FFD736'));

  circle(x2, y2, 100);

}

​

//Création d'un nuage

function nuage(x, y, w) {

  fill(couleurNuages);

  arc(x, y, w, w, PI, 2 * PI);

  arc(x - w / 2, y, w / 2, w / 2, PI, 2 * PI);

  arc(x + w / 2, y, w / 3, w / 3, PI, 2 * PI);

}

​

//------------------------------------------------------------ Caméra -----------------------------------------------------------

​

//Création de la vision de la caméra

function photoCamera() {

  //Création des variables de la caméra

  let largeurEcran = width / 2;

  let hauteurEcran = height / 2;

  let positionEcranX = mouseX;

  let positionEcranY = mouseY;

  let coinsDecal = 10;

  let largeurTraits = 3;

  let hauteurTraits = 50;

  let largeurCurseur = 100;

​

  //Si la souris est cliqué

  if (mouseIsPressed) {

    //Afficher l'effet de flash

    fill(255);

    rect(0, 0, width, height);

  }

​

  //Création des contours noir autour de l'objectif

  rectMode(CORNER);

  fill(0);

  noStroke();

  rect(0, 0, positionEcranX - largeurEcran / 2, height);

  rect(0, 0, width, positionEcranY - hauteurEcran / 2);

  rect(positionEcranX + largeurEcran / 2, 0, width - positionEcranX + largeurEcran / 2, height);

  rect(0, positionEcranY + hauteurEcran / 2, width, height - positionEcranY + hauteurEcran / 2);

​

  //Création du curseur de l'objectif

  rectMode(CENTER);

  noFill();

  stroke(255);

  strokeWeight(largeurTraits);

  rect(positionEcranX, positionEcranY, largeurCurseur, largeurCurseur * 0.6);

  circle(positionEcranX, positionEcranY, largeurCurseur * 0.3);

​

  //Création des quatres coins de l'écran

  rectMode(CORNER);

  fill(255);

  noStroke();

  //Haut gauche

  rect(positionEcranX - largeurEcran / 2 + coinsDecal, positionEcranY - hauteurEcran / 2 + coinsDecal, largeurTraits, hauteurTraits);

  rect(positionEcranX - largeurEcran / 2 + coinsDecal, positionEcranY - hauteurEcran / 2 + coinsDecal, hauteurTraits, largeurTraits);

  //Bas gauche

  rect(positionEcranX - largeurEcran / 2 + coinsDecal, positionEcranY + hauteurEcran / 2 - coinsDecal - hauteurTraits, largeurTraits, hauteurTraits);

  rect(positionEcranX - largeurEcran / 2 + coinsDecal, positionEcranY + hauteurEcran / 2 - coinsDecal - largeurTraits, hauteurTraits, largeurTraits);

  //Haut droit

  rect(positionEcranX + largeurEcran / 2 - coinsDecal - largeurTraits, positionEcranY - hauteurEcran / 2 + coinsDecal, largeurTraits, hauteurTraits);

  rect(positionEcranX + largeurEcran / 2 - coinsDecal - hauteurTraits, positionEcranY - hauteurEcran / 2 + coinsDecal, hauteurTraits, largeurTraits);

  //Bas droit

  rect(positionEcranX + largeurEcran / 2 - coinsDecal - largeurTraits, positionEcranY + hauteurEcran / 2 - coinsDecal - hauteurTraits, largeurTraits, hauteurTraits);

  rect(positionEcranX + largeurEcran / 2 - coinsDecal - hauteurTraits, positionEcranY + hauteurEcran / 2 - coinsDecal - largeurTraits, hauteurTraits, largeurTraits);

}

​

​

function mousePressed() {

  photos = createGraphics(width / 10, height / 10);

  photos.copy(canvas, mouseX - Math.round(width / 4), Math.round(mouseY - height / 4), width / 2, height / 2, 0, 0, Math.round(width / 11), Math.round(height / 11));

}