Différences

Ci-dessous, les différences entre deux révisions de la page.

--- wiki:projets:crowd [2019/05/21 19:57]
daphne [Code]
+++ wiki:projets:crowd [2020/10/05 14:39] (Version actuelle)
@@ Ligne 2: / Ligne 2: @@
-**Daphné Chamot-Rooke** (contact : [[daphne.chamot-rooke@etu.upmc.fr|daphne.chamot-rooke@etu.upmc.fr]])\\
+  **Daphné Chamot-Rooke** (contact : [[daphne.chamot-rooke@etu.upmc.fr|daphne.chamot-rooke@etu.upmc.fr]])\\
-**Himany Seri** (contact : [[himany.seri@etu.upmc.fr|himany.seri@etu.upmc.fr]])
+  **Himany Seri** (contact : [[himany.seri@etu.upmc.fr|himany.seri@etu.upmc.fr]])
 Début : Février 2019\\
 Fin : mai 2019
-**Objectif :** créer un dispositif qui modifie la perception d'autrui
+  **Objectif :** créer un dispositif qui modifie la perception d'autrui
-**Matériel :**
+  **Matériel :**
   * plusieurs PC avec souris
   * une connexion internet
-  * logiciel Processing installé
+  * Javascript, Node.js, P5.js
+  * un serveur avec node js
 ===== Cahier des charges =====
@@ Ligne 25: / Ligne 27: @@
 ==== Description et évolution du projet ====
-Nous avions d'abord pensé à travailler sur les émotions, les émotions dans la foule. Nous avions eu l'idée d'un bracelet retranscrivant l'émotion globale de la foule. Puis nous nous sommes orientées vers des applications, car cela nous semblait plus réalisable pour travailler avec de nombreuses personnes. Nous avons choisi de créer un programme pour ordinateur, un jeu multijoueur qui permettrait de retranscrire des mouvements de foule. \\
+Nous avions d'abord pensé à travailler sur les émotions, les émotions dans la foule. Nous avions eu l'idée d'un bracelet retranscrivant l'émotion globale de la foule. Puis nous nous sommes orientées vers des applications, car cela nous semblait plus réalisable pour travailler avec de nombreuses personnes.
+La deuxième idée que nous avons eue sur la foule était de créer une application qui nous permettait de cartographier la densité de personnes se trouvant à un endroit. Si dans le lieu ou l’on se trouve la densité de personnes est plus importante à droite alors les feuilles sont plus denses sur la partie droite. Chaque feuille représentait un groupe de quatre personnes, et en fonction des mouvements des gens les feuilles bougeraient.
+{{:wiki:projets:foule2.png?600|}}
+Nous avons choisi de créer un programme pour ordinateur car sur smartphone se posait un problème : le joueur joue avec son doigt et de ce fait ne rencontre aucun obstacle. Il peut très bien passer par-dessus un autre joueur pour le devancer. Le professeur Charles Lenay nous a alors fait remarquer qu’il était difficile voire impossible de créer des obstructions alors qu’avec une souris cela était possible. Nous avons alors choisi de créer un programme pour ordinateur, qui est un jeu multijoueur qui permet de retranscrire des mouvements de foule.  \\
 Notre jeu se compose d'un avatar représentant soi-même à la 3e personne, vu du dessus. Un "monstre" invisible "mange" les avatars lorsqu'il croise leur chemin. Il faut donc faire attention à son entourage, suivre les autres. \\
 Nous voulons faire plusieurs "salles" avec plusieurs consignes, peut-être en faire une où l'on se voit à la première personne, et une autre avec des consignes différentes pour chaque individu afin de créer un tout avec l'action de chaque individu.
+{{:wiki:projets:foule.png?600|}}
 ==== Expression fonctionnelle du besoin ====
@@ Ligne 42: / Ligne 54: @@
 ==== Veille des dispositifs ====
