cours 2

ianisl · Nov 13, 2016 · 9cf9dcb · 9cf9dcb
1 parent 90df2a7
commit 9cf9dcb
Show file tree

Hide file tree

Showing 35 changed files with 641 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,17 +3,6 @@ cours-hetic-2016.zip
 node_modules/
 
 # Ignore course packages until they are ready ;)
-p1-introduction-background-refresh/
-p2-movement/
-p3-movement-boundaries/
-p4-movement-boundaries-improved/
-p5-movement-angle/
-p6-movement-angle-functions/
-p7-random-walk/
-p8-random-walk-delay/
-p9-random-walk-delay-trace/
-p10-random-walk-lines/
-p11-random-walk-lines-color/
 p12-agent-object/
 p13-agent-object-many/
 p14-better-trace/

diff --git a/src/p0-introduction/sketch.js b/src/p0-introduction/sketch.js
@@ -1,5 +1,5 @@
 function setup() {
-    createCanvas(600, 600); // Optionnel, permet de préciser la taille de la zone de dessin
+    createCanvas(540, 540); // Optionnel, permet de préciser la taille de la zone de dessin
 }
 
 function draw() {
@@ -24,9 +24,10 @@ function draw() {
     stroke(c1);
     ellipse(width/2, 3*height/4, 100, 100); // La fonction 'ellipse' est surtout utilisée pour tracer des cercles…
     // Ligne
-    var l = brightness(c1); // Récupération de la luminosité (paramètre du mode HSB) de la couleur RGB (0, 0, 0)
+    var l = brightness(c1); // Récupération de la luminosité (paramètre du mode HSB) de la couleur RGB(150, 150, 150)
     colorMode(HSB); // Les couleurs seront maintenant créées en mode HSB
     var c2 = color(200, 50, l); // c2 a la même luminosité que c1 mais des valeurs différentes de teinte et de saturation
+    colorMode(RGB); // Ne pas oublier de repasser en mode RGB après création de la couleur
     stroke(c2);
     strokeWeight(1);
     line(200, 350, 400, 500);

diff --git a/src/p1-introduction-background-refresh/index.html b/src/p1-introduction-background-refresh/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>introduction-background-refresh</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p1-introduction-background-refresh/lib/p5.min.js b/src/p1-introduction-background-refresh/lib/p5.min.js
diff --git a/src/p1-introduction-background-refresh/sketch.js b/src/p1-introduction-background-refresh/sketch.js
@@ -0,0 +1,36 @@
+function setup() {
+    createCanvas(540, 540);
+    background(255); // Bonne pratique : rafraîchir l'arrière-plan une première fois dans le 'setup'
+}
+
+function draw() {
+    background(255); // Rafraîchissement de l'arrière-plan
+    // Rectangle
+    fill('#FF0000');
+    stroke('rgb(0, 0, 0)');
+    rect(0, 0, 100, 120);
+    // Rectangle
+    fill(0, 200, 0);
+    noStroke();
+    rect(140, 200, 20, 30);
+    // Rectangle
+    stroke('rgba(100, 0, 200, 0.5)');
+    strokeWeight(5);
+    noFill();
+    rect(150, 210, 40, 40);
+    // Ellipse
+    stroke(100);
+    ellipse(width/2, height/4, 50, 100);
+    // Ellipse
+    var c1 = color(150, 150, 150);
+    stroke(c1);
+    ellipse(width/2, 3*height/4, 100, 100);
+    // Ligne
+    var l = brightness(c1);
+    colorMode(HSB);
+    var c2 = color(200, 50, l);
+    colorMode(RGB);
+    stroke(c2);
+    strokeWeight(1);
+    line(200, 350, 400, 500);
+}
diff --git a/src/p10-random-walk-lines/index.html b/src/p10-random-walk-lines/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>random-walk-lines</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p10-random-walk-lines/lib/p5.min.js b/src/p10-random-walk-lines/lib/p5.min.js
diff --git a/src/p10-random-walk-lines/sketch.js b/src/p10-random-walk-lines/sketch.js
@@ -0,0 +1,50 @@
+// Paramètres
+var agentSize = 2;
+var stepSize = 10;
+var timeIntervalBetweenUpdates = 100;
+// ----------
+
+var agentPosition;
+var agentPreviousPosition; // Stockage de la position précédente
+var agentAngle;
+var timeOfLastUpdate;
+
+function setup() {
+    createCanvas(540, 540);
+    initPosition();
+    agentAngle = random(0, TWO_PI);
+    background(255);
+    timeOfLastUpdate = millis();
+}
+
+function draw() {
+    var currentTime = millis();
+    // Mise à jour de la position
+    if (currentTime - timeOfLastUpdate > timeIntervalBetweenUpdates) {
+        timeOfLastUpdate = currentTime;
+        agentAngle = random(0, TWO_PI);
+    }
+    updatePosition();
+    // Conditions aux limites
+    if (agentPosition.x < 0 || agentPosition.x > width || agentPosition.y < 0 || agentPosition.y > height) {
+        initPosition();
+    }
+    // Dessin
+    background(255, 255, 255, 3);
+    stroke(0); // Attention à bien adapter les méthodes de dessin. Nous utilisons 'line' et non plus 'ellipse'
+    strokeWeight(agentSize);
+    noFill();
+    line(agentPreviousPosition.x, agentPreviousPosition.y, agentPosition.x, agentPosition.y); // Tracer une ligne entre la position précédente et la nouvelle position permet d'éviter d'obtenir des trajectoires 'en pointillé'.
+}
+
+function initPosition() {
+    agentPosition = createVector(random(width), random(height));
+    agentPreviousPosition = agentPosition.copy(); // Initialisation de la variable de stockage. Important : il faut utiliser la méthode 'copy' pour effectivement copier le vecteur. Un simple assignement ('agentPreviousPosition = agentPosition') créerait simplement une référence.
+
+}
+
+function updatePosition() {
+    agentPreviousPosition = agentPosition.copy(); // Sauvegarde de la position précédente
+    agentPosition.x += cos(agentAngle) * stepSize;
+    agentPosition.y += sin(agentAngle) * stepSize;
+}
diff --git a/src/p11-random-walk-lines-color/index.html b/src/p11-random-walk-lines-color/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>random-walk-lines-color</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p11-random-walk-lines-color/lib/p5.min.js b/src/p11-random-walk-lines-color/lib/p5.min.js
diff --git a/src/p11-random-walk-lines-color/sketch.js b/src/p11-random-walk-lines-color/sketch.js
@@ -0,0 +1,58 @@
+// Paramètres
+var agentSize = 20;
+var stepSize = 10;
+var timeIntervalBetweenUpdates = 50;
+var agentColorHue = 220; // La couleur dominante est spécifiée à l'aide de la teinte du mode de couleur HSB
+// ----------
+
+var agentPosition;
+var agentPreviousPosition;
+var agentAngle;
+var timeOfLastUpdate;
+var agentColor; // Les autres paramètres de couleur seront mis à jour aléatoirement
+
+function setup() {
+    createCanvas(540, 540);
+    initPositionAndColor();
+    agentAngle = random(0, TWO_PI);
+    background(255);
+    timeOfLastUpdate = millis();
+}
+
+function draw() {
+    var currentTime = millis();
+    // Mise à jour de la position
+    if (currentTime - timeOfLastUpdate > timeIntervalBetweenUpdates) {
+        timeOfLastUpdate = currentTime;
+        agentAngle = random(0, TWO_PI);
+    }
+    updatePosition();
+    // Conditions aux limites
+    if (agentPosition.x < 0 || agentPosition.x > width || agentPosition.y < 0 || agentPosition.y > height) {
+        initPositionAndColor();
+    }
+    // Dessin
+    background(255, 255, 255, 1);
+    stroke(agentColor);
+    strokeWeight(agentSize);
+    noFill();
+    line(agentPreviousPosition.x, agentPreviousPosition.y, agentPosition.x, agentPosition.y);
+}
+
+function initPositionAndColor() {
+    agentPosition = createVector(random(width), random(height));
+    agentPreviousPosition = agentPosition.copy();
+    colorMode(HSB, 360, 100, 100); // Pour mettre à jour la couleur aléatoirement en conservant la teinte 'agentColorHue' définie dans les paramètres, on crée la nouvelle couleur de l'agent dans l'espace HSB. Les paramètres additionnels étalonnent la plage maximale des valeurs de teinte, saturation et luminosité. Les valeurs '360, 100, 100' correspondent à l'espace HSB tel qu'il est défini dans Photoshop.
+    var c = color(agentColorHue, random(100), random(100)); // Création de la nouvelle couleur en mode HSB
+    var r = red(c); // Récupération des composantes RGB de la couleur
+    var g = green(c);
+    var b = blue(c);
+    colorMode(RGB); // Retour en mode RGB
+    agentColor = color(r, g, b); // Mise à jour de la couleur de l'agent en mode RGB
+}
+
+function updatePosition() {
+    agentPreviousPosition = agentPosition.copy();
+    agentPosition.x += cos(agentAngle) * stepSize;
+    agentPosition.y += sin(agentAngle) * stepSize;
+}
diff --git a/src/p2-movement/index.html b/src/p2-movement/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>movement</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p2-movement/lib/p5.min.js b/src/p2-movement/lib/p5.min.js
diff --git a/src/p2-movement/sketch.js b/src/p2-movement/sketch.js
@@ -0,0 +1,19 @@
+var x; // Coordonnées de position
+var y;
+
+function setup() {
+    createCanvas(540, 540);
+    x = 0;
+    y = height/2;
+    background(255);
+}
+
+function draw() {
+    // Mise à jour de la position
+    x += 2;
+    // Dessin
+    background(255);
+    noStroke();
+    fill(0);
+    ellipse(x, y, 10, 10);
+}
diff --git a/src/p3-movement-boundaries/index.html b/src/p3-movement-boundaries/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>movement-boundaries</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p3-movement-boundaries/lib/p5.min.js b/src/p3-movement-boundaries/lib/p5.min.js
diff --git a/src/p3-movement-boundaries/sketch.js b/src/p3-movement-boundaries/sketch.js
@@ -0,0 +1,23 @@
+var x;
+var y;
+
+function setup() {
+    createCanvas(540, 540);
+    x = 0;
+    y = height/2;
+    background(255);
+}
+
+function draw() {
+    // Mise à jour de la position
+    x += 2;
+    // Conditions aux limites (boundary conditions)
+    if (x > width) {
+        x = 0;
+    }
+    // Dessin
+    background(255);
+    noStroke();
+    fill(0);
+    ellipse(x, y, 10, 10);
+}
diff --git a/src/p4-movement-boundaries-improved/index.html b/src/p4-movement-boundaries-improved/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>movement-boundaries-improved</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p4-movement-boundaries-improved/lib/p5.min.js b/src/p4-movement-boundaries-improved/lib/p5.min.js
diff --git a/src/p4-movement-boundaries-improved/sketch.js b/src/p4-movement-boundaries-improved/sketch.js
@@ -0,0 +1,27 @@
+// Paramètres
+// Bonne pratique : stocker les paramètres dans des variables initialisées en début de sketch
+var agentSize = 10; // Taille de l'agent
+var stepSize = 2; // Increment de position (vitesse de l'agent)
+// ----------
+
+var agentPosition; // Les variables 'utilitaires' (qui doivent être globales mais ne sont pas des paramètres) sont placées juste avant la fonction 'setup()'
+
+function setup() {
+    createCanvas(540, 540);
+    agentPosition = createVector(0, height/2); // Les fonctions et variables définies par la librairie p5.js ne sont pas disponibles en dehors des fonctions 'setup()', 'draw()', etc.
+    background(255);
+}
+
+function draw() {
+    // Mise à jour de la position
+    agentPosition.x += stepSize;
+    // Conditions aux limites
+    if (agentPosition.x > width) {
+        agentPosition.x = 0;
+    }
+    // Dessin
+    background(255);
+    noStroke();
+    fill(0);
+    ellipse(agentPosition.x, agentPosition.y, agentSize, agentSize);
+}
diff --git a/src/p5-movement-angle/index.html b/src/p5-movement-angle/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>movement-angle</title>
+    <script src="lib/p5.min.js"></script>
+    <script src="sketch.js"></script>
+    <style> body {padding: 0; margin: 0; background-color: #e6e6e6} canvas {margin: 30px auto; display: block}</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/p5-movement-angle/lib/p5.min.js b/src/p5-movement-angle/lib/p5.min.js
diff --git a/src/p5-movement-angle/sketch.js b/src/p5-movement-angle/sketch.js
@@ -0,0 +1,29 @@
+// Paramètres
+var agentSize = 10;
+var stepSize = 2;
+// ----------
+
+var agentPosition;
+var agentAngle;
+
+function setup() {
+    createCanvas(540, 540);
+    agentPosition = createVector(random(width), random(height)); // Position aléatoire
+    agentAngle = random(0, TWO_PI); // Direction aléatoire
+    background(255);
+}
+
+function draw() {
+    // Mise à jour de la position
+    agentPosition.x += cos(agentAngle) * stepSize;
+    agentPosition.y += sin(agentAngle) * stepSize;
+    // Conditions aux limites
+    if (agentPosition.x < 0 || agentPosition.x > width || agentPosition.y < 0 || agentPosition.y > height) {
+        agentPosition = createVector(random(width), random(height)); // Si l'agent sort de l'espace de dessin, on lui donne une nouvelle position aléatoire
+    }
+    // Dessin
+    background(255);
+    noStroke();
+    fill(0);
+    ellipse(agentPosition.x, agentPosition.y, agentSize, agentSize);
+}