+Il existe de nombreux programmes pour simuler l'émergence de comportements et de structures chez les animaux. Par exemple, "Boids", qui simule les regroupements des oiseaux selon trois critères :
+    * la cohésion : pour former un groupe, les boids se rapprochent les uns des autres ;
+    * la séparation : deux boids ne peuvent pas se trouver au même endroit au même moment ;
+    * l'alignement : pour rester groupés, les boids essayent de suivre un même chemin.
+{{:wiki:projets:boids.png?600|}}
+[[https://jumpoff.io/blog/implementing-boids-in-javascript-canvas|Boids]]
+Dans le même genre, il y a par exemple la synchronisation des lucioles.
+{{:wiki:projets:fireflies.png?600|}}
+[[https://ncase.me/fireflies/|Fireflies]]
+Humanity est un jeu imaginé par le collectif japonais Tha Ltd, il s’agit d’un jeu de réflexion à mi-chemin entre la simulation de foule et l’expérience SF qui met en scène une foule aveugle qui fonce droit devant sans s’arrêter. Chaque niveau comporte des obstacles, des pièges, et autres difficultés. Le but est de sauver le plus d’êtres humains possible à chaque niveau.
+ Pour le moment, on sait simplement qu’"Humanity" est prévu pour 2018.
+{{:wiki:projets:humanity.jpg?600|}}
+Liens pour voir le jeu :
+[[http://www.tic-time.fr/article/humanity-le-jeu-qui-vous-permet-de-controler-la-foule_a23057/1|Humanity]]
+[[http://tha.jp/7714|Humanity WIP]]
+Crowd city\\
+Le but du jeu est de vous déplacer pour recruter de nouveaux membres et former une foule. Lorsque vous croisez un autre joueur, si vous avez plus de bonhommes que lui, foncez-lui dessus. Sinon, fuyez.
+{{:wiki:projets:crowdcity.png?600|}}
+Source : [[https://jeuxvideomobile.com/iphone/crowd-city-iphone.html|Crowd City]]
 ==== Veille graphique ====
@@ Ligne 59: / Ligne 104: @@
 {{:wiki:projets:cong3.png?600|}}
+===== Posters =====
+{{:wiki:projets:postercrowd1.png?800|}}
+{{:wiki:projets:postercrowd2.png?800|}}
+{{:wiki:projets:postercrowd3.png?800|}}
 ===== Réalisation =====
+==== Aspects techniques ====
+Nous avons installé [[https://nodejs.org/fr/|Node.js]] pour permettre de se connecter à plusieurs sur le même serveur.\\
+On suit ensuite les instructions de [[https://socket.io/|Socket.io]]. On doit créer un package.json, un serveur en javascript, et un code client en javascript et un index en html dans un dossier public. \\
+Nous avons été confrontées à plusieurs problèmes. En effet, nous avions commencé à coder en Java sur Processing, mais cela ne permet pas de créer un code multijoueur en ligne. Nous devions donc réecrire ce code en javascript en utilisant [[https://p5js.org/|P5.js]]. Il a été difficile de comprendre le fonctionnement des sockets et les échanges entre le client et le serveur. Ensuite se posait la question de l'hébergement car il faut un serveur qui prend en compte le node js, qui coûte plus cher qu'un site basique. Finalement, nous serons hébergées provisoirement par une âme charitable.\\
+C'est par les limites de notre savoir informatique que nous avons simplifié au maximum notre jeu mais les bases sont posées pour complexifier le principe.
 ==== Code ====
@@ Ligne 68: / Ligne 124: @@
 //this code is based on https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_032.2_agar.io_sockets/Node
-var blobs = [];					//liste pour stocker les blobs
+var blobs = []; //liste pour stocker les blobs
-function Blob(id, x, y) {		//définit l'objet blob
+function Blob(id, x, y, vx, vy) {
+  //définit l'objet blob
   this.id = id;
   this.x = x;
   this.y = y;
+  this.vx = vx;
+  this.vy = vy;
 }
-var monstres = [];				//liste pour stocker les monstres
+var monstres = []; //liste pour stocker les monstres
-function Monster (xm, ym) {		//définit l'objet monstre
+function Monster(xm, ym) {
-    this.xm = xm;
+  //définit l'objet monstre
-	this.ym = ym;
+  this.xm = xm;
+  this.ym = ym;
 }
 // Using express: http://expressjs.com/
-var express = require('express');
+var express = require("express");
 // Create the app
 var app = express();
@@ Ligne 97: / Ligne 156: @@
   var host = server.address().address;
   var port = server.address().port;
-  console.log('Example app listening at http://' + host + ':' + port);
+  console.log("Example app listening at http://" + host + ":" + port);
 }
-app.use(express.static('public'));
+app.use(express.static("public"));
 // WebSocket Portion
 // WebSockets work with the HTTP server
-var io = require('socket.io')(server);
+var io = require("socket.io")(server);
 setInterval(heartbeat, 33);
 function heartbeat() {
-	io.sockets.emit('heartbeat_blobs', blobs);
+  io.sockets.emit("heartbeat_blobs", blobs);
-	io.sockets.emit('heartbeat_monstre', monstres);
+  io.sockets.emit("heartbeat_monstre", monstres);
 }
 // Register a callback function to run when we have an individual connection
 // This is run for each individual user that connects
-io.sockets.on('connection',
+io.sockets.on(
+  "connection",
   // We are given a websocket object in our function
   function(socket) {
     console.log("We have a new client: " + socket.id);
-    socket.on('start_blobs',
+    socket.on("start_blobs", function(data) {
-      function(data) {
+      console.log(socket.id + " " + data.x + " " + data.y);
-        console.log(socket.id + " " + data.x + " " + data.y);
+      socket.broadcast.emit("start_blobs", data);
-		socket.broadcast.emit('start_blobs', data);
+      var blob = new Blob(socket.id, data.x, data.y, data.vx, data.vy);
-        var blob = new Blob(socket.id, data.x, data.y);
+      blobs.push(blob);
-        blobs.push(blob);
+    });
-	  }
-	);
-	socket.on('start_monstres',
-      function(datam) {
-        console.log(datam.xm + " " + datam.ym);
-		socket.broadcast.emit('start_monstres', datam);
-        var monstre = new Monster(datam.xm, datam.ym);
-        monstres.push(monstre);
-	  }
-	);
-    socket.on('update',
+    socket.on("start_monstres", function(datam) {
-      function(data) {
+      console.log(datam.xm + " " + datam.ym);
-		//console.log(blobs);
+      socket.broadcast.emit("start_monstres", datam);
-        for (var i = 0; i < blobs.length; i++) {
+      var monstre = new Monster(datam.xm, datam.ym);
-          if (socket.id == blobs[i].id) {
+      monstres.push(monstre);
-			//console.log(blobs[i].id);
+    });
-			blobs[i].x = data.x;
-			blobs[i].y = data.y;
+    socket.on("update", function(data) {
-          }
+      //console.log(blobs);
-		}
+      for (var i = 0; i < blobs.length; i++) {
+        if (socket.id == blobs[i].id) {
+          //console.log(blobs[i].id);
+          blobs[i].x = data.x;
+          blobs[i].y = data.y;
+        }
       }
-    );
+    });
-	socket.on('move',
+    socket.on("collide", function(data) {
-      function(datam) {
+      //console.log(blobs);
-		//console.log(blobs);
+      for (var i = 0; i < blobs.length; i++) {
-        for (var i = 0; i < monstres.length; i++) {
+        if (socket.id == blobs[i].id) {
-			monstres[i].xm = datam.xm;
+          //console.log(blobs[i].id);
-			monstres[i].ym = datam.ym;
+          blobs[i].vx = data.vx;
-		}
+          blobs[i].vy = data.vy;
+        }
       }
-    );
+    });
-	socket.on('eaten', function (data) {
-            // remove the eaten blob
-            // set array of blobs excluding the eaten blob
-            var eaten = {
+    socket.on("move", function(datam) {
-                id: ''
+      //console.log(blobs);
-            };
+      for (var i = 0; i < monstres.length; i++) {
+        monstres[i].xm = datam.xm;
-			var newblob = blobs.filter(function( blobs ) {
+        monstres[i].ym = datam.ym;
-                if (blobs.id === data.eatenId) {
+      }
-                    eaten.id = blobs.id;
+    });
-                }
-                return blobs.id !== data.eatenId;
+    socket.on("eaten", function(data) {
-            });
+      // remove the eaten blob
-			blobs = newblob;
+      // set array of blobs excluding the eaten blob
-            io.sockets.emit('', blobs);
+      var eaten = {
-	});
+        id: ""
+      };
-	socket.on('disconnect', function() {
-        console.log("Client has disconnected" + " " + socket.id);
+      var newblob = blobs.filter(function(blobs) {
-            blobs = blobs.filter(function( blobs ) {
+        if (blobs.id === data.eatenId) {
-                return blobs.id !== socket.id;
+          eaten.id = blobs.id;
-            });
+        }
-        });
-    }
+        return blobs.id !== data.eatenId;
+      });
+      blobs = newblob;
+      io.sockets.emit("", blobs);
+    });
+    socket.on("disconnect", function() {
+      console.log("Client has disconnected" + " " + socket.id);
+      blobs = blobs.filter(function(blobs) {
+        return blobs.id !== socket.id;
+      });
+    });
+  }
 );
@@ Ligne 200: / Ligne 260: @@
 //déclaration de variables
 var socket;
-var blob;           //personnage
+var blob; //personnage
-var blobs = [];		//liste de blobs
+var blobs = []; //liste de blobs
-var monstres = [];
+var monstres = []; //liste de monstres
-var monstre;        //monstre
+var monstre; //monstre
-var timer;			//bool pour le timer
+var timer; //bool pour le timer
-var jeu = false;    //bool pour le jeu
+var jeu = false; //bool pour le jeu
-var intro = true;   //bool pour l'intro
+var intro = true; //bool pour l'intro
-const radius = 30;     //rayon du monstre
+const radius = 30; //rayon du monstre
 var alive = true;
+let spring = 0.05;
 function setup() {
+  createCanvas(900, 600);
-    createCanvas(900, 600);
+  if (alive) {
-	if (alive) {
+    socket = io.connect("http://localhost:3000");
-		socket = io.connect('http://localhost:3000');
+  }
-	}
+  //nouveaux blob, monstre et timer
-	//nouveaux blob, monstre et timer
+  timer = new Timer();
-    timer = new Timer();
+  blob = new Blob(random(width), random(height));
-    blob = new Blob(random(width), random(height));
+  monstre = new Monster(random(width), random(height));
-	monstre = new Monster(random(width), random(height));
+  //data pour la position du blob
-	//data pour la position du blob
+  var data = {
-	var data = {
+    x: blob.pos.x,
-		x: blob.pos.x,
+    y: blob.pos.y,
-		y: blob.pos.y,
+    vx: blob.vel.x,
-	};
+    vy: blob.vel.y
+  };
-	//data pour la position du monstre
-	var datam = {
+  //data pour la position du monstre
-		xm: monstre.pos.x,
+  var datam = {
-		ym: monstre.pos.y,
+    xm: monstre.pos.x,
-	};
+    ym: monstre.pos.y
+  };
+  socket.emit("start_blobs", data); //partage les data
+  socket.emit("start_monstres", datam);
+  alive = true;
+  socket.on("heartbeat_blobs", function(data) {
+    var stillAlive = false;
+    for (var i = 0; i < data.length; i++) {
+      if (socket.id == data[i].id) {
+        stillAlive = true;
+      }
+    }
+    alive = stillAlive;
+    blobs = data;
+  });
-	socket.emit('start_blobs', data);			//partage les data
+  socket.on("heartbeat_monstre", function(datam) {
-	socket.emit('start_monstres', datam);
+    monstres = datam;
-	alive = true;
+  });
-	socket.on('heartbeat_blobs',
-		function(data) {
-		var stillAlive = false;
-		for (var i = 0; i < data.length; i++) {
-            if (socket.id == data[i].id) {
-                stillAlive = true;
-                //console.log('heart beat');
-            }
-		}
-		//console.log(data);
-		alive = stillAlive;
-		blobs = data;
-		});
-	socket.on('heartbeat_monstre',
-	function(datam) {
-		monstres = datam;
-		});
 }
 function draw() {
-    background(0);              //fond noir, taille du texte 30 et écrit en blanc
+  background(0); //fond noir, taille du texte 30 et écrit en blanc
-    textSize(30);
+  textSize(30);
-    fill(255);
+  fill(255);
-    a=timer.minute();
+  a = timer.minute();
-    b=timer.second();
+  b = timer.second();
-    temps = a + ":" + b;        //on stocke les secondes et les minutes dans un string
+  temps = a + ":" + b; //on stocke les secondes et les minutes dans un string
-    if (socket.connected && alive && jeu) {
+  if (socket.connected && alive && jeu) {
-        timer.stop();                   //démarre le timer
+    timer.stop(); //démarre le timer
-		//	if (isNaN(blob.pos.x) || isNaN(blob.pos.y)) {
+    blob.show(); //dessine le blob
-		//        alive = false;
+    blob.update();
-		//  }
+    monstre.deflect(); //empêche que le monstre sorte des bords
-		blob.show();                    //dessine le blob
+    monstre.move(); //le monstre bouge
-		//if(b%5==0) {
+    score = temps;
-		//monstre.show();      //dessine le monstre de temps en temps
+    text(temps, width / 2 - 40, 50); //affiche le temps en haut de l'écran
-		//}
-		blob.update();
-		monstre.deflect();              //empêche que le monstre sorte des bords
-		monstre.move();                 //le monstre bouge
-		for (var i = blobs.length - 1; i >=0; i--) {
-			if (socket.id !== blobs[i].id) {
-				fill(255);
-				circle(blobs[i].x, blobs[i].y, 20);
-			} else {
-				var newblob = new Blob(blobs[i].x, blobs[i].y, 20);
-				if (mange(newblob)) {
-					var data = {
-						eatenId: blobs[i].id
-					};
-				socket.emit('eaten', data);
-				}
-			}
-		}
-		for (var i = monstres.length - 1; i >=0; i--) {
-			fill(blob.c);
-			//noFill();
-			circle(monstres[i].xm, monstres[i].ym, radius*2)
-		}
-        //jeu = mange(blob);                  //mange le blob si ils se rencontrent
-		score = temps;
-        text(temps, width/2 - 40, 50);  //affiche le temps en haut de l'écran
-		 var data = {
-			x: blob.pos.x,
-			y: blob.pos.y,
-		};
-		 var datam = {
+    for (var i = blobs.length - 1; i >= 0; i--) {
-			xm: monstre.pos.x,
+      blob.collide(blobs[i]);
-			ym: monstre.pos.y,
+      if (socket.id !== blobs[i].id) {
-		};
-		socket.emit('update', data);
-		socket.emit('move', datam);
-    } if (!jeu) {
-        timer.start();
         fill(255);
         stroke(255);
-        textSize(50);
+        circle(blobs[i].x, blobs[i].y, 20);
+      } else {
-        if (intro) {
+        var newblob = new Blob(blobs[i].x, blobs[i].y, 20);
-            //si c'est l'intro : titre du jeu et démarrer
+        if (mange(newblob)) {
-            text("Foule", width/2 - 70, height/2 - 100);
+          var data = {
-            text("Cliquer pour jouer", width/2 - 200, height/2);
+            eatenId: blobs[i].id
-        } else {
+          };
-            //si c'est la fin du jeu : Game Over et le temps final s'affichent
+          socket.emit("eaten", data);
-            text("Game Over", width/2 - 140, height/2 - 100);
-            text("Score : " + score, width/2 - 150, height/2);
-			text("Appuyer sur F5 pour redémarrer", width/20, height/2 + 100);
         }
+      }
     }
-}
-function reset() {          //quand c'est la fin du jeu, permet de redémarrer une partie juste en cliquant
+    for (var i = monstres.length - 1; i >= 0; i--) {
-	console.log('allez');
+      noFill();
-    alive=true;
+      noStroke();
-	stillAlive=true;
+      circle(monstres[i].xm, monstres[i].ym, radius * 2);
-	jeu = true;
+    }
-    //blob = new Blob(random(width), random(height));
-    //monstre = new Monster(random(radius,width-radius),random(radius,height-radius));
+    var data = {
-    timer.stop();   //redémarre le timer à 0
+      x: blob.pos.x,
-}
+      y: blob.pos.y,
+      vx: blob.vel.x,
+      vy: blob.vel.y
+    };
+    var datam = {
+      xm: monstre.pos.x,
+      ym: monstre.pos.y
+    };
+    socket.emit("update", data);
+    socket.emit("collide", data);
+    socket.emit("move", datam);
+  }
+  if (!jeu) {
+    timer.start();
+    fill(255);
+    stroke(255);
+    textSize(50);
-function mousePressed() {   //on passe l'intro et la fin du jeu en cliquant
+    if (intro) {
-    intro=false;
+      //si c'est l'intro : titre du jeu et démarrer
-	alive = true;
+      text("Foule", width / 2 - 70, height / 2 - 100);
-    if (jeu==false) {
+      text("Cliquer pour jouer", width / 2 - 200, height / 2);
-        reset();
+    } else {
+      //si c'est la fin du jeu : Game Over et le temps final s'affichent
+      text("Game Over", width / 2 - 140, height / 2 - 100);
+      text("Score : " + score, width / 2 - 150, height / 2);
+      text("Appuyer sur F5 pour redémarrer", width / 20, height / 2 + 100);
     }
+  }
 }
+function reset() {
+  //quand c'est la fin du jeu, permet de redémarrer une partie juste en cliquant
+  console.log("allez");
+  alive = true;
+  stillAlive = true;
+  jeu = true;
+  timer.stop(); //redémarre le timer à 0
+}
+function mousePressed() {
+  //on passe l'intro et la fin du jeu en cliquant
+  intro = false;
+  alive = true;
+  if (jeu == false) {
+    reset();
+  }
+}
-// Classe Blob
+//Classe Blob
 class Blob {
-	constructor(x,y) {
+  constructor(x, y) {
-		this.pos = createVector(x, y);
+    this.pos = createVector(x, y);
-		this.vel = createVector(0, 0);
+    this.vel = createVector(0, 0);
-		this.acc = createVector(0, 0);
+    this.acc = createVector(0, 0);
-		this.topspeed = 2;
+    this.topspeed = 2;
-		this.r = 20;
+    this.r = 20;
-		this.c = color(int (50 + Math.random() * (220 - 50)), int (50 + Math.random() * (220 - 50)), int (50 + Math.random() * (220 - 50)));
+    this.c = color(
-      													//couleur ni trop sombre ni trop claire
+      int(50 + Math.random() * (220 - 50)),
-	}
+      int(50 + Math.random() * (220 - 50)),
-    update () {
+      int(50 + Math.random() * (220 - 50))
-        this.mouse = createVector(mouseX, mouseY);      //position du curseur
+    );
-        this.acc.add(this.mouse);
+    //couleur ni trop sombre ni trop claire
-        this.acc.sub(this.pos);
+  }
-        this.acc.setMag(0.2);                           //on définit le vecteur accélération
-        this.vel.add(this.acc);                         //on ajoute l'accélération au vecteur vitesse
+  collide(other) {
-        this.mouse.sub(this.pos);                       //
+    let dx = other.x - this.pos.x;
-        this.mouse.setMag(7);                           //magnitude force de rappel du blob vers le curseur
+    let dy = other.y - this.pos.y;
-        this.pos.add(this.mouse);                       //on ajoute à la position courante
+    let distance = sqrt(dx * dx + dy * dy);
-		this.vel.limit(this.topspeed);                  //valeur limite à la vitesse
-        this.pos.add(this.vel);                         //on ajoute la vitesse au vecteur position
-        this.pos.x=Math.min(this.pos.x,width-10);       //gestion des coins de la boite
-        this.pos.x=Math.max(this.pos.x,10);
-        this.pos.y=Math.min(this.pos.y,height-10);
-        this.pos.y=Math.max(this.pos.y,10);
+    if (distance < this.r / 2) {
+      let angle = atan2(dy, dx);
+      let targetX = this.pos.x + (cos(angle) * this.r) / 2;
+      let targetY = this.pos.y + (sin(angle) * this.r) / 2;
+      let ax = (targetX - other.x) * spring;
+      let ay = (targetY - other.y) * spring;
+      this.vel.x -= ax;
+      this.vel.y -= ay;
+      other.vx += ax;
+      other.vy += ay;
     }
+  }
-    show () {          //dessine le blob
-        fill(this.c);
-        stroke(this.c);
-        circle(this.pos.x, this.pos.y, this.r);
-    }
-}
-//  Classe Monster
+  update() {
+    this.mouse = createVector(mouseX, mouseY); //position du curseur
+    this.acc.add(this.mouse);
+    this.acc.sub(this.pos);
+    this.acc.setMag(0.2); //on définit le vecteur accélération
+    this.vel.add(this.acc); //on ajoute l'accélération au vecteur vitesse
+    this.mouse.sub(this.pos); //
+    this.mouse.setMag(7); //magnitude force de rappel du blob vers le curseur
+    this.pos.add(this.mouse); //on ajoute à la position courante
+    this.vel.limit(this.topspeed); //valeur limite à la vitesse
+    this.pos.add(this.vel); //on ajoute la vitesse au vecteur position
+    this.pos.x = Math.min(this.pos.x, width - 10); //gestion des coins de la boite
+    this.pos.x = Math.max(this.pos.x, 10);
+    this.pos.y = Math.min(this.pos.y, height - 10);
+    this.pos.y = Math.max(this.pos.y, 10);
+  }
+  show() {
+    //dessine le blob
+    fill(this.c);
+    stroke(this.c);
+    circle(this.pos.x, this.pos.y, this.r);
+  }
+}
+//Classe Monster
 class Monster {
-    constructor(x, y) {
+  constructor(x, y) {
-        this.pos = createVector(x, y);
+    this.pos = createVector(x, y);
-        this.vel = createVector(random(2,4),random(2,4));
+    this.vel = createVector(random(2, 4), random(2, 4));
-        if (int(random(0, 2)) == 1) {
+    if (int(random(0, 2)) == 1) {
-            this.vel.x *= -1;
+      this.vel.x *= -1;
-        }
-        if (int(random(0, 2)) == 1) {
-            this.vel.y *= -1;
-        }
     }
+    if (int(random(0, 2)) == 1) {
+      this.vel.y *= -1;
-    move () {        //permet au monstre de bouger (à vitesse constante si epsi=0,0)
-        this.epsi = createVector(random(-1,1), random(-1,1)); // Exciter la vitesse pour mettre un peu de piment ...
-        this.vel.add(this.epsi);
-        this.pos.add(this.vel);
-		if(b%5==0) {
-			this.vel = createVector(random(2, 4), random(2, 4));
-			if (int(random(0, 2)) == 1) {
-				this.vel.x *= -1;
-			}
-			if (int(random(0, 2)) == 1) {
-				this.vel.y *= -1;
-			}
-		}
     }
+  }
-    /*show () {          //dessine le monstre
+  move() {
-        strokeWeight(1);
+    //permet au monstre de bouger (à vitesse constante si epsi=0,0)
-        noFill();
+    this.epsi = createVector(random(-1, 1), random(-1, 1)); // Exciter la vitesse
-        circle(this.pos.x, this.pos.y, radius*2);
+    this.vel.add(this.epsi);
-    }*/
+    this.pos.add(this.vel);
+    if (b % 5 == 0) {
-    deflect () {      //permet au monstre de ne pas sortir des bords, il "rebondit"
+      this.vel = createVector(random(2, 4), random(2, 4));
-        if (this.pos.x + radius > width || this.pos.x - radius < 0) {
+      if (int(random(0, 2)) == 1) {
         this.vel.x *= -1;
-		}
+      }
-		if (this.pos.y + radius > height || this.pos.y - radius < 0) {
+      if (int(random(0, 2)) == 1) {
-		this.vel.y *= -1;
+        this.vel.y *= -1;
-		}
+      }
+    }
+  }
+  //permet au monstre de ne pas sortir des bords, il "rebondit"
+  deflect() {
+    if (this.pos.x + radius > width || this.pos.x - radius < 0) {
+      this.vel.x *= -1;
+    }
+    if (this.pos.y + radius > height || this.pos.y - radius < 0) {
+      this.vel.y *= -1;
     }
+  }
 }
-mange = function(blob) {         //le monstre "mange" le blob s'ils se rencontrent et le jeu est fini
+//le monstre "mange" le blob s'ils se rencontrent et le jeu est fini
-    if (this.blob.pos.x <= monstre.pos.x + radius && this.blob.pos.x >= monstre.pos.x - radius && this.blob.pos.y <= monstre.pos.y + radius && this.blob.pos.y >= monstre.pos.y - radius) {
+mange = function(blob) {
-		jeu = false;
+	if (
-		return true;
+    this.blob.pos.x <= monstre.pos.x + radius &&
-    }
+    this.blob.pos.x >= monstre.pos.x - radius &&
-	return false;
+    this.blob.pos.y <= monstre.pos.y + radius &&
-}
+    this.blob.pos.y >= monstre.pos.y - radius
+  ) {
+    jeu = false;
+    return true;
+  }
+  return false;
+};
+//Classe Timer
+class Timer {
+  constructor() {
+    this.startTime = 0;
+    this.stopTime = 0;
+    this.running = false;
+  }
+  start() {
+    this.startTime = new Date();
+    this.running = true;
+  }
-//  Classe Timer
+  stop() {
+    this.stopTime = new Date();
+    this.running = false;
+  }
-class Timer {
+  getElapsedTime() {
-    constructor() {
+    if (this.running) {
-        this.startTime = 0;
+      this.elapsed = new Date() - this.startTime;
-        this.stopTime = 0;
+    } else {
-        this.running = false;
+      this.elapsed = this.stopTime - this.startTime;
     }
+    return this.elapsed;
-    start () {
+  }
-        this.startTime = new Date();
-        this.running = true;
+  second() {
+    this.sec = int((this.getElapsedTime() / 1000) % 60);
+    if (this.sec < 10) {
+      this.sec = "0" + this.sec;
+    } else {
+      this.sec = "" + this.sec;
     }
+    return this.sec;
-    stop () {
+  }
-        this.stopTime = new Date();
-        this.running = false;
+  minute() {
-    }
+    this.min = int((this.getElapsedTime() / (1000 * 60)) % 60);
+    if (this.min < 10) {
-    getElapsedTime () {
+      this.min = "0" + this.min;
-        if (this.running) {
+    } else {
-            this.elapsed = (new Date() - this.startTime);
+      this.min = "" + this.min;
-        } else {
-            this.elapsed = (this.stopTime - this.startTime);
-        }
-        return this.elapsed;
-    }
-    second () {
-        this.sec = int ((this.getElapsedTime() / 1000) % 60);
-        if (this.sec<10) {
-            this.sec="0" + this.sec;
-        } else {
-            this.sec="" + this.sec;
-        }
-        return this.sec;
-    }
-    minute () {
-        this.min = int ((this.getElapsedTime() / (1000*60)) % 60);
-        if (this.min<10) {
-            this.min="0" + this.min;
-        } else {
-            this.min="" + this.min;
-        }
-        return this.min;
     }
+    return this.min;
+  }
 }
 </code>
@@ Ligne 516: / Ligne 588: @@
 </html>
 </code>
+===== Expérimentation =====
+Nous avons testé notre [[http://demo.sld.ovh/|jeu]]. Nous avons réuni une dizaine de personnes afin de réaliser notre expérience.
+Nous avons rencontré certains problèmes, l’application buggue sur certains ordinateurs et smartphones et les utilisateurs sont obligés de rafraîchir la page de ce fait ils n’ont pas pu jouer correctement.
+Une seconde remarque nous a été faite : le manque d’explications (car ils n’avaient pas les posters devant eux). Pour résoudre ce problème nous avons décidé de rajouter un texte expliquant plus en détails ce que doivent faire les joueurs et pourquoi ils ont perdu.
+Certains joueurs se cachent dans les recoins pour éviter de se faire manger par le monstre on a alors l’impression que les chances de survies sont plus importantes aux niveaux des bords. Pour résoudre ce problème on voudrait ajouter des interdictions ou des complications au niveau des coins.
+Toutefois le monstre a déjà un mouvement imprévisible et une vitesse qui varie, ce qui rend le jeu plus difficile.
+Notre dernier problème et que nous n'avons pas réussi à faire rebondir les joueurs entre eux, ce qui fait qu'ils peuvent se superposer. Toutefois on observe qu'en pratique, les joueurs ne le font pas trop.
+L’idée de rajouter des recoins dans l’aire du jeu nous a été suggérée, néanmoins après ce premier test nous trouvons que notre jeu remplit assez bien nos attentes.
+Nous avons filmé une partie : on observe effectivement quelques joueurs dans les recoins, et sinon des mouvements de poursuite et d'exploration en file. Certains autres joueurs sont immobiles mais nous ne savons pas si c'est de l'ordre de la stratégie ou si les joueurs ne sont pas vraiment derrière leur écran.
+{{ :wiki:projets:video-projet1.mp4 |}}
+=== Idées de développement ===
+Pour améliorer notre projet nous aurions pu rajouter des recoins pour permettre aux joueurs de se cacher. Cependant, cela n’aurait pas permis de voir la foule en mouvement car on aurait observé un amas derrière un mur. De plus, le cercle ayant la possibilité de passer à proximité, les individus ont autant de chances de se faire manger que s’il n’y avait pas d’obstacles. Coder les obstacles est difficile : les faire apparaître est simple mais interdire au monstre de s’en approcher et permettre aux joueurs de se cacher est plus difficile. Combien de joueurs peuvent se cacher derrière ? Il suffit que quelqu’un s'y cache dès le début de la partie et décide de ne pas bouger pour gagner (dans l'optique où les blobs ne pouvaient pas se superposer). L’idée a donc été abandonnée.
+Nous aurions aimé allez plus loin et créer différents univers de salles ou du moins changer quelques paramètres afin de voir si le comportement des gens change en fonction des circonstances. Observons-nous la même chose si le but est de survivre ou si c'est de faire une chorégraphie  ? Est-ce qu'on aurait vu des phénomènes de ségrégation en sélectionnant seulement deux couleurs visibles de blobs ? Est-ce que le comportement avec une vue "à la première personne" est différent ?
+Pour voir l’incidence du monstre nous pensons réaliser une partie avec le monstre visible cette fois-ci.
+=== Problèmes rencontrés ===
+Il a été compliqué de créer une interface permettant à tous les joueurs de jouer simultanément. De plus la vitesse des joueurs dépend de leur machine et les monstres ne semblent pas totalement synchronisés. Impossible de faire rebondir les blobs entre eux.
 ===== Mémoire =====
-{{ :wiki:projets:cronewd.pdf |}}
+{{ :wiki:projets:3hd42.pdf | Mémoire}}

FablabSU

Outils pour utilisateurs

Outils du site

Différences

Outils de la